Opacity (SVG)
fill-opacity CSS プロパティは、SVG の図形またはテキストコンテンツ要素を塗りつぶすために適用される描画操作 (色、グラデーション、パターンなど) の不透明度を定義します。このプロパティは、要素の塗りつぶしのみの不透明度を定義し、線には影響しません。存在する場合、要素の fill-opacity 属性を上書きします。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | ≤15 | 1 | 4 | 18 | 3.2 | |
| stroke-opacity は CSS のプロパティで、SVG 図形のストロークの（不）透明度を定義します。その効果は opacity と同一ですが、要素全体ではなくストロークのみに適用されます。指定されている場合、要素の stroke-opacity 属性を上書きします。 | 1 | ≤15 | 1.5 | 4 | 18 | 3.2 |
| その他 | ||||||
| fill-opacity 属性は、図形に適用されるペイントサーバー（色、グラデーション、パターン、等）の不透明度を定義するプレゼンテーション属性です。 | ≤80 | ≤80 | 1 | ≤13.1 | ≤80 | ≤13.4 |
| ストローク不透明度属性は、シェイプのストロークに適用されるペイント サーバーの不透明度 (色、グラデーション、パターンなど) を定義するプレゼンテーション属性です。 | ≤80 | ≤80 | 1 | ≤13.1 | ≤80 | ≤13.4 |
基本構文
CSS
circle {
fill: blue;
fill-opacity: 0.5;
}
path {
stroke: red;
stroke-opacity: 0.8;
}ライブデモ
実務での使いどころ
-
チャートのデータ重ね合わせ表示
複数のSVGデータ系列を半透明に重ねて表示し、データの重なり具合を視覚的に表現します。
注意点
- fill-opacityとstroke-opacityは0〜1の値を取ります。要素全体の透明度にはopacityプロパティを使用してください。
アクセシビリティ
- 透明度を下げた要素が十分に視認可能であることを確認し、重要な情報が見えにくくならないようにしてください。