2

D3.JS で SVG を作成しています。データ セット内の各アイテムに対して繰り返す SVG 要素のグループがあります。繰り返される要素の 1 つは、正方形のアバター/プロフィール画像です。これらの各画像をマスクして丸みを帯びさせたいと思います。

defs でマスクを定義してから、各画像をそれに向ければうまくいくと思いましたが、座標が異なるためうまくいきません。これは、次のように、各グループでマスクを繰り返す必要があるということですか。

<defs>
    <mask id="#mask" ...>
        <!-- ... --->
    </mask>
</defs>

<g>
    <rect ... />
    <use id="uniqueMask1" xlink:href="#mask" transform="translate(10, 10)" />
    <image x="10" y="10" ... mask="url(#uniqueMask1)" />
</g>

<!-- repeat multiple times -->

私が望んでいたのは、マスクを一度定義してから、<image mask="..." />属性から参照することでした。しかし、これは不可能のようです。機能する別のアプローチはありますか？

4

1 に答える 1

4

を使用してマスクを定義しますmaskContentUnits="objectBoundingBox"。このモードでは、使用する座標はすべて、オブジェクトのバウンディング ボックスに対して相対的です。たとえば、オブジェクトを覆う円形のマスクは次のようになります。

<mask maskContentUnits="objectBoundingBox">
    <circle cx="0.5" cy="0.5" r="0.5" fill="white">
</mask>
于 2013-10-11T18:03:35.103 に答える