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>

Когда два отрезка прямых сходятся под острым углом и указаны соединения miter для stroke-linejoin, срез может значительно превышать толщину линии, обводящей траекторию. Отношение stroke-miterlimit используется для определения момента превышения предела, в таком случае соединение преобразуется из среза в фаску.

Отношение длины среза (расстояние между внешним концом и внутренним углом среза) к stroke-width напрямую связано с углом (тета) между отрезками в пространстве пользователя по формуле:

\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 градусов.

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

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

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

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

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

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

	Рабочий стол					Мобильный телефон
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`stroke-miterlimit`	≤80	≤80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80

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