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

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

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

Синтаксис

/* keyword values */
stroke-linecap: butt;
stroke-linecap: round;
stroke-linecap: square;

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

Значения

Свойство задаётся одним из следующих ключевых слов:

butt

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

round

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

square

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

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

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

stroke-linecap = 
  butt |
  round |
  square

Примеры

Окончания линий

В этом примере показаны три ключевых значения свойства.

HTML

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

<svg viewBox="0 0 100 50" width="500" height="250">
  <rect x="10" y="5" width="80" height="30" fill="#dddddd" />
  <g stroke="dodgerblue" stroke-width="7">
    <path d="M 10,10 h 80" />
    <path d="M 10,20 h 80" />
    <path d="M 10,30 h 80" />
  </g>
</svg>

CSS

Затем с помощью CSS зададим для каждого пути свой стиль окончания линии.

path:nth-of-type(1) {
  stroke-linecap: butt;
}
path:nth-of-type(2) {
  stroke-linecap: square;
}
path:nth-of-type(3) {
  stroke-linecap: round;
}

Результаты

У первого пути окончания линий butt, то есть линия заканчивается точно в конечных точках пути (в начале и в конце) и не выходит за них. У второго пути окончания линий square, поэтому видимая линия выходит за конечные точки пути, из-за чего её общая длина кажется равной 87: длина пути составляет 80, а ширина каждого из двух квадратных окончаний — 3,5. У третьего пути окончания circle. Поэтому он тоже кажется равным 87 единицам, но окончания имеют форму полукруга, а не квадрата.

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

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

См. также

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