将辉光应用于带有渐变的 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

什么是"glow"？我不认为有一个规范的定义，所以我将使用我以前见过的定义：一个彩色的背景阴影，其不透明度值被夸大了。要定义这些效果，请参阅 SVG <filter> spec, its support 跨浏览器非常好。

我知道你需要面具来应对比这更复杂的情况。这里重要的是应用不同效果的顺序：剪辑路径和蒙版是 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.

因此您需要将蒙版元素包裹在 <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>

将辉光应用于带有渐变的 SVG 元素

Apply glow to SVG element with a gradient

svg

filter

glow