fill-opacity
fill-opacity
属性は、図形に適用されるペイントサーバー(色, 勾配, パターン, 等)の不透明度を定義するプレゼンテーション属性です。
メモ: プレゼンテーション属性としてのfill-opacity
CSS プロパティに適用できます。
この属性は次の SVG 要素で使用できます。
例
html
<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 |
アニメーション | Yes |
メモ: SVG2 では、fill-opacity
への割合値を導入していますが、状況としてはこれはまだ広く対応されているわけではありません(以下のブラウザー実装状況を参照)。最良の実装としては、不透明度を[0-1]
の範囲の値として指定することです。
仕様
Specification |
---|
Scalable Vector Graphics (SVG) 2 # FillOpacity |
ブラウザー実装状況
BCD tables only load in the browser