Свойство CSS `stroke-linejoin`

Свойство stroke-linejoin CSS задаёт форму углов обводки контуров элемента SVG. Если это свойство задано, оно переопределяет атрибут элемента stroke-linejoin.

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

Синтаксис

/* keyword values */
stroke-linejoin: bevel;
stroke-linejoin: miter;
stroke-linejoin: round;

/* Global values */
stroke-linejoin: inherit;
stroke-linejoin: initial;
stroke-linejoin: revert;
stroke-linejoin: revert-layer;
stroke-linejoin: unset;

Значения

bevel

Указывает, что для соединения сегментов контура следует использовать скошенный угол. Скос образуется усечением угла линией, перпендикулярной линии, которая делит пополам разницу между углами подпутей в точке их соединения.

miter

Указывает, что для соединения сегментов контура следует использовать острый угол. Угол образуется продолжением внешних краёв обводки по касательным к сегментам контура до их пересечения. Это значение по умолчанию.

round

Указывает, что для соединения сегментов контура следует использовать скруглённый угол. Для этого соединение обрезается согласно значению bevel, а затем добавляется заполненная дуга, касательная к нему, чтобы скруглить угол.

Определены следующие значения, которые, однако, не поддерживаются ни в одном браузере:

arcs

(Не поддерживается.) Указывает, что для соединения сегментов контура следует использовать дугообразный угол. Форма дуги создаётся продолжением внешних краёв обводки в точке соединения с помощью дуг, кривизна которых совпадает с кривизной внешних краёв в этой точке.

crop

(Не поддерживается.) Указывает, что угол должен выходить за точку соединения на минимально необходимое расстояние, чтобы образовать выпуклый угол. Функционально это эквивалентно значению miter (см. выше) при значении stroke-miterlimit 1.

fallback

(Не поддерживается; может быть исключено.) действует так же, как crop bevel, если превышено значение stroke-miterlimit.

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

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

stroke-linejoin = 
  miter |
  miter-clip |
  round |
  bevel |
  arcs

Примеры

Стили соединения линий

В этом примере показаны три поддерживаемых в настоящее время ключевых значения свойства stroke-linejoin.

HTML

Мы создаём четыре одинаковых контура с чёрной обводкой шириной в единицу и без заливки.

<svg viewBox="0 0 15 12" xmlns="http://www.w3.org/2000/svg">
  <g stroke="black" stroke-width="1" fill="none">
    <path d="M2,5  a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
    <path d="M8,5  a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
    <path d="M2,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
    <path d="M8,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" />
  </g>
</svg>

CSS

Для каждого из четырёх контуров задаётся поддерживаемое значение способа соединения линий. У первого соединение скошенное, у второго — скруглённое, у третьего — острое, а у четвёртого оно также острое, но со значением stroke-miterlimit 2, из-за которого угол становится скошенным, а не острым.

path:nth-child(1) {
  stroke-linejoin: bevel;
}
path:nth-child(2) {
  stroke-linejoin: round;
}
path:nth-child(3) {
  stroke-linejoin: miter;
}
path:nth-child(4) {
  stroke-linejoin: miter;
  stroke-miterlimit: 2;
}

Результаты

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

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

См. также

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