SVG滤镜feGaussianBlur需要提高效果

Question

我希望在有色地图上阅读时，文字能够呈现黑色并具有白色外发光效果。这是以前我所做的事情:

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

- Alex Schröder

Answer 1

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

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

通过改变振幅，您可以调整白色的平均强度；通过改变指数，您可以调整强度衰减。

- Michael Mullany