iOSやMacのSafariで、 SVGにCSS filterが適用されない？

現在制作中のサイトでは、SVGを多用しているのですが、ある時Safariでサイトを確認するとCSSのfilterが効いていないことに気が付きました。

本来は、照明の下の図をぼかすことで、照明がついているような図になるのですが、

Safariではボケずに表示されてしまっているのです。

CSSは以下の通り。

#blur path {
filter: blur(5px);
fill-opacity: 0.3;
}

fill-opacityは効いているのに、filterが効いていない状態。SVG全体ならfilterも効くのですが、SVG内の一部のオブジェクトには効かないのです。

Safariのみで起こるバグと言っている人もいるので、バグならそのうち解消されるのかもしれない。しかし、ざっと検索すると数年前からfilter周りで不具合は続いているような感じもある。

基本的に放置しかないかなと、諦めていたのですが、やはり気になってしまい色々模索。SVG内にfilterを記述して対応する方法がありました。

詳しくは下記のサイトを参照してください。

SVG内に以下を書いて、

<filter id="blurMe">
<feGaussianBlur stdDeviation="5" />
</filter>

適用したいオブジェクト内に「filter="url(#blurMe)"」を追加します。これで、Safariでもボケたオブジェクトを表示することができました。

イラレで予めぼかすと、ボケアシJPEGを生成しそれをSVGに読み込み擬似的にぼかすとか、それはそれで技術的に面白いとは思ったが、今回はSVGに直接記述する方法でなんとか理想的なものができた。

やっとこれで、次に進める。趣味でやっているので、躓くとなかなか次に進めることができなく、小さなところで何日も中断してしまいますね。