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 ⁨2020年3月⁩.

fill-opacity 属性は、図形に適用されるペイントサーバー（色、グラデーション、パターン、等）の不透明度を定義するプレゼンテーション属性です。

メモ: プレゼンテーション属性であるため、 fill-opacity には対応する CSS プロパティ fill-opacity があります。両方が指定された場合、 CSS プロパティが優先されます。

この属性は次の SVG 要素で使用できます。

例

html,
body,
svg {
  height: 100%;
}

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>