Opacity (SVG)
`fill-opacity` CSS プロパティは、要素を塗りつぶすために SVG 図形またはテキストコンテンツ要素に適用される描画操作 (色、グラデーション、パターンなど) の不透明度を定義します。このプロパティは、要素の塗りつぶしの不透明度のみを定義します。ストロークには影響しません。存在する場合、要素の `fill-opacity` 属性を上書きします。
注: `fill-opacity` プロパティは、`<svg>` 内にネストされた `<circle>`、`<ellipse>`、`<path>`、`<polygon>`、`<polyline>`、`<rect>`、`<text>`、`<textPath>`、および `<tspan>` 要素にのみ適用されます。他の SVG、HTML、または擬似要素には適用されません。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| 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プロパティを使用してください。
アクセシビリティ
- 透明度を下げた要素が十分に視認可能であることを確認し、重要な情報が見えにくくならないようにしてください。