SVG视框未在负位置

在这个例子中使用嵌套svgs工作时，绿色圆被切断SVG视框未在负位置

<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时使绿色圆圈不会被切断？

来源

2012-02-06 Drew LeSueur

内部svg有一个默认视口，它是0,0,500,500（x，y，宽度，高度），默认情况下任何溢出该区域的内容都被隐藏/剪裁。

有几件事情你可以做...

添加溢出=“可见”在内SVG元素
变化的X，Y值属性，这样的循环是内视
添加一个viewBox，以便您定义一个明确的视口，显示您想要在内部svg中看到的区域。

来源

2012-02-06 17:14:39

SVG视框未在负位置

回答

相关问题