4

I have a SVG element with viewBox="0 0 100 100" and preserveAspectRatio="none" resizes automatically with the window size.

However I'm trying to have a fixed-size and perfect circle inside it. Seems like the outermost <svg> element does not allow this. Any ideas?

(jsFiddle here)

enter image description here

<svg width="100%" height="50%" viewBox="0 0 100 100"
     preserveAspectRatio="none">

    <!-- ... OTHER SVG ELEMENTS I HAVE -->
    <circle cx="50" cy="50" r="10px" fill="red"></circle>
</svg>
ahmet alp balkan
  • 42,679
  • 38
  • 138
  • 214
  • `preserveAspectRatio=none` tells the browser to not preserve the aspect ratio, so, have you tried setting it to anything else? See http://www.w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute for reference. – Erik Dahlström Jul 09 '13 at 10:27
  • See my answer to this question here: http://stackoverflow.com/questions/16891277/programmatically-centering-svg-path/16921836#16921836 – Paul LeBeau Jul 10 '13 at 15:25

1 Answers1

3

If you want a perfect sized circle, then try something like this...

<svg width="100%" height="50%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"   style="border: 1px solid #000">
    <!-- ... OTHER SVG ELEMENTS I HAVE -->
    <circle cx="50" cy="50" r="40px" fill="red"></circle>
</svg>

The preserveAspectRatio="xMidYMid meet" property means that the circle will expand to the maximum x and y sizes so that the graphic doesn't overflow the box.

DiggityDug
  • 351
  • 2
  • 4