Применение маски радиального градиента SVG к нескольким элементам

Question

У меня есть несколько svg кругов разного цвета и размера, к которым я хотел бы применить маску радиального градиента. Есть ли способ определить одну маску, которая применяется к каждому кругу, растягивая ее, чтобы соответствовать размеру этого круга?

Вот что я придумала до сих пор:

<radialGradient id="radialGradient" cx=".5" cy=".5" r=".5">
  <stop offset="0%" stop-color="white" stop-opacity="0"/>
  <stop offset="100%" stop-color="white" stop-opacity="1"/>
</radialGradient>
<mask id="radialMask" maskUnits="objectBoundingBox" x="0" y="0" width="1.0" height="1.0">
  <circle cx="0" cy="0" r="50%" fill="url(#radialGradient)"/>
</mask>

...

<circle cx="10" cy="10" r="10" fill="red" mask="url(#radialMask)"/>
<circle cx="100" cy="100" r="50" fill="blue" mask="url(#radialMask)"/>

Проблема в том, что процентный радиус в маске / круге, кажется, не измеряется относительно размера круга, к которому применяется маска.

Есть ли способ сделать это без необходимости определять новую маску для каждого элемента, к которому я ее применяю?

Answer 1

Вы должны установить maskContentUnits="objectBoundingBox" тоже. Это сделает содержимое маски соответствующим размеру маскируемого объекта.