Ширина штриху - CSS-хитрощі

Anonim

stroke-widthВластивість в CSS для завдання ширини кордону на SVG форм.

.module ( stroke-width: 2; )

Запам’ятайте:

  • Це буде перевизначити атрибут уявлення
  • Це не замінить вбудований стиль, наприклад

Цінності

stroke-widthВластивість може приймати будь-яке число, в тому числі цілих чисел, десяткових і відсотків:

  • stroke-width: 2px
  • stroke-width: 2em
  • stroke-width: 2
  • stroke-width: 2.5
  • stroke-width: 15%

Зверніть увагу, що ідентифікатор одиниці (тобто pxі em) не потрібен. Число без одиниць - це значення, засноване на системі координат SVG viewBox. Так, наприклад, 5відображає те саме, що і 5%в, viewBoxяке встановлено на 0 0 100 100(5/100 = .05 або 5%), але 10%в тому, що 0 0 50 50(5/50 = .1 або 10%).

Перегляньте властивість «Ширина обведення ручки» від CSS-Tricks (@ css-tricks) на CodePen.

Пов’язані

  • stroke
  • stroke-dasharray
  • stroke-dashoffset
  • stroke-linecap

Більше інформації

  • SVG 1.1 Специфікація
  • MDN на заливки та штрихи

Підтримка браузера

Chrome Сафарі Firefox Опера IE Android iOS
Так Так Так Так 9+ 4,4+ Так