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

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

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

Синтаксис

/* Length and percentage values */
stroke-width: 0%;
stroke-width: 1.414px;

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

Значения

<length>

Единицы измерения в пикселях обрабатываются так же, как единицы SVG (см. <number> выше), а длины, зависящие от размера шрифта, например em, вычисляются относительно значения размера текста SVG для элемента; поведение других единиц длины может зависеть от браузера.

<percentage>

Проценты относятся к нормализованной диагонали текущей области просмотра SVG, которая вычисляется по формуле $\frac{\sqrt{{\mathrm{<width>}}^2+{\mathrm{<height>}}^2}}{\sqrt{2}}$.

<number> Нестандартное

Число единиц SVG, размер которых определяется текущим пространством единиц.

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

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

stroke-width = 
  <length-percentage> |
  <number>

<length-percentage> = 
  <length> |
  <percentage>

Примеры

Различная ширина обводки

В этом примере показаны различные варианты синтаксиса значений свойства stroke-width.

HTML

Сначала создадим пять путей из нескольких сегментов, каждому из которых зададим чёрную обводку шириной в одну единицу и отсутствие заливки. Каждый путь образует ряд символов гор, расположенных слева направо — от пологого угла до острого.

<svg viewBox="0 0 39 30" xmlns="http://www.w3.org/2000/svg">
  <g stroke="black" stroke-width="1" fill="none">
    <path
      d="M1,5 l7   ,-3 l7   ,3
         m2,0 l3.5 ,-3 l3.5 ,3
         m2,0 l2   ,-3 l2   ,3
         m2,0 l0.75,-3 l0.75,3
         m2,0 l0.5 ,-3 l0.5 ,3" />
    <path
      d="M1,8 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
    <path
      d="M1,14 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
    <path
      d="M1,18 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
    <path
      d="M1,26 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
  </g>
</svg>

CSS

Для первых четырёх путей зададим значения ширины обводки попарно, чтобы показать, что обычные числовые значения и значения в пикселях функционально эквивалентны. Для первых двух путей значения составляют .25 и .25px. Для следующих двух путей значения составляют 1 и 1px.

Для пятого и последнего пути зададим значение 5%, установив тем самым ширину обводки, равную пяти процентам диагонали области просмотра SVG.

path:nth-child(1) {
  stroke-width: 0.25;
}
path:nth-child(2) {
  stroke-width: 0.25px;
}
path:nth-child(3) {
  stroke-width: 1;
}
path:nth-child(4) {
  stroke-width: 1px;
}
path:nth-child(5) {
  stroke-width: 5%;
}

Результат

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

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

См. также

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