Set an SVG image to 100% width und height

0
votes

How can i set the width and hight from this svg image? I dont get it.

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

I tried it with the width and height attr., with the viewBox attr. and with a div around the svg (i read in some post that an svg image with no width and heigh is auto. 100%) but nothing works.

fiddle here http://jsfiddle.net/k38Bv/1/

1
svgheightwidth

1 Answers

1
votes

The mistake you had is that you forgot to add the viewBox property. You need it because it's important for scaling. Here's what the object should be like:

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>

Fiddle:

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