Iskun leveys - CSS-temppuja

Anonim

stroke-widthOmaisuus CSS on asettamiseksi leveys rajan SVG muotoja.

.module ( stroke-width: 2; )

Muistaa:

  • Tämä tulee ohittaa esityksen määrite
  • Tämä ei korvaa linjatyyliä esim

Arvot

stroke-widthOmaisuus voi hyväksyä minkä tahansa määrän, kuten kokonaislukuja, desimaaleja, ja prosentit:

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

Huomaa, että yksikön tunnusta (eli pxja em) ei vaadita. Luku ilman yksiköitä on arvo, joka perustuu SVG: n koordinaattijärjestelmään viewBox. Joten esimerkiksi 5renderöi saman kuin 5%a-asetukseksi, viewBoxjoka on asetettu 0 0 100 100(5/100 = .05 tai 5%), mutta 10%yhdessä, joka on 0 0 50 50(5/50 = .1 tai 10%).

Katso CSS-Tricks (@ css-tricks) -kynän lyönnin leveysominaisuus CodePenistä.

Liittyvät

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

Lisää tietoa

  • SVG 1.1 Erittely
  • MDN täytteissä ja aivohalvauksissa

Selaimen tuki

Kromi Safari Firefox Ooppera IE Android iOS
Joo Joo Joo Joo 9+ 4.4+ Joo