将SVG图像设置为100％宽度和高度

Question

如何设置此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 attr的宽度和高度attr。并且在svg周围有一个div（我在一些帖子中读到没有宽度和高度的svg图像是自动的.100％）但没有任何作用。

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

Answer 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/