stroke-miterlimit

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с ⁨марта 2020⁩.

Атрибут stroke-miterlimit — это атрибут представления, задающий ограничение на отношение длины острия к stroke-width, используемому для рисования острого соединения. Если это ограничение превышено, острое соединение заменяется скошенным.

Примечание: У атрибута представления stroke-miterlimit также есть аналог в виде свойства CSS: stroke-miterlimit. Если указаны оба значения, приоритет имеет свойство CSS.

Этот атрибут можно использовать со следующими элементами SVG:

Пример

<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) между отрезками в пользовательской системе координат следующей формулой:

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

Например, ограничение острого соединения 1.414 заменяет острые соединения скошенными при значениях theta менее 90 градусов, ограничение 4.0 — при значениях менее приблизительно 29 градусов, а ограничение 10.0 — при значениях менее приблизительно 11.5 градусов.

Контекст использования

Значение	<number>
Значение по умолчанию	4
Анимируемый	Да

Значение stroke-miterlimit должно быть больше или равно 1.

Спецификации

Спецификация
Масштабируемая векторная графика (SVG) 2> # StrokeMiterlimitProperty>

Совместимость с браузерами

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari на iOS	Samsung Internet	WebView для Android	WebView на iOS
`stroke-miterlimit`	≤80	≤80	1	≤67	≤13.1	≤80	4	≤57	≤13.4	≤13.0	≤80	≤13.4

См. также

Свойство CSS stroke-miterlimit

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-miterlimit