1

我无法让 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 中看起来相同。

4

1 回答 1

4

你们的viewBoxSVG 太小了，不适合您使用的路径。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>元素的大小。

小提琴示例（大<svg>）

小提琴示例（16x16 <svg>）

于 2013-09-20T08:28:00.217 回答