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

stroke-linejoinプロパティは、SVG要素やHTML Canvasなどのグラフィック描画において、線と線が交わる角の形状を保持するプロパティです。このプロパティを使用すると、パスや図形のアウトライン、つまり「線」が角でどのように描画されるかを詳細に制御できます。

主に三つの値が利用可能です。一つ目はmiter（マイター）で、これはデフォルト値としてよく使われます。miterは、線が角で鋭く交わるように描画し、線幅が広い場合でも角が尖ったままになる特徴があります。ただし、非常に鋭い角度の角では、線が異常に長く突き出すことがあります。この突き出しの長さを制限するために、stroke-miterlimitプロパティと組み合わせて使用されることもあります。

二つ目はround（ラウンド）です。roundを設定すると、角は滑らかな円弧状に丸められて描画されます。これにより、シャープな印象が和らぎ、柔らかな見た目の図形やアイコンを作成したい場合に適しています。

三つ目はbevel（ベベル）です。bevelは、角の頂点を直線で切り落としたような形状で描画します。これにより、角が鋭くも丸くもなく、平坦な面を持つような独特の見た目になります。

これらの値を選択することで、描画する線の見た目を柔軟に調整でき、デザインの要件に合わせて様々な視覚効果を生み出すことが可能です。例えば、地図上のルート表示やロゴデザインなど、線の表現が重要な場面でこのプロパティは重要な役割を果たします。図形の印象を大きく変えることができるため、見た目の調整において非常に有効な手段となります。

Copy
1selector {
2  stroke-linejoin: miter; /* round | bevel */
3}

引数なし

引数はありません

戻り値なし

戻り値はありません