将发光应用于具有渐变的 SVG 元素

Question

我有一个基于圆和掩码的SVG元素来创建环。

代码如下：

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

戒指有一个渐变作为填充颜色。现在，我想在使用渐变颜色的环上应用发光效果。关于如何做到这一点的任何想法？

Answer 1

什么是"发光"？我认为没有规范的定义，所以我使用我以前见过的定义：彩色背景阴影，其不透明度值被夸大。要定义这些效果，请参阅 SVG<filter>规范，它的支持在浏览器中非常好。

我知道你需要面具来处理比这个更复杂的情况。这里重要的是应用不同效果的顺序：剪辑路径和蒙版在滤镜效果之后处理：

首先，在没有滤镜效果、遮罩、剪切和不透明度的情况下设置元素样式。然后将元素及其后代绘制在临时画布上。在最后一步中，以下效果按顺序应用于元素：滤镜效果、剪切、遮罩和不透明度。

因此，您需要将被屏蔽的元素包装在<g>中，并在那里应用发光滤镜。

改变stdDeviation以拉伸或缩小阴影，改变slope以更改其不透明度。如果将斜率设置为 2>值，则环与其阴影之间将不再有清晰的边框。

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