【CSS Modules】stroke-widthプロパティの使い方
stroke-widthプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
stroke-widthプロパティは、SVG（Scalable Vector Graphics）要素の線（ストローク）の幅を設定するために使用されるプロパティです。このプロパティは、SVGの基本的な図形要素、例えばpath、line、rect、circle、ellipse、polygon、polylineなどに適用され、それらの輪郭線の太さを制御します。
設定できる値は、数値に長さの単位（px、em、ptなど）を付けたものです。例えば、stroke-width: 5px; と指定すると、線の幅は5ピクセルになります。単位を省略して単に数値を指定した場合（例: stroke-width: 2;）は、SVGのユーザー座標系における単位なしの数値として解釈されます。負の値を指定することはできず、無視されます。
このプロパティの初期値は 1 です。これは、特に指定がない場合に線幅が1単位となることを意味します。stroke-widthの値を大きくするほど線は太くなり、小さくするほど線は細くなります。これにより、SVGグラフィックの視覚的な表現やデザインの調整を細かく行うことができます。
stroke-widthは、strokeプロパティが提供する様々な線関連の機能（色、透明度、線の種類など）の中でも、特に線の太さに焦点を当てた重要なプロパティの一つです。正確な線幅の指定によって、SVGを用いた図形描画において、意図したデザインを確実に表現することが可能になります。
公式リファレンス: stroke-width
構文(syntax)
1.selector { 2 stroke-width: 1px; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません