stroke-width

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

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

Свойство 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{{<ширина>}^{2} + {<высота>}^{2}}}{\sqrt{2}}$ .
<number> Нестандартный: Число единиц SVG, размер которых определяется текущим пространством единиц.

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

Начальное значение	`1px`
Применимо к	`<circle>`, `<ellipse>`, `<line>`, `<path>`, `<polygon>`, `<polyline>`, и `<rect>` элементов в `svg`
Наследуется	да
Проценты	относятся к нормализованному диагональному размеру текущего SVG viewport's примененного `viewbox`, или к самому viewport'у, если `viewBox` не указан
Вычисленное значение	абсолютная `<length>` или `<percentage>`, числа, предварительно преобразованные в абсолютные длины
Тип анимации	по типу вычисленного значения

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

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 viewport.

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%;
}

Результаты

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

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

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`stroke-width`	≤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-width