Slagbreedte - CSS-trucs

Anonim

De stroke-widtheigenschap in CSS is voor het instellen van de breedte van een rand op SVG-vormen.

.module ( stroke-width: 2; )

Onthouden:

  • Dit heeft voorrang op een presentatiekenmerk
  • Dit heeft geen voorrang op een inline stijl, bijv

Waarden

De stroke-widtheigenschap kan elk getal accepteren, inclusief hele getallen, decimalen en percentages:

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

Merk op dat een unit-ID (dwz pxen em) niet vereist is. Een getal zonder eenheden is een waarde die is gebaseerd op het coördinatensysteem van de SVG viewBox. Dus wordt bijvoorbeeld 5hetzelfde weergegeven als 5%in a viewBoxdie is ingesteld op 0 0 100 100(5/100 = .05 of 5%) maar 10%in een dat is 0 0 50 50(5/50 = .1 of 10%).

Zie de penstreekbreedte-eigenschap door CSS-Tricks (@ css-tricks) op CodePen.

Verwant

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

Meer informatie

  • SVG 1.1-specificatie
  • MDN op vullingen en slagen

Browser-ondersteuning

Chrome Safari Firefox Opera D.W.Z Android iOS
Ja Ja Ja Ja 9+ 4.4+ Ja