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

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

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

Описание

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

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

Например, предел острого соединения 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.

Формальное определение

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

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;
}

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

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

См. также

• stroke-dasharray
• stroke-dashoffset
• stroke-linecap
• stroke-linejoin
• stroke-opacity
• stroke-width
• stroke
• Атрибут SVG stroke-miterlimit