Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。
SVG Widely available

Opacity (SVG)

SVGグラフィックの塗り（fill）とストローク（stroke）に対して個別に透明度を設定できるプロパティです。要素全体のopacityとは異なり、塗りとストロークを独立して透過させることができます。チャートやアイコンの視覚効果に活用され、半透明のグラフ要素やゴースト効果の実現に使用されます。

SVG透明度塗りとストローク

概要

SVGグラフィックの塗り（fill）とストローク（stroke）に対して個別に透明度を設定できるプロパティです。要素全体のopacityとは異なり、塗りとストロークを独立して透過させることができます。チャートやアイコンの視覚効果に活用され、半透明のグラフ要素やゴースト効果の実現に使用されます。

対応ブラウザ

デスクトップ

Chrome 80+
Edge 80+
Safari 13.1+
Firefox 1.5+

モバイル

Chrome Android 80+
Safari iOS 13.4+
Firefox Android 4+

基本構文

CSS 
circle {
  fill: blue;
  fill-opacity: 0.5;
}
path {
  stroke: red;
  stroke-opacity: 0.8;
}

実務での使いどころ

  • チャートのデータ重ね合わせ表示

    複数のSVGデータ系列を半透明に重ねて表示し、データの重なり具合を視覚的に表現します。

注意点

  • fill-opacityとstroke-opacityは0〜1の値を取ります。要素全体の透明度にはopacityプロパティを使用してください。

アクセシビリティ

  • 透明度を下げた要素が十分に視認可能であることを確認し、重要な情報が見えにくくならないようにしてください。

参考リンク