3

色付きの地図で読めるように、外側が白く光る黒いテキストが欲しいです。これは私が以前行っていたことです：

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

1 に答える 1

3

もう少しエレガントな方法は、アルファチャネルの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>

振幅を変更することで白の平均強度を調整でき、指数を変更することで強度の減衰を調整できます。

于 2013-02-28T12:55:01.697 に答える