1. 開発者向けのウェブ技術
  2. CSS
  3. リファレンス
  4. プロパティ
  5. stroke-miterlimit

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

CSS stroke-miterlimit プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2017年4月以降、すべてのブラウザーで利用可能です。

stroke-miterlimit は CSS のプロパティで、SVG 要素のストロークパスの角に使用される形状がマイター接合である場合、マイター長と stroke-width の比率に対する制限を定義します。このプロパティで定義された制限値を超えると、接合方法が miter から bevel に変換され、角が切り取られるようになります。

このプロパティは、SVG の角を生成する図形やテキストコンテンツ要素（完全な一覧は stroke-miterlimit を参照）に適用されますが、継承プロパティであるため、<g> などの要素に適用された場合、子孫要素のストロークにも意図した効果が及びます。これが存在する場合、その要素の stroke-miterlimit 属性を上書きします。

解説

2 本の線分が鋭角で交差し、miter 接合が stroke-linejoin に対して指定されている場合、またはデフォルトでその値が適用されている場合、接合部がパスを描く線の太さを大幅に超えて突出することがあります。stroke-miterlimit の比率は、この突出量の上限を定義するために使用され、この上限を超えると接合部はマイターから面取りに変更されます。

マイター長（外側の先端とマイターの内側の角の間の距離）と stroke-width の比率は、ユーザー空間における線分同士の角度 (θ) と次の式で直接関連しています。

stroke-miterlimit=miterLengthstroke-width=1sin(θ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 度未満の場合に変更します。

構文

css
/* 数値 */
stroke-miterlimit: 1;
stroke-miterlimit: 3.1416;

/* グローバル値 */
stroke-miterlimit: inherit;
stroke-miterlimit: initial;
stroke-miterlimit: revert;
stroke-miterlimit: revert-layer;
stroke-miterlimit: unset;

値

<number>

1 以上である任意の実数。それより小さい値は無効です。初期値は 4 です。

公式定義

初期値4
適用対象<circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> elements in an svg
継承あり
計算値指定通り
アニメーションの種類計算値の型による

形式文法

stroke-miterlimit = 
  <number>
この構文は CSS Fill and Stroke Module Level 3 による最新の標準を反映しています。すべてのブラウザーがすべての部分を実装しているわけではありません。サポート情報についてはブラウザーの互換性を参照してください。

例

様々なマイター制限

この例は、stroke-miterlimit プロパティの様々な値の効果を示しています。

HTML

5 つの複数区間のパスを設定しました。いずれも太さ 1 の黒のストロークを使用し、塗りつぶしはありません。各パスは左側（浅い角の角度）から右側（極端な角の角度）へと、一連の山を象徴する記号を描画します。

html
<svg viewBox="0 0 39 36" xmlns="http://www.w3.org/2000/svg">
  <g stroke="black" stroke-width="1" fill="none">
    <path
      d="M1,5 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
      d="M1,12 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
      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" />
    <path
      d="M1,26 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
      d="M1,33 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" />
  </g>
</svg>

CSS

パスに対して stroke-miterlimit の値を次第に大きく適用します。これにより、最初のパスでは最初の（左端の）サブパスのみがマイター処理され、2 番目のパスでは最初の2つのサブパスがマイター処理され、以下同様に、5 番目のパスでは 5 つのサブパス全てがマイター処理されます。

css
path:nth-child(1) {
  stroke-miterlimit: 1.1;
}
path:nth-child(2) {
  stroke-miterlimit: 1.4;
}
path:nth-child(3) {
  stroke-miterlimit: 1.9;
}
path:nth-child(4) {
  stroke-miterlimit: 4.2;
}
path:nth-child(5) {
  stroke-miterlimit: 6.1;
}

仕様書

仕様書
CSS Fill and Stroke Module Level 3
# stroke-miterlimit

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告