Slagbredde - CSS-triks

Anonim

Den stroke-widtheiendom i CSS er for å angi bredden på en grense på SVG-figurer.

.module ( stroke-width: 2; )

Huske:

  • Dette vil overstyre en presentasjon attributt
  • Dette overstyrer ikke en innebygd stil, f.eks

Verdier

Den stroke-widthegenskapen kan akseptere noen tall, inkludert hele tall, desimaltall, og prosenter:

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

Merk at en enhetsidentifikator (dvs. pxog em) ikke er nødvendig. Et tall uten enheter er en verdi basert på koordinatsystemet til SVG viewBox. Så, for eksempel, 5gjengir det samme som 5%i en viewBoxsom er satt til 0 0 100 100(5/100 = .05 eller 5%), men 10%i en som er 0 0 50 50(5/50 = .1 eller 10%).

Se pennens strekbreddegenskap av CSS-Tricks (@ css-tricks) på CodePen.

I slekt

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

Mer informasjon

  • SVG 1.1 spesifikasjon
  • MDN på fyll og slag

Nettleserstøtte

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