Question

在此示例中，绿色圆圈被切断

<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时，如何让绿色圆圈不被切断？

Answer 1

内部svg有一个默认视口，它是0,0,500,500（x，y，width，height），默认情况下，任何溢出此区域的内容都会被隐藏/剪辑。

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

在内部svg元素上添加overflow =“visible”属性
更改x，y值，使圆圈在视口中
添加一个viewBox，以便您定义一个显式视口，显示您想要在内部svg中看到的区域。

SVG viewBox无法在负位置使用嵌套的svgs

1 个答案: