使用渐变将光晕应用于SVG元素

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

代码如下：

什么是“发光”？我不认为有一个规范的定义，所以我将使用一个我以前见过的定义：一个有颜色的背景阴影，其不透明度值被放大。要定义这些效果，请参考SVG规范，它在各种浏览器中都非常好

我知道你需要面具来应对比这更复杂的情况。这里重要的是应用不同效果的顺序：剪辑路径和遮罩是：

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

因此，您需要将遮罩元素包裹在

中，并在那里应用辉光过滤器

更改

stdDeviation

以拉伸或收缩阴影，更改

slope

以更改其不透明度。如果将坡度设置为大于2的值，则环与其阴影之间将不再有清晰的边界

什么是“发光”？我不认为有一个规范的定义，所以我将使用一个我以前见过的定义：一个有颜色的背景阴影，其不透明度值被放大。要定义这些效果，请参考SVG规范，它在各种浏览器中都非常好

我知道你需要面具来应对比这更复杂的情况。这里重要的是应用不同效果的顺序：剪辑路径和遮罩是：

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

因此，您需要将遮罩元素包裹在

中，并在那里应用辉光过滤器

更改

stdDeviation

以拉伸或收缩阴影，更改

slope

以更改其不透明度。如果将坡度设置为大于2的值，则环与其阴影之间将不再有清晰的边界

我在示例中明确使用了掩码，因为我的实际项目使用复杂的掩码来创建特定的表单。当我将你的过滤器应用到我的基于掩码的示例时，什么都没有发生。很好，这很有效。似乎重点是将其应用于外部

，而不是元素本身。非常感谢你！那个过滤器似乎有点奇怪。当我放大时（你也可以在不放大的情况下看到它），我会看到奇怪的人工制品。示例：我使用了

stdDeviation=“10”

和

slope=“2”

，但设置并不重要。我无法从设置中确认这一点，但我以前见过此类人工制品。它们似乎是由渲染器和硬件的特定组合触发的。我可以推测它们与缓慢变化的不透明度有关，但这纯粹是猜测。在我的示例中，我显式地使用了掩码，因为我的实际项目使用了一个复杂的掩码来创建特定的表单。当我将你的过滤器应用到我的基于掩码的示例时，什么都没有发生。很好，这很有效。似乎重点是将其应用于外部

，而不是元素本身。非常感谢你！那个过滤器似乎有点奇怪。当我放大时（你也可以在不放大的情况下看到它），我会看到奇怪的人工制品。示例：我使用了

stdDeviation=“10”

和

slope=“2”

，但设置并不重要。我无法从设置中确认这一点，但我以前见过此类人工制品。它们似乎是由渲染器和硬件的特定组合触发的。我可以推测它们与缓慢变化的不透明度有关，但这纯粹是猜测。我发现我对他们无能为力。