stroke-miterlimit
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-linejoin
で miter
結合が指定されている場合、マイターはパスを描く線の太さを大きく超える可能性があります。 stroke-miterlimit
の比率は、いつ限界を超えるかを定義するために使用され、超えた場合、結合はマイターからベベルに変換されます。
マイター長(マイターの外側の先端から内側の角までの距離)と stroke-width
の比は、ユーザー空間における直線間の角度 (theta) から直接数式で求められます。
例えば、マイター制限を 1.414 とすると、マイターが 90 度未満の場合にベベルに変換され、 4.0 とすると約 29 度未満、 10.0 とすると約 11.5 度未満の場合にベベルに変換されることになります。
使用コンテキスト
値 | <number> |
---|---|
既定値 | 4 |
アニメーション | 可 |
stroke-miterlimit
の値は 1 以上でなければなりません。
仕様書
Specification |
---|
Scalable Vector Graphics (SVG) 2 # StrokeMiterlimitProperty |
ブラウザーの互換性
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.