fill-opacity属性は、図形に適用されるペイントサーバー(色, 勾配, パターン, 等)の不透明度を定義するプレゼンテーション属性です。
注:プレゼンテーション属性としてのfill-opacityCSSプロパティに適用できます。
プレゼンテーション属性として、任意の要素に適用可能ですが、次の11個の要素のみで効果があります: <altGlyph>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref>, and <tspan>
html,body,svg { height:100% }
<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
<!-- 既定のfill不透明度: 1 -->
<circle cx="50" cy="50" r="40" />
<!-- 数値で指定するfill不透明度 -->
<circle cx="150" cy="50" r="40"
fill-opacity="0.7" />
<!-- 割合で指定するfill不透明度 -->
<circle cx="250" cy="50" r="40"
fill-opacity="50%" />
<!-- CSSプロパティで指定するfill不透明度 -->
<circle cx="350" cy="50" r="40"
style="fill-opacity: .25;" />
</svg>
使用上の注意
| 値 | [0-1] | <percentage> |
|---|---|
| 規定値 | 1 |
| アニメーション可否 | はい |
注: SVG2では、fill-opacityへの割合値を導入していますが、状況としてはこれはまだ広く対応されているわけではありません(以下のブラウザ実装状況を参照)。最良の実装としては、不透明度を[0-1]の範囲の値として指定することです。
ブラウザー実装状況
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
fill-opacity | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
凡例
- 実装状況不明
- 実装状況不明
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| Scalable Vector Graphics (SVG) 2 fill-opacity の定義 |
勧告候補 | 図形とテキスト向けの定義 |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) fill-opacity の定義 |
勧告 | 図形とテキスト向けの初期定義 |