図形の線の頂点（連結部）の形状を変更
SVGで図形の線の頂点（連結部）の形状を変更するには、stroke-linejoin属性を使用します。
構文
stroke-linejoin="形状"属性値
属性の値は次の指定が可能です。
| 値 | 説明 | 形状例 |
|---|---|---|
| miter初期値 | 鋭角の形状。 |  |
| round | 丸い（R面取り）形状。 |  |
| bevel | C面取りの形状。 |  |
属性の値の初期値はmiterで、属性を省略するとこの値が設定されます。
サンプルコードとデモ
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 90" width="200" height="90">
<path d="M 0,70 l 40,0 l 20,-40 l 40,80 l 40,-80 l 20,40 l 40,0" fill="none" stroke="black" stroke-width="14" stroke-linejoin="miter" />
</svg>XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 90" width="200" height="90">
<path d="M 0,70 l 40,0 l 20,-40 l 40,80 l 40,-80 l 20,40 l 40,0" fill="none" stroke="black" stroke-width="14" stroke-linejoin="round" />
</svg>XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 90" width="200" height="90">
<path d="M 0,70 l 40,0 l 20,-40 l 40,80 l 40,-80 l 20,40 l 40,0" fill="none" stroke="black" stroke-width="14" stroke-linejoin="bevel" />
</svg>