【问题标题】：Set an SVG image to 100% width und height将 SVG 图像设置为 100% 的宽度和高度
【发布时间】：2014-07-23 09:43:07
【问题描述】：

如何设置此 svg 图像的宽度和高度？没看懂。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <path fill="none" stroke="#0074c4" d="M80,80 A80,80 0 1,180.61117636732928,100.45116865416591" stroke-width="3" />
</svg>

我尝试了使用宽度和高度属性，使用 viewBox 属性。并且在 svg 周围有一个 div（我在一些帖子中读到，没有宽度和高度的 svg 图像是自动的。100%）但没有任何效果。

在这里摆弄 http://jsfiddle.net/k38Bv/1/

【问题讨论】：

标签： svg height width

【解决方案1】：

您犯的错误是您忘记添加viewBox 属性。您需要它，因为它对扩展很重要。对象应该是这样的：

HTML：

<svg width="100%" 
   height="100%"
   viewBox="0 0 300 150"
   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
   <path fill="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" stroke="#0074c4" d="M80,80 A80,80 0 1,180.61117636732928,100.45116865416591" stroke-width="3" />
</svg>

小提琴：

http://jsfiddle.net/k38Bv/2/

【讨论】：