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

この例 (ネストされた 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">
   <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/ ネストされた svg を使用するときに緑色の円が途切れないようにするにはどうすればよいですか?

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 に答える