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 January 2020.

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

メモ: stroke-miterlimit はプレゼンテーション属性なので、 CSS プロパティとして使用することができます。

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

html
<svg viewBox="0 0 38 30" xmlns="http://www.w3.org/2000/svg">
  <!-- Impact of the default miter limit -->
  <path
    stroke="black"
    fill="none"
    stroke-linejoin="miter"
    id="p1"
    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" />

  <!-- Impact of the smallest miter limit (1) -->
  <path
    stroke="black"
    fill="none"
    stroke-linejoin="miter"
    stroke-miterlimit="1"
    id="p2"
    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" />

  <!-- Impact of a large miter limit (8) -->
  <path
    stroke="black"
    fill="none"
    stroke-linejoin="miter"
    stroke-miterlimit="8"
    id="p3"
    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" />

  <!-- the following pink lines highlight the position of the path for each stroke -->
  <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-linejoinmiter 結合が指定されている場合、マイターはパスを描く線の太さを大きく超える可能性があります。 stroke-miterlimit の比率は、いつ限界を超えるかを定義するために使用され、超えた場合、結合はマイターからベベルに変換されます。

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

stroke-miterlimit = miterLength stroke-width = 1 sin ( θ 2 )

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

使用コンテキスト

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

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

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# StrokeMiterlimitProperty

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
stroke-miterlimit

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support