fill-opacity
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.
Please take two minutes to fill out our short survey.
fill-opacity 属性は、図形に適用されるペイントサーバー(色, 勾配, パターン, 等)の不透明度を定義するプレゼンテーション属性です。
メモ:
プレゼンテーション属性であるため、fill-opacity は CSS プロパティとして使用できます。
この属性は次の SVG 要素で使用できます。
例
html
<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
<!-- 既定の fill opacity: 1 -->
<circle cx="50" cy="50" r="40" />
<!-- 数値で指定する fill opacity -->
<circle cx="150" cy="50" r="40" fill-opacity="0.7" />
<!-- 割合で指定する fill opacity -->
<circle cx="250" cy="50" r="40" fill-opacity="50%" />
<!-- CSS プロパティで指定する fill opacity -->
<circle cx="350" cy="50" r="40" style="fill-opacity: .25;" />
</svg>
使用方法のメモ
| 値 |
[0-1] |
<percentage>
|
|---|---|
| 規定値 | 1 |
| アニメーション | 可 |
メモ:
SVG2 では、fill-opacity へのパーセント値を導入していますが、現状としてはまだ広く対応されていません（以下のブラウザーの互換性を参照）。最良の実装としては、不透明度を [0-1] の範囲の値として指定することです。
仕様書
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # FillOpacity |