SVG 路径不观察纵横比

Question

我无法将 SVG 路径扩展到其容器：

<svg xmlns="http://www.w3.org/2000/svg" 
  preserveAspectRatio="xMidYMid" 
  viewBox="0 0 16 16" 
  width="16" 
  height="16">
    <path stroke="#000" fill="none" d="M209,15a195,195 0 1,0 2,0zm1,0v390m195-195H15M59,90a260,260 0 0,0 302,0 m0,240 a260,260 0 0,0-302,0M195,20a250,250 0 0,0 0,382 m30,0 a250,250 0 0,0 0-382"></path>
</svg>

演示： http: //jsfiddle.net/FeTv2/1/ - 正如您所看到的，路径太大，并且似乎有顶部和左侧偏移。

在 Chrome 和 Firefox 中看起来是一样的。

Answer 1

您viewBox的 SVG 太小，无法适应您正在使用的路径。代表viewBoxSVG 中应显示的部分。和代表显示内容的框的尺寸width。height

尝试一个viewBox真正适合您路径的尺寸，如下所示（可能需要进一步调整）：

<svg height="16" width="16" 
     viewBox="0 0 450 450" 
     preserveAspectRatio="xMidYMid" 
     xmlns="http://www.w3.org/2000/svg">
    <path d="M209,15a195,195 0 1,0 2,0zm1,0v390m195-195H15M59,90a260,260 0 0,0 302,0 m0,240 a260,260 0 0,0-302,0M195,20a250,250 0 0,0 0,382 m30,0 a250,250 0 0,0 0-382" fill="none" stroke="#000"/>
</svg>

此外，您可能（或可能不）想要调整<svg>元素的大小。

小提琴示例（大<svg>）

小提琴示例 (16x16 <svg>)