【CSS Modules】stroke-miterlimitプロパティの使い方

stroke-miterlimitプロパティは、SVG要素の線分の結合部分（角）が尖る度合いを制御するプロパティです。このプロパティは、stroke-linejoinプロパティがmiter（マイター）に設定されている場合にのみ効果を発揮します。miter結合とは、2つの線分が鋭角に結合する際に、外側の角が突き出して尖る描画スタイルを指します。

stroke-miterlimitプロパティに設定する値は、数値で指定します。この数値は「マイター比率」と呼ばれ、線分の結合部分の尖り具合を決定する閾値として機能します。具体的には、線幅の半分に対する、角の頂点から内側の結合点までの長さの比率を表します。値が小さいほど、少しの角度でもすぐに角が面取りされ、値が大きいほど、より鋭い角度でなければ尖った角が維持されます。

もし結合部分のマイター比率がこのstroke-miterlimitで指定された値を超えた場合、SVGレンダリングエンジンは自動的に結合スタイルをbevel（ベベル、面取り）に切り替えます。これにより、線分の結合部分が過度に長く突き出し、不自然に見えるのを防ぎ、見た目を整えることができます。このプロパティのデフォルト値は4です。適切な値を設定することで、SVG図形の線描画の視覚的な品質を細かく調整することが可能です。

Copy
1selector {
2  stroke-miterlimit: <number>;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません