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 July 2020.
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 |
ブラウザーの互換性
BCD tables only load in the browser