Question

我正在用D3.JS创建一些SVG。我有一组SVG元素，我为我的数据集中的每个项重复。重复的元素之一是方形化身/简档图像。我想掩盖这些图像中的每一个以使它们变圆。

我认为在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="..." />属性中引用它。但这似乎不太可能。还有其他方法可行吗？

Answer 1

使用maskContentUnits="objectBoundingBox"定义您的面具。在此模式下，您使用的坐标均相对于对象的边界框。因此，例如，覆盖对象的圆形掩模将是：

<mask maskContentUnits="objectBoundingBox">
    <circle cx="0.5" cy="0.5" r="0.5" fill="white">
</mask>

SVG Mask重复使用

1 个答案: