stroke-miterlimit

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

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

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

Это свойство применяется к любому элементу SVG, формирующему углы, или элементу текстового содержимого (см. stroke-miterlimit для полного списка), но как наследование, оно может быть применено к элементам, таким как <g>, и всё ещё окажет намеченное действие на штрихи дочерних элементов. Если оно присутствует, то переопределяет атрибут элемента stroke-miterlimit.

Описание

Когда два отрезка линии встречаются под острым углом и выбраны соединения 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 градусов.

Синтаксис

/* number values */
stroke-miterlimit: 1;
stroke-miterlimit: 3.1416;

/* Global values */
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>`, и `<rect>` элементы в `svg`
Наследуется	да
Вычисленное значение	как указано
Тип анимации	по типу вычисленного значения

Формальный синтаксис

stroke-miterlimit = 
  <number>

Примеры

Различные пределы среза

Этот пример демонстрирует эффект различных значений свойства stroke-miterlimit.

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 к путям, так что для первого пути только первый (самый левый) подпуть срезан, для второго пути первые два подпути срезаны, и так далее, пока для пятого пути все пять подпутей срезаны.

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 Level 3 # stroke-miterlimit

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for 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/CSS/stroke-miterlimit