WebKit ではSVGグラデーションを `fill-opacity` を持った要素に適用すると色味がくすむ - Qiita

WebKit（Mac版のSafari含む）では fill-opacity を設定した要素にSVGグラデーションを適用すると色味がくすんでしまいます。 SVGグラデーションを透明化する場合には、 stop-opacity を用いるか、塗りと線のパスを分けた上で塗りのパスに opacity を設定する必要がありそうです。 なお、iOS版Safariでは問題ないもよう（なぜだ）。 現象確認用のデモ 以下の様なSVGで現象が発生します。 <svg viewBox="0 0 300 200"> <defs> <linearGradient id="g0"> <stop offset="0%" stop-color="red"></stop> <stop offset="50%" stop-color="green"></stop> <stop offset="100%" stop-color="bl