svg - SVG过滤器feGaussianBlur需要提升

我希望有一个黑色的文本和一个白色的外部辉光，以便在彩色地图上可读。这是我曾经做过的事情：

<defs>
  <filter id="label-glow">
    <feGaussianBlur stdDeviation="1" />
  </filter>
</defs>
<text stroke="white" stroke-width="5" filter="url(#label-glow)">Harald's Repose</text>
<text>Harald's Repose</text>

我想避免重复文本元素，所以我决定使用feFlood创建一个白色矩形，feComposite创建文本的白色副本，feGaussianBlur创建模糊，然后另一个feComposite在顶部添加原始文本这一切。不幸的是，产生的外部辉光非常微弱。我发现重复feComposite几次会有所帮助。我敢肯定有更好的解决方案。我究竟做错了什么？

<defs>
  <filter id="label-glow">
<feFlood flood-color="white"/>
<feComposite in2="SourceGraphic" operator="in"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite operator="over"/>
<feComposite operator="over"/>
<feComposite operator="over"/>
<feComposite operator="over"/>
<feComposite in="SourceGraphic"/>
  </filter>
</defs>
<text filter="url(#label-glow)">Harald's Repose</text>

最佳答案

一种稍微更优雅的方法是使用alpha通道上的feComponentTransfer来增加发光的不透明度。

<filter id="label-glow">
<feFlood flood-color="white"/>
<feComposite in2="SourceGraphic" operator="in"/>
<feGaussianBlur stdDeviation="2"/>
<feComponentTransfer>
    <feFuncA type="gamma" exponent=".5" amplitude="2"/>
      </feComponentTransfer>
<feComposite in="SourceGraphic"/>
  </filter>

您可以通过更改幅度来调整白色的平均强度，也可以通过更改指数来调整强度衰减。

关于svg - SVG过滤器feGaussianBlur需要提升，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15130850/