Концы обводки (Line Cap)link

https://dev.ru.simai.io/ru/ui/utility/svg/stroke-linecap.php

С помощью модификаторов концов обводки можно задать форму завершения линий в SVG-графике. Различные варианты позволяют получить разное визуальное впечатление от окончаний линий.

Таблица классовlink

Класс Значение
.linecap-butt stroke-linecap: butt;
.linecap-round stroke-linecap: round;
.linecap-square stroke-linecap: square;

Описаниеlink

Модификаторы концов обводки определяют, как будет выглядеть конец каждой линии:

  • linecap-butt: Линия обрывается ровно в конце, без дополнительного оформления.
    Подходит для точных и строгих визуальных стилей.

  • linecap-round: Конец линии закруглён. Длина закругления равна половине толщины
    обводки. Такой вариант придаёт линиям более мягкий и плавный вид.

  • linecap-square: Конец линии заканчивается квадратом, который выступает за точку
    окончания линии на половину её толщины. Это создаёт более геометрический,
    чёткий эффект.

Синтаксисlink

Использование: {модификатор}

  • linecap-{butt|round|square} — задаёт соответствующий тип оконцовки линий.

Пример использованияlink

<svg class="linecap-butt" width="100" height="50">
    <line x1="10" y1="25" x2="90" y2="25" stroke="black" stroke-width="8"/>
</svg>

<svg class="linecap-round" width="100" height="50">
    <line x1="10" y1="25" x2="90" y2="25" stroke="black" stroke-width="8"/>
</svg>

В первом примере конец линии обрывается сразу по окончанию (butt),
а во втором — закругляется (round), придавая более мягкий вид.