stroke-miterlimit

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年3月.

stroke-miterlimit 属性はプレゼンテーション属性で、制限長をマイター長とマイター接続に使用するstroke-width の比率で定義します。制限長を超えると、接続はマイターからベベルへと変更されます。

メモ:プレゼンテーション属性であるため、stroke-miterlimit には対応する CSS プロパティstroke-miterlimit があります。両方が指定された場合、 CSS プロパティが優先されます。

この属性は、以下の SVG 要素で使用することができます。

例

html,body,svg {  height: 100%;}

html

<svg viewBox="0 0 38 30" xmlns="http://www.w3.org/2000/svg">  <!-- 既定のマイター制限の影響 -->  <path    stroke="black"    fill="none"    stroke-linejoin="miter"       d="M1,9 l7   ,-3 l7   ,3       m2,0 l3.5 ,-3 l3.5 ,3       m2,0 l2   ,-3 l2   ,3       m2,0 l0.75,-3 l0.75,3       m2,0 l0.5 ,-3 l0.5 ,3" />  <!-- 最小のマイター制限の影響 (1) -->  <path    stroke="black"    fill="none"    stroke-linejoin="miter"    stroke-miterlimit="1"       d="M1,19 l7   ,-3 l7   ,3       m2, 0 l3.5 ,-3 l3.5 ,3       m2, 0 l2   ,-3 l2   ,3       m2, 0 l0.75,-3 l0.75,3       m2, 0 l0.5 ,-3 l0.5 ,3" />  <!-- 大きなマイター制限の影響 (8) -->  <path    stroke="black"    fill="none"    stroke-linejoin="miter"    stroke-miterlimit="8"       d="M1,29 l7   ,-3 l7   ,3       m2, 0 l3.5 ,-3 l3.5 ,3       m2, 0 l2   ,-3 l2   ,3       m2, 0 l0.75,-3 l0.75,3       m2, 0 l0.5 ,-3 l0.5 ,3" />  <!-- 次のピンク色の行は、各ストロークのパスの位置をハイライトします。 -->  <path    stroke="pink"    fill="none"    stroke-width="0.05"    d="M1, 9 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3      M1,19 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3      M1,29 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" /></svg>

stroke-linejoin でmiter 結合が指定されている場合、マイターはパスを描く線の太さを大きく超える可能性があります。stroke-miterlimit の比率は、いつ限界を超えるかを定義するために使用され、超えた場合、結合はマイターからベベルに変換されます。

マイター長（マイターの外側の先端から内側の角までの距離）とstroke-width の比は、ユーザー空間における直線間の角度 (theta) から直接数式で求められます。

stroke-miterlimit = \frac{miterLength}{stroke-width} = \frac{1}{\sin (\frac{θ}{2})} \text{stroke-miterlimit} = \frac{\text{miterLength}}{\text{stroke-width}} = \frac{1}{\sin\left(\frac{\theta}{2}\right)}

例えば、マイター制限を 1.414 とすると、マイターが 90 度未満の場合にベベルに変換され、 4.0 とすると約 29 度未満、 10.0 とすると約 11.5 度未満の場合にベベルに変換されることになります。

使用コンテキスト

値	<number>
既定値	4
アニメーション	可

stroke-miterlimit の値は 1 以上でなければなりません。

仕様書

Specification
Scalable Vector Graphics (SVG) 2 # StrokeMiterlimitProperty

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on2025年4月11日 byMDN contributors.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換

stroke-miterlimit

例

使用コンテキスト

仕様書

ブラウザーの互換性

関連情報

Help improve MDN