Question

我有一个简单的标记：

 <div style="background-color:red;">
    <svg>
         <circle cx="76" cy="76" r="71" 
           style="fill:yellow;stroke:purple;stroke-width:10" />
    </svg>
 </div>

请参阅jsfiddle here

我无法理解底部圆圈的截断。我想要的只是一个div，SVG圆圈正好居中。我试过设置盒子大小和填充但是没有用。

Answer 1

出现问题的原因是您没有为SVG指定大小。当您不提供大小时，浏览器会将其默认大小设置为300x150。

因此，y=76处的半径为71且笔划宽度为10的圆圈将向下延伸至76 + 71 + 5 = 152，这意味着圆圈的底部会略微被修剪。

<div style="background-color:red;">
  <svg>
    <circle cx="76" cy="76" r="71" 
            style="fill:yellow;stroke:purple;stroke-width:10" />
  </svg>
</div>

如果你需要圆圈正好是那个尺寸（即152像素），那么你应该把它做成SVG的宽度和高度。

<div style="background-color:red;">
  <svg width="152px" height="152px">
    <circle cx="76" cy="76" r="71" 
            style="fill:yellow;stroke:purple;stroke-width:10" />
  </svg>
</div>

这解决了你的尺码问题。要使SVG居中，有几个解决方案：

使用CSS margin将SVG置于div中。

svg {
  display: block;
  margin: 0 auto;
}

<div style="background-color:red;">
  <svg width="152px" height="152px">
    <circle cx="76" cy="76" r="71" 
            style="fill:yellow;stroke:purple;stroke-width:10" />
  </svg>
</div>

给SVG viewBox并让浏览器自动将SVG放入div中。这种方法的优点是SVG将自动缩放并在div中居中，无论其大小如何变化。

div {
  height: 400px;
}

<div style="background-color:red;">
  <svg width="100%" height="100%" viewBox="0 0 152 152">
    <circle cx="76" cy="76" r="71" 
            style="fill:yellow;stroke:purple;stroke-width:10" />
  </svg>
</div>

Answer 2

应该解决截断。默认情况下，<svg>的默认值设置为overflow: hidden;。将overflow: visible;应用于<svg>应该有效。

试图将一个svg圆圈放在div中

2 个答案: