W3docs
ru
Войти

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

Как использовать CSS-свойство stroke-linecap для задания формы концов SVG-обводки. Описание свойства и его значений.

Свойство stroke-linecap задаёт форму, используемую на открытых концах SVG-обводки. Оно влияет только на то, как отрисовываются две конечные точки открытого пути — не затрагивает углы на стыках отрезков и не действует на замкнутые фигуры без открытых концов.

На этой странице объясняется, как выглядит каждое значение заглушки, как stroke-linecap взаимодействует со специфичностью CSS, а также рассматривается особый случай «пути нулевой длины», позволяющего нарисовать одну точку.

Когда стоит использовать это свойство?

Всякий раз, когда вы рисуете линии или открытые пути в SVG и хотите управлять тем, как линия завершается:

  • round — наиболее распространённый выбор для штрихов в стиле от руки, индикаторов прогресса и линий диаграмм: придаёт мягкий, аккуратный вид.
  • square — полезен, когда нужно, чтобы линия немного выходила за конечную точку (например, чтобы две примыкающие линии соединялись ровно).
  • butt (значение по умолчанию) — обрезает линию ровно на конечной координате; используйте его, когда важна точная длина.

Практический приём: путь с нулевой длиной (обводка, начало и конец которой совпадают) отрисовывается как одна точка при stroke-linecap: round или square, и не отображается при значении butt. Это стандартный способ рисовать точки в SVG.

CSS или атрибут представления?

stroke-linecap является одновременно CSS-свойством и SVG-атрибутом представления. Это даёт два способа задать его:

  • Как атрибут элемента: <path stroke-linecap="round" />
  • Как CSS-объявление: path { stroke-linecap: round; }

Атрибут представления ведёт себя как стиль с наименьшим приоритетом, поэтому любое CSS-правило его перекрывает. Встроенный style="…" и внешние таблицы стилей имеют приоритет над атрибутом; среди CSS-правил действует обычная специфичность.

Информация

Свойство stroke-linecap можно применять к любому элементу, но оно влияет только на SVG-элементы фигур и текстового содержимого: <path>, <line>, <polyline>, <text>, <textPath> и <tspan>. Оно не влияет на замкнутые фигуры, такие как <rect>, <circle> или <polygon>, поскольку у них нет открытых концов.

Начальное значениеbutt
Применяется кЭлементам фигур и текстового содержимого.
НаследуетсяДа.
АнимируетсяНет.
ВерсияSVG 1.1 Specification
DOM СинтаксисObject.strokeLinecap = "round";

Синтаксис

Синтаксис CSS stroke-linecap

stroke-linecap: butt | square | round | initial | inherit;

Пример свойства stroke-linecap:

Пример кода CSS stroke-linecap

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-linecap property example</h2>
    <svg viewBox="0 0 6 4">
      <!-- Effect of the "butt" value -->
      <path d="M1,1 h4" stroke="#8ebf42"
        stroke-linecap="butt" />
      <!-- Effect of the "butt" value on a zero length path -->
      <path d="M3,3 h0" stroke="#8ebf42"
        stroke-linecap="butt" />
      <!--
        the following pink lines highlight the
        position of the path for each stroke
        -->
      <path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
      <circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
    </svg>
  </body>
</html>
Попробуйте сами »

При значении butt зелёная обводка заканчивается ровно в координатах (1,1) и (5,1) — отмеченных синими точками — так что её видимая длина равна длине пути. Путь нулевой длины в точке (3,3) не отображается вообще.

Результат

CSS stroke-linecap round value

Пример свойства stroke-linecap со значением «round»:

Пример CSS stroke-linecap round

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-linecap property example</h2>
    <svg viewBox="0 0 6 4">
      <!-- Effect of the "round" value -->
      <path d="M1,1 h4" stroke="#8ebf42" stroke-linecap="round" />
      <!-- Effect of the "round" value on a zero length path -->
      <path d="M3,3 h0" stroke="#8ebf42" stroke-linecap="round" />
      <!--
      the following pink lines highlight the
      position of the path for each stroke
      -->
      <path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
      <circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
    </svg>
  </body>
</html>
Попробуйте сами »

При значении round за каждой конечной точкой добавляется полукруглая заглушка радиусом stroke-width / 2, поэтому зелёная линия немного выходит за синие точки. Путь нулевой длины в точке (3,3) превращается в закрашенный круг — это и есть приём с точкой в действии.

Пример свойства stroke-linecap со значением «square»:

Пример CSS stroke-linecap square

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-linecap property example</h2>
    <svg viewBox="0 0 6 4">
      <!-- Effect of the "square" value -->
      <path d="M1,1 h4" stroke="#8ebf42" stroke-linecap="square" />
      <!-- Effect of the "square" value on a zero length path -->
      <path d="M3,3 h0" stroke="#8ebf42" stroke-linecap="square" />
      <!--
        the following pink lines highlight the
        position of the path for each stroke
        -->
      <path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
      <circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
      <circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
    </svg>
  </body>
</html>
Попробуйте сами »

square похож на round тем, что обводка выходит за конечную точку на stroke-width / 2, но добавляемая заглушка является прямоугольником, а не полукругом, что даёт плоский край. Путь нулевой длины в точке (3,3) отображается в виде небольшого квадрата.

Значения

ЗначениеОписание
buttПо умолчанию. Завершает обводку ровно, точно в конечной точке, без каких-либо расширений. Подпуть нулевой длины не отображается.
roundДобавляет полукруглую заглушку радиусом stroke-width / 2 за каждой конечной точкой, создавая скруглённые концы. Подпуть нулевой длины отображается как точка.
squareДобавляет прямоугольную заглушку, выступающую на stroke-width / 2 за каждую конечную точку, создавая плоские концы, которые выходят за пределы пути. Подпуть нулевой длины отображается как небольшой квадрат.
initialСбрасывает свойство до значения по умолчанию (butt).
inheritНаследует значение от родительского элемента. stroke-linecap наследуется по умолчанию.

Связанные свойства

stroke-linecap — одно из нескольких SVG-свойств обводки, управляющих отображением линий:

  • stroke — задаёт цвет обводки.
  • stroke-width — задаёт толщину обводки (и, соответственно, размер заглушек).
  • stroke-dasharray — превращает сплошную обводку в пунктир; каждый штрих получает собственные заглушки.
  • stroke-dashoffset — смещает начало шаблона пунктира.
  • fill — задаёт цвет заливки внутренней области фигуры.

Практика

Практика
На что влияет свойство 'stroke-linecap' в CSS?
На что влияет свойство 'stroke-linecap' в CSS?
Was this page helpful?