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 March 2020.

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

メモ: プレゼンテーション属性であるため、fill-opacity は CSS プロパティとして使用できます。

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

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>

使用方法のメモ

[0-1] | <percentage>
規定値 1
アニメーション

メモ: SVG2 では、fill-opacity へのパーセント値を導入していますが、現状としてはまだ広く対応されていません(以下のブラウザーの互換性を参照)。最良の実装としては、不透明度を [0-1] の範囲の値として指定することです。

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# FillOpacity

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
fill-opacity

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報