1

異なるインライン SVG で同じ clipPath を使用します。

http://jsfiddle.net/meo/4nBnS/ 

<svg class="svg-graphic" width="0" height="0" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
    <clipPath id="hex-mask">
        <polygon points="270,0 0,160 0,485 270,645 560,485 560,160"></polygon>
    </clipPath>
</svg>


<svg class="svg-graphic" width="180" height="200" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
    <rect clip-path="url(#hex-mask)" x="0" y="0" width="100%" height="100%" fill="purple"  />
</svg>

<svg class="svg-graphic" width="180" height="200" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
    <rect clip-path="url(#hex-mask)" x="0" y="0" width="100%" height="100%" fill="red"  />
</svg>

使用したいすべてのパスで 0x0px SVG 要素を実行することをお勧めしますか? これを行うより良い方法はありますか？

4

1 に答える 1

2

通常、再利用可能なコンポーネントは <defs> 要素内 (ページの <svg> 要素の 1 つ) に定義します。<defs> がどの <svg> 要素に配置されるかはそれほど重要ではありませんが、ページの最初の svg 内の最初の子として配置することをお勧めします (参照を解決できるため)最初の使用時に直接）。

于 2012-10-08T18:08:43.230 に答える