stroke-linecap

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

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

Свойство 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: Указывает, что в конце каждого подпути обвод будет продолжен прямоугольником шириной, равной половине ширины обвода, и высотой, равной ширине обвода. В случае подпути нулевой длины обвод состоит из квадрата со стороной, равной ширине обвода, центрированного в точке подпути.

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

Начальное значение	`butt`
Применяется к	`<circle>`, `<ellipse>`, `<line>`, `<path>`, `<polygon>`, `<polyline>`, и `<rect>` элементам в `svg`
Наследуется	да
Вычисленное значение	как указано
Тип анимации	дискретный

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

stroke-linecap = 
  butt    |
  round   |
  square

Примеры

Концы линий

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

HTML

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

<svg viewBox="0 0 100 50" width="500" height="250">
  <rect x="10" y="5" width="80" height="30" fill="#DDD" />
  <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 единиц, два конца являются полукруговыми, а не квадратными.

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

Спецификация
CSS Fill and Stroke Module Level 3 # stroke-linecap

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

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`stroke-linecap`	≤80	80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80
`butt`	≤80	80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80
`round`	≤80	80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80
`square`	≤80	80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80

См. также

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