11

複数の SVG タグがあり、それぞれに同じ ID を持つ異なるクリップ パスを定義するとします。

<svg id="svg1" width="200" height="200">
    <defs>
        <clipPath id="nodeclipper">
            <rect width="100" height="100" x="0" y="0" />
        </clipPath>
    </defs>
</svg>

<svg id="svg2" width="200" height="200">
    <defs>
        <clipPath id="nodeclipper">
            <circle cx="20" cy="0" r="40" />
        </clipPath>
    </defs>
</svg>

JSFiddleも作成しました。期待される動作は何ですか?要素は独自の SVG タグ内の定義のみを参照できると思っていましたが、そうではないようです:

  • Chrome 26:circleクリップ パスを 2 回使用します。
  • Firefox 17:rectクリップ パスを 2 回使用します。
  • Safari 6:期待どおりrectに 1 つのcircleクリップ パスをレンダリングします。

SVG タグの 1 つを非表示にすると、Chrome と Safari がclip-path完全にドロップするため、奇妙になります。

clipPathのIDが異なる場合に機能することは知っていますが、そのようになっているのでしょうか? 私が見る限り、仕様には問題に関する情報は含まれていません。

4

1 に答える 1