【CSS Modules】stroke-opacityプロパティの使い方
stroke-opacityプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
stroke-opacityプロパティは、SVG要素のストローク（線）の不透明度を保持するプロパティです。このプロパティは、SVGグラフィックスにおける図形の枠線、すなわちストロークの透過度を制御するために使用されます。ストロークの色自体はstrokeプロパティで設定しますが、stroke-opacityプロパティはその設定されたストローク色に対して、どの程度の透過度を適用するかを詳細に調整することができます。
指定できる値は0.0から1.0までの数値で、0.0は完全に透明な状態、1.0は完全に不透明な状態を表します。例えば、0.5と設定すると、ストロークは半透明に描画されます。このプロパティの初期値は1.0であり、特に指定がない限りストロークは不透明な状態で表示されます。
stroke-opacityプロパティが影響を与えるのは、SVG要素のストローク部分のみです。要素全体の不透明度を制御するopacityプロパティとは異なり、このプロパティは塗りつぶしの色（fillプロパティで設定）や、要素内の他の部分には影響を与えません。これにより、ストロークの色と透明度を独立して設定し、図形全体の視覚効果を柔軟に調整することが可能になります。主に<rect>、<circle>、<path>、<line>といったSVG要素に適用され、ウェブアプリケーションにおけるユーザーインターフェースやデータ可視化など、SVGグラフィックスを用いた表現の幅を広げる際に重要な役割を果たします。
構文(syntax)
1selector { 2 stroke-opacity: 0.5; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
number
stroke-opacityプロパティは、要素のストローク（線）の不透明度を指定します。この値は0（完全に透明）から1（完全に不透明）までの数値で表現されます。