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