fill-opacity
fill-opacity
属性は、図形に適用されるペイントサーバー(色, 勾配, パターン, 等)の不透明度を定義するプレゼンテーション属性です。
注:プレゼンテーション属性としてのfill-opacity
CSSプロパティに適用できます。
プレゼンテーション属性として、任意の要素に適用可能ですが、次の11個の要素のみで効果があります: <altGlyph>
, <circle>
, <ellipse>
, <path>
, <polygon>
, <polyline>
, <rect>
, <text>
, <textPath>
, <tref>
, and <tspan>
<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]
の範囲の値として指定することです。
ブラウザー実装状況
BCD tables only load in the browser
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
Scalable Vector Graphics (SVG) 2 fill-opacity の定義 |
勧告候補 | 図形とテキスト向けの定義 |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) fill-opacity の定義 |
勧告 | 図形とテキスト向けの初期定義 |