在此示例中,绿色圆圈被切断
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" version="1.1" style="background-color: pink" viewBox="-300 -300 500 500">
<svg width="500" height="500" x="0" y="0"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /></svg>
<svg width="500" height="500" x="0" y="0"><circle cx="0" cy="0" r="40" stroke="black" stroke-width="2" fill="green" /></svg>
</svg>
</body>
</html>
请参阅:http://jsfiddle.net/sCzZT/
请注意每个圆圈都包含在自己的圆圈中 svg
在此示例中(没有嵌套的svgs),绿色圆圈不会被切断
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" version="1.1" style="background-color: pink" viewBox="-300 -300 500 500">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
<circle cx="0" cy="0" r="40" stroke="black" stroke-width="2" fill="green" />
</svg>
</body>
</html>
http://jsfiddle.net/jVH9q/ 使用嵌套的svgs时如何让绿色圆圈不被切断？
Rob*_*son 12
内部svg有一个默认视口,即0,0,500,500(x,y,width,height),默认情况下,任何溢出此区域的内容都会被隐藏/剪裁.
你可以做几件事......