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>规范，其support在所有浏览器中都非常好。

我知道您需要比这更复杂的口罩。这里重要的是应用不同效果的顺序：剪辑路径和遮罩为processed after filter effects：

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

因此，您需要将遮罩的元素包装在<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元素

1 个答案: