Концы обводки
Классы linecap-* задают stroke-linecap — форму концов незамкнутых линий
SVG. Берите linecap-round для мягких линейных значков.
Пример
Формы
Красные линии отмечают, где заканчивается путь.
HTML <div class="grid grid-col-1 sm:grid-col-3 gap-3">
<div class="flex flex-col gap-1 items-center">
<svg class="w-e4 h-d0" viewBox="0 0 56 20" aria-hidden="true">
<path class="fill-transparent stroke-primary stroke-6 linecap-butt" d="M12 10h32"/>
<path class="fill-transparent stroke-error stroke-1" d="M12 2v16M44 2v16"/>
</svg>
<code class="text-1/2 color-on-surface-variant">linecap-butt</code>
</div>
<div class="flex flex-col gap-1 items-center">
<svg class="w-e4 h-d0" viewBox="0 0 56 20" aria-hidden="true">
<path class="fill-transparent stroke-primary stroke-6 linecap-round" d="M12 10h32"/>
<path class="fill-transparent stroke-error stroke-1" d="M12 2v16M44 2v16"/>
</svg>
<code class="text-1/2 color-on-surface-variant">linecap-round</code>
</div>
<div class="flex flex-col gap-1 items-center">
<svg class="w-e4 h-d0" viewBox="0 0 56 20" aria-hidden="true">
<path class="fill-transparent stroke-primary stroke-6 linecap-square" d="M12 10h32"/>
<path class="fill-transparent stroke-error stroke-1" d="M12 2v16M44 2v16"/>
</svg>
<code class="text-1/2 color-on-surface-variant">linecap-square</code>
</div>
</div>
Классы
| Класс |
CSS |
Значения |
linecap-butt |
stroke-linecap: butt |
— |
linecap-round |
stroke-linecap: round |
— |
linecap-square |
stroke-linecap: square |
— |
Условия (что это): ширина экрана — нет; состояния — нет.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Какую форму выбрать
| Класс |
Конец линии |
linecap-butt |
срезан точно по концу пути — значение по умолчанию |
linecap-round |
скруглён и выступает на половину толщины |
linecap-square |
квадратный и выступает на половину толщины |
HTML <svg class="svg-3 fill-transparent stroke-current stroke-2 linecap-round linejoin-round" viewBox="0 0 24 24" aria-hidden="true">…</svg>
Свойство наследуется: класс на <svg> действует на все линии внутри.
Ограничения
- Форма концов видна только у незамкнутых линий; у замкнутого контура
концов нет.
- У семейства нет префиксов ширины экрана и состояния.
См. также
