4

在这个例子中，绿色圆圈被切断

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

4

1 回答 1

12

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

你可以做几件事...

  1. 在内部 svg 元素上添加一个 overflow="visible" 属性
  2. 更改 x、y 值，使圆圈在视口内
  3. 添加一个 viewBox 以便您定义一个显式视口，以显示您希望在内部 svg 中看到的区域。
于 2012-02-06T17:14:39.410 回答