概要

stroke-linejoinは、SVG（Scalable Vector Graphics）の線が交わる角の形状を設定するためのCSSプロパティです。線が交差する部分の見た目を変更することで、デザインにアクセントを加えたり、より滑らかな仕上がりを実現できます。この記事では、stroke-linejoinの基本的な使い方と、それぞれの設定による線の角の変化について解説します。

stroke-linejoinの基本構文

stroke-linejoinの構文は以下の通りです。

stroke-linejoin: 値;

• 値: 線の角の形状を決定するための指定。以下の3つの値があります。
  • miter: デフォルトの設定で、鋭い角がそのまま伸びて交わります。
  • round: 角を丸くカーブさせます。
  • bevel: 角を斜めにカットし、平坦にします。

使用例

miter（デフォルト）

miterは、線の角を鋭く交差させる設定です。線の交わりが鋭角になると、尖った見た目になります。

<svg width="200" height="100">
  <polyline points="10,90 100,10 190,90" stroke="black" stroke-width="10" fill="none" stroke-linejoin="miter" />
</svg>

• この設定では、線の角が鋭く伸びて交わるため、シャープで力強い印象を与えます。特に直角や鋭角のデザインに適しています。

round（丸い角）

roundは、線の角を丸くする設定です。これにより、角が柔らかく、滑らかな印象を与えます。

<svg width="200" height="100">
  <polyline points="10,90 100,10 190,90" stroke="black" stroke-width="10" fill="none" stroke-linejoin="round" />
</svg>

• 線の角が丸くなることで、柔らかく親しみやすいデザインに仕上がります。カジュアルなデザインや、子供向けのコンテンツに適しています。

bevel（斜めにカットされた角）

bevelは、線の角を斜めにカットする設定です。角が平坦になり、直線的かつシンプルな見た目になります。

<svg width="200" height="100">
  <polyline points="10,90 100,10 190,90" stroke="black" stroke-width="10" fill="none" stroke-linejoin="bevel" />
</svg>

• 角が斜めにカットされることで、シンプルで洗練された印象を与えます。モダンでミニマルなデザインにぴったりです。

stroke-linejoinの用途

stroke-linejoinは以下のような場面で役立ちます。

• アイコンやロゴのデザイン調整
  アイコンやロゴの線の角を調整することで、デザインの一貫性を高めたり、意図した視覚効果を強調できます。
• 図形やイラストの表現力向上
  図形の角の形状を調整することで、シンプルな図形をより印象的に見せることができます。
• グラフやチャートのスタイル調整
  折れ線グラフの交点を滑らかにすることで、データの見やすさを向上させたり、視覚的に洗練された印象を持たせることができます。

stroke-linejoinの注意点

• miterの場合、角度が非常に鋭くなると線が過剰に伸びることがあります。このような場合は、stroke-miterlimitプロパティで角の長さを制限することが可能です。
• stroke-linejoinはSVGの線の角に適用されるプロパティで、通常のHTMLのボーダーや線には適用できません。

まとめ

stroke-linejoinは、SVGの線の角の形状をカスタマイズできるプロパティで、デザインに合わせて角の見た目を調整することで、作品全体の印象を大きく変えることができます。miter、round、bevelの3つのオプションを活用し、あなたのデザインをより魅力的に仕上げてみましょう。