図形の線の頂点(連結部)の尖り状態を変更

SVGで図形の線の頂点(連結部)の尖り状態を変更するには、stroke-miterlimit属性を使用します。
角度によって尖り具合が変わり、角度が小さいほど鋭くなります。

構文

stroke-miterlimit="値"

初期値は4です。

サンプルコードとデモ

XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200" height="100">
	<path d="M 10,0 l 0,20 l 100,30 l -100,30 l 0,20" fill="none" stroke="black" stroke-width="10" stroke-miterlimit="0" />
</svg>

XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200" height="100">
	<path d="M 10,0 l 0,20 l 100,30 l -100,30 l 0,20" fill="none" stroke="black" stroke-width="10" stroke-miterlimit="4" />
</svg>

XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200" height="100">
	<path d="M 10,0 l 0,30 l 100,20 l -100,20 l 0,30" fill="none" stroke="black" stroke-width="10" stroke-miterlimit="6" />
</svg>

XML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200" height="100">
	<path d="M 10,0 l 0,40 l 100,10 l -100,10 l 0,40" fill="none" stroke="black" stroke-width="10" stroke-miterlimit="11" />
</svg>

SVG逆引きリファレンス一覧へ戻る