stroke-linecap

Базовая поддержка Широко поддерживается

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

Атрибут stroke-linecap — это атрибут представления, определяющий форму окончания открытых подпутей при обводке.

Примечание: У атрибута представления stroke-linecap также есть соответствующее CSS-свойство: stroke-linecap. Если указаны оба значения, приоритет имеет CSS-свойство.

Этот атрибут можно использовать со следующими SVG-элементами:

Пример

<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the (default) "butt" value -->
  <line x1="1" y1="1" x2="5" y2="1" stroke="black" stroke-linecap="butt" />

  <!-- Effect of the "round" value -->
  <line x1="1" y1="3" x2="5" y2="3" stroke="black" stroke-linecap="round" />

  <!-- Effect of the "square" value -->
  <line x1="1" y1="5" x2="5" y2="5" stroke="black" stroke-linecap="square" />

  <!--
  the following pink lines highlight the
  position of the path for each stroke
  -->
  <path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" />
</svg>

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

Значение	`butt` \| `round` \| `square`
Значение по умолчанию	`butt`
Анимируемое	дискретно

butt

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

Пример

<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "butt" value -->
  <path d="M1,1 h4" stroke="black" stroke-linecap="butt" />

  <!-- Effect of the "butt" value on a zero length path -->
  <path d="M3,3 h0" stroke="black" stroke-linecap="butt" />

  <!--
  the following pink lines highlight the
  position of the path for each stroke
  -->
  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
  <circle cx="1" cy="1" r="0.05" fill="pink" />
  <circle cx="5" cy="1" r="0.05" fill="pink" />
  <circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>

round

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

Пример

<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "round" value -->
  <path d="M1,1 h4" stroke="black" stroke-linecap="round" />

  <!-- Effect of the "round" value on a zero length path -->
  <path d="M3,3 h0" stroke="black" stroke-linecap="round" />

  <!--
  the following pink lines highlight the
  position of the path for each stroke
  -->
  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
  <circle cx="1" cy="1" r="0.05" fill="pink" />
  <circle cx="5" cy="1" r="0.05" fill="pink" />
  <circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>

square

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

Пример

<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "square" value -->
  <path d="M1,1 h4" stroke="black" stroke-linecap="square" />

  <!-- Effect of the "square" value on a zero length path -->
  <path d="M3,3 h0" stroke="black" stroke-linecap="square" />

  <!--
  the following pink lines highlight the
  position of the path for each stroke
  -->
  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
  <circle cx="1" cy="1" r="0.05" fill="pink" />
  <circle cx="5" cy="1" r="0.05" fill="pink" />
  <circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>

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

Спецификация
Масштабируемая векторная графика (SVG) 2> # Окончания линий>

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

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari в iOS	Samsung Internet	WebView для Android	WebView в iOS
`stroke-linecap`	≤80	≤80	1	≤67	≤13.1	≤80	4	≤57	≤13.4	≤13.0	≤80	≤13.4

См. также

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

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linecap