Повторное использование SVG-маски

Question

Я создаю SVG с D3.JS. У меня есть группа элементов 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>