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

你的SVG的viewBox太小了，无法适应你正在使用的路径。 viewBox代表SVG的一部分，应该显示。 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>元素的大小。

Example Fiddle (big <svg>)

Example Fiddle (16x16 <svg>)

SVG路径没有观察宽高比

1 个答案: