尝试将 svg 圆圈居中在 div 中

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

我无法理解底部圆圈的截断。我想要的只是一个带有完全居中的 SVG 圆的 div。我曾尝试设置框大小和填充，但无济于事。

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 居中，有几种解决方案：

1. 使用 CSSmargin使 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>

2. 给 SVG aviewBox并让浏览器自动将 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>