図形の線の不透明度を変更
SVGで図形の線の不透明度を変更するには、stroke-opacityを使用します。
CSSのstroke-opacityプロパティとしても使用することができます。
構文
XML属性
stroke-opacity="不透明度"CSSプロパティ
stroke-opacity:不透明度;値
値は0から1の間で指定します。
例えば50%の不透明度であればstroke-opacity="0.5"と指定します。
サンプルコードとデモ
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150" width="200" height="150">
<line x1="10" y1="10" x2="190" y2="10" fill="none" stroke="black" stroke-width="10" stroke-opacity="1" />
<line x1="10" y1="40" x2="190" y2="40" fill="none" stroke="black" stroke-width="10" stroke-opacity="0.75" />
<line x1="10" y1="70" x2="190" y2="70" fill="none" stroke="black" stroke-width="10" stroke-opacity="0.5" />
<line x1="10" y1="100" x2="190" y2="100" fill="none" stroke="black" stroke-width="10" stroke-opacity="0.25" />
<line x1="10" y1="130" x2="190" y2="130" fill="none" stroke="black" stroke-width="10" stroke-opacity="0" />
</svg>