I have a number of differently colored and sized svg circles that I would like to apply a radial gradient mask to. Is there a way to define a single mask that is applied to each circle by stretching it to match that circle's size?
Here is what I've come up with so far:
<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)"/>
The issue is that the percentage radius in the mask/circle doesn't seem to be measured relative to the size of the circle the mask is being applied to.
Is there a way of doing this without needing to define a new mask for each item I apply it to?