fill-opacity

fill-opacity属性は、図形に適用されるペイントサーバー(, 勾配, パターン, 等)の不透明度を定義するプレゼンテーション属性です。

注:プレゼンテーション属性としてのfill-opacityCSSプロパティに適用できます。

プレゼンテーション属性として、任意の要素に適用可能ですが、次の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]の範囲の値として指定することです。

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
fill-opacityChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

実装状況不明  
実装状況不明

仕様

仕様書 策定状況 コメント
Scalable Vector Graphics (SVG) 2
fill-opacity の定義
勧告候補 図形とテキスト向けの定義
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
fill-opacity の定義
勧告 図形とテキスト向けの初期定義