SVG过滤器feGaussianBlur需要提升

时间:2013-02-28 08:32:03

标签: svg svg-filters

我想要一个带有白色外部发光的黑色文字,以便在彩色地图上可读。这就是我以前做的事情:

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

1 个答案:

答案 0 :(得分:3)

稍微更优雅的方法是使用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>

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