【SVG】SVGでfillの色を透過にする

hoge

「fill-opacity」で設定する。

<path fill="#ffff00" fill-opacity="0.5" ... ></path>
<rect fill="#ffff00" fill-opacity="0.5" ... />

【公式】Fills and Strokes

 

 

他にも、strokeっていうのがある。

 

fill：オブジェクトの内部への塗り
stroke：オブジェクトの外形線への塗り

 

それぞれ、fill-opacityとstroke-opacityを設定すると、透過にすることができる。

<path fill="#ffff00" fill="#ff0000" fill-opacity="0.5" stroke-opacity="0.5" ... ></path>