SVG剪裁椭圆BUG

Question

两侧我创建了一个SVG和使用的代码

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

其粘贴到http://www.w3schools.com/svg/tryit.asp?filename=trysvg_myfirst，检查它的剪辑留下的问题和椭圆形的顶面里面的椭圆。如何解决这个问题？

Answer 1

SVG的“剪切”部分只是在视口之外。

有几种方法可以“解决”这个问题。

您可以通过相应的坐标转换到

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

重新定位椭圆（MDN实况here和here），也可以明确地设置视框（MDN docu），即包括整个椭圆形，通过添加，例如，

viewBox="-10 -10 300 300" 

到<svg>元素本身。