図形の塗り潰しの不透明度を変更
SVGで図形の塗り潰しの不透明度を変更するには、fill-opacity属性を使用します。
CSSのfill-opacityプロパティとしても使用することができます。
構文
XML属性
fill-opacity="不透明度"CSSプロパティ
fill-opacity:不透明度;値
値は0から1の間で指定します。
例えば50%の不透明度であればfill-opacity="0.5"と指定します。
サンプルコードとデモ
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 110" width="200" height="110">
<rect width="50" height="50" fill-opacity="1" />
<rect width="50" height="50" x="60" fill-opacity="0.75" />
<rect width="50" height="50" x="120" fill-opacity="0.5" />
<rect width="50" height="50" y="60" fill-opacity="0.25" />
<rect width="50" height="50" x="60" y="60" fill-opacity="0" />
</svg>