Углы обводки

Классы linejoin-* задают stroke-linejoin — форму углов на стыке отрезков обводки SVG. Берите linejoin-round для мягких линейных значков, linejoin-bevel — чтобы острые углы не выступали.

Пример

Формы

Одинаковый острый угол с толстой обводкой.

HTML

<div class="grid grid-col-2 sm:grid-col-5 gap-3">
  <div class="flex flex-col gap-1 items-center">
    <svg class="w-e4 h-e4 fill-transparent stroke-primary stroke-8 linejoin-miter" viewBox="0 0 56 56" aria-hidden="true"><path d="M12 46 28 12 44 46"/></svg>
    <code class="text-1/2 color-on-surface-variant">linejoin-miter</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <svg class="w-e4 h-e4 fill-transparent stroke-primary stroke-8 linejoin-round" viewBox="0 0 56 56" aria-hidden="true"><path d="M12 46 28 12 44 46"/></svg>
    <code class="text-1/2 color-on-surface-variant">linejoin-round</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <svg class="w-e4 h-e4 fill-transparent stroke-primary stroke-8 linejoin-bevel" viewBox="0 0 56 56" aria-hidden="true"><path d="M12 46 28 12 44 46"/></svg>
    <code class="text-1/2 color-on-surface-variant">linejoin-bevel</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <svg class="w-e4 h-e4 fill-transparent stroke-primary stroke-8 linejoin-miter-clip" viewBox="0 0 56 56" aria-hidden="true"><path d="M12 46 28 12 44 46"/></svg>
    <code class="text-1/2 color-on-surface-variant">linejoin-miter-clip</code>
  </div>
  <div class="flex flex-col gap-1 items-center">
    <svg class="w-e4 h-e4 fill-transparent stroke-primary stroke-8 linejoin-arcs" viewBox="0 0 56 56" aria-hidden="true"><path d="M12 46 28 12 44 46"/></svg>
    <code class="text-1/2 color-on-surface-variant">linejoin-arcs</code>
  </div>
</div>

Классы

Класс	CSS	Значения
`linejoin-miter`	`stroke-linejoin: miter`	—
`linejoin-arcs`	`stroke-linejoin: arcs`	—
`linejoin-bevel`	`stroke-linejoin: bevel`	—
`linejoin-miter-clip`	`stroke-linejoin: miter-clip`	—
`linejoin-round`	`stroke-linejoin: round`	—

Условия (что это): ширина экрана — нет; состояния — нет.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Применение

Какую форму выбрать

Класс	Угол
`linejoin-miter`	острый — значение по умолчанию
`linejoin-round`	скруглённый
`linejoin-bevel`	срезанный
`linejoin-miter-clip`	острый, при слишком длинном острие обрезается
`linejoin-arcs`	продолжает кривизну отрезков дугами

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> действует на все фигуры внутри.

Ограничения

linejoin-miter-clip и linejoin-arcs поддерживают не все браузеры; в Chromium они не действуют, и угол рисуется как с linejoin-miter.
У семейства нет префиксов ширины экрана и состояния.

Навигация

Главное

Документация

Содержание