Širina poteza - CSS-trikovi

Anonim

stroke-widthNekretnina u CSS je za podešavanje širine granice na SVG oblika.

.module ( stroke-width: 2; )

Zapamtiti:

  • Ovo će poništiti atribut prezentacije
  • To neće nadjačati ugrađeni stil, npr

Vrijednosti

stroke-widthImovine može prihvatiti bilo koji broj, uključujući i cijelim brojevima, decimalama i postocima:

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

Imajte na umu da identifikator jedinice (tj. pxI em) nije potreban. Broj bez jedinica vrijednost je koja se temelji na koordinatnom sustavu SVG-a viewBox. Tako, na primjer, 5prikazuje isto kao 5%u a viewBoxkoji je postavljen na 0 0 100 100(5/100 = .05 ili 5%), ali 10%u onom koji je 0 0 50 50(5/50 = .1 ili 10%).

Pogledajte svojstvo olovke širine poteza od CSS-Tricks (@ css-tricks) na CodePen-u.

Povezano

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

Više informacija

  • SVG 1.1 Spec
  • MDN na ispunama i potezima

Podrška preglednika

Krom Safari Firefox Opera IE Android iOS
Da Da Da Da 9+ 4,4+ Da