Apply glow to SVG element with a gradient - svg

Question

I have an SVG element that's based on a circle and a mask to create a ring.
The code is as follows:
<svg width="100%" height="100%" viewBox="0 0 300 300" version="1.1">
<defs>
<linearGradient x1="97.3756325%" y1="100%" x2="0%" y2="100%" id="gradient">
<stop stop-color="#FF00AC" offset="0%"></stop>
<stop stop-color="#5D00C4" offset="100%"></stop>
</linearGradient>
<mask id="circle-mask">
<circle cx="150" cy="150" r="145" fill="white"/>
<circle cx="150" cy="150" r="140" fill="black"/>
</mask>
</defs>
<circle cx="150" cy="150" r="145" mask="url(#circle-mask)" fill="url(#gradient)"/>
</svg>
The ring got a gradient as fill color. Now I want to apply a glow effect on the ring that uses the colors of the gradient. Any ideas on how to do that?

Answer 1

What is a "glow"? I don't think there is a canonical definition, so I'm going with one that I have seen used before: a backdrop shadow that is colored and whose opacity values are exagerated. To define those effects, refer to the SVG <filter> spec, its support is pretty good across browsers.
I understand you need the mask for more complex situations than this one. The important thing here is the order in which different effects are applied: clip paths and masks are processed after filter effects:
First the element is styled under absence of filter effects, masking, clipping and opacity. Then the element and its descendants are drawn on a temporary canvas. In a last step the following effects are applied to the element in order: filter effects, clipping, masking and opacity.
Therefore you need to wrap the masked element in a <g> and apply the glow filter there.
Vary stdDeviation to stretch or shrink the shadow, and vary slope to change its opacity. If you set the slope to a value > 2, you will no longer get a clear border between the ring and its shadow.
<svg width="100%" height="100%" viewBox="0 0 300 300" version="1.1">
<defs>
<linearGradient x1="97.3756325%" y1="100%" x2="0%" y2="100%" id="gradient">
<stop stop-color="#FF00AC" offset="0%"></stop>
<stop stop-color="#5D00C4" offset="100%"></stop>
</linearGradient>
<mask id="circle-mask">
<circle cx="150" cy="150" r="145" fill="white"/>
<circle cx="150" cy="150" r="140" fill="black"/>
</mask>
<filter id="glow">
<feGaussianBlur stdDeviation="5"/>
<feComponentTransfer>
<feFuncA type="linear" slope="2" />
</feComponentTransfer>
<feBlend in2="SourceGraphic" />
</filter>
</defs>
<g filter="url(#glow)">
<circle cx="150" cy="150" r="145" mask="url(#circle-mask)" fill="url(#gradient)"/>
</g>
</svg>