Question

I’ve created an svg and an ellipse inside it using the code

<svg xmlns="http://www.w3.org/2000/svg" 
     version="1.1" 
     type="svgObj" 
     style="display: inline; position: relative; left: 0px; top: 0px;" 
     id="svg_5" 
     preserveAspectRatio="none">
  <ellipse type="svgShpObj" id="shape_2" cx="59px" cy="33px" rx="57px" ry="31px"
           fill="#A5A85A" stroke-width="10" stroke="#F5821F"
           stroke-opacity="1" fill-opacity="0.39215686274509803"/>
</svg>

paste it to http://www.w3schools.com/svg/tryit.asp?filename=trysvg_myfirst and check the problem that it clips left and top sides of the ellipse. How to fix this?

Answer 1

The “clipped” parts of the SVG are simply outside of the viewport.

There are several ways to “fix” this.

You can reposition the ellipse (MDN docu here and here) by changing the respective coordinates to

 cx="70px" cy="40px"

Or you can explicitly set a viewBox (MDN docu), that includes the whole ellipse, by adding, e.g.,

 viewBox="-10 -10 300 300"

to the <svg> element itself.