SVG掩码重用

我正在用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 -->

---

我希望定义一次掩码，然后从

属性引用它。但这似乎是不可能的。还有其他方法可以使用吗？

使用

maskContentUnits=“objectBoundingBox”

定义掩码。在此模式下，您使用的坐标都是相对于对象的边界框的。例如，覆盖对象的圆形遮罩是：

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

---

使用

maskContentUnits=“objectBoundingBox”

定义掩码。在此模式下，您使用的坐标都是相对于对象的边界框的。例如，覆盖对象的圆形遮罩是：

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

太好了，这听起来很有帮助。太好了，这听起来很有帮助。