Lățimea cursei - CSS-Tricks

Anonim

stroke-widthProprietatea în CSS este pentru setarea lățimea unei frontiere pe forme SVG.

.module ( stroke-width: 2; )

Tine minte:

  • Aceasta va înlocui un atribut de prezentare
  • Acest lucru nu va suprascrie un stil inline, de exemplu

Valori

stroke-widthProprietatea poate accepta orice număr, inclusiv numere întregi, zecimale, și procentaje:

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

Rețineți că nu este necesar un identificator de unitate (adică pxși em). Un număr fără unități este o valoare bazată pe sistemul de coordonate al SVG viewBox. Deci, de exemplu, 5redă același lucru ca 5%într-un viewBoxsetat la 0 0 100 100(5/100 = .05 sau 5%), dar 10%într-unul care este 0 0 50 50(5/50 = .1 sau 10%).

Vedeți proprietatea Pen-width-width de CSS-Tricks (@ css-tricks) pe CodePen.

Legate de

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

Mai multe informatii

  • SVG 1.1 Spec
  • MDN pe umpluturi și lovituri

Suport pentru browser

Crom Safari Firefox Operă IE Android iOS
da da da da 9+ 4.4+ da