Slaglængde - CSS-tricks

Anonim

Den stroke-widthejendom i CSS er til indstilling af bredden af en grænse på SVG former.

.module ( stroke-width: 2; )

Husk:

  • Dette vil tilsidesætte en præsentation attribut
  • Dette tilsidesætter ikke en indbygget stil, f.eks

Værdier

Den stroke-widthegenskab kan acceptere et vilkårligt antal, herunder hele tal, decimaler og procenter:

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

Bemærk, at en enhedsidentifikator (dvs. pxog em) ikke er påkrævet. Et tal uden enheder er en værdi baseret på koordinatsystemet i SVG viewBox. Så 5gør f.eks. Det samme som 5%i en, viewBoxder er indstillet til 0 0 100 100(5/100 = .05 eller 5%), men 10%i en, der er 0 0 50 50(5/50 = .1 eller 10%).

Se egenskaben Pen-stregbredde ved CSS-Tricks (@ css-tricks) på CodePen.

Relaterede

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

Mere information

  • SVG 1.1 Spec
  • MDN på fyld og slag

Browsersupport

Chrome Safari Firefox Opera IE Android iOS
Ja Ja Ja Ja 9+ 4.4+ Ja