SVG剪切椭圆BUG的两侧

时间:2012-07-13 15:20:14

标签: html svg

我使用代码

在其中创建了一个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并检查它剪切椭圆的左侧和顶侧的问题。如何解决这个问题?

1 个答案:

答案 0 :(得分:3)

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

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

您可以通过将相应的坐标更改为

来重新定位椭圆(MDN文档herehere
 cx="70px" cy="40px"

或者您可以通过添加例如

来显式设置包含整个椭圆的viewBox(MDN docu)。
 viewBox="-10 -10 300 300"

<svg>元素本身。