複数の 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が異なる場合に機能することは知っていますが、そのようになっているのでしょうか? 私が見る限り、仕様には問題に関する情報は含まれていません。