stroke-linejoin

Baseline Широко доступно

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

Свойство stroke-linejoin CSS определяет форму, используемую в углах очерченных путей элемента SVG. При наличии, оно переопределяет атрибут элемента stroke-linejoin.

Это свойство применяется к любому элементу, генерирующему углы или текстовое содержимое (см. 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 превышено.

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

Начальное значение	`miter`
Применяется к	`<circle>`, `<ellipse>`, `<line>`, `<path>`, `<polygon>`, `<polyline>` и `<rect>` элементам в `svg`
Наследование	да
Вычисленное значение	как указано
Тип анимации	дискретный

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

stroke-linejoin = 
  [ crop | arcs | miter ]       ||
  [ bevel | round | fallback ]

Примеры

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

Этот пример демонстрирует три поддерживаемых в настоящее время ключевых значения для 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;
}

Результаты

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

Спецификация
Модуль заполнения и обводки CSS уровня 3 # stroke-linejoin

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`stroke-linejoin`	≤80	80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80
`bevel`	≤80	80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80
`miter`	≤80	80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80
`round`	≤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-linejoin