2

我正在用 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="..." />属性中引用它。但这似乎不可能。还有另一种可行的方法吗？

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 回答