SVGのfeGaussianFilterで<text>をぼかすと、文字の色が黒になる

SVGの<text>を色はそのままに、ぼかしたいと考えております。

しかし、<text>にfeGaussianFilterを設定して文字をぼかした場合、
テキストの色設定が無視され、黒くなってしまいます。

<svg width="700" height="140">
  <defs>
    <filter id="blur_test">  
    <feFlood flood-color="yellow"/>
    <feGaussianBlur in="SourceAlpha" stdDeviation="2"></feGaussianBlur></filter>
  </defs>

<!-- ↓ filterを設定して、カラーが消失（黒色になる） -->
<text x="0" y="50" font-size="50" filter="url('#blur_test')" fill="red">TEST</text>

<!-- ↓ filterを設定しない場合、カラーは赤色 -->
<text x="0" y="100" font-size="50" fill="red" >TEST</text>

</svg>

↓表示結果

＜試したこと＞
・styleでカラー設定してみましたが、結果は変わりませんでした

こちら、カラーを反映させたままぼかす方法をご教示いただけないでしょうか？

＜確認した環境＞
Chromeブラウザ、Firefoxブラウザ

行動規範の内容に同意します

回答1件

自己解決

解決しました。

[変更前]
<feGaussianBlur in="SourceAlpha" stdDeviation="2">

[変更後]
<feGaussianBlur in="SourceGlaphic" stdDeviation="2">

SourceAlpha -> SourceGlaphic に変更するとカラーが問題なく反映されました。

修正後のソース

<svg width="700" height="140">
  <defs>
    <filter id="blur_test">  
      <feGaussianBlur in="SourceGlaphic" stdDeviation="1"></feGaussianBlur>
　　 </filter>
  </defs>

<text x="0" y="50" font-size="50" filter="url('#blur_test')" fill="red" style="fill:red;">TEST</text>

</svg>

投稿2019/11/12 15:28

編集2019/11/12 23:48

kzmu

総合スコア17