Stroke-width - Astuces CSS

Anonim

La stroke-widthpropriété en CSS sert à définir la largeur d'une bordure sur les formes SVG.

.module ( stroke-width: 2; )

Rappelles toi:

  • Cela va passer outre un attribut de présentation
  • Cela ne remplacera pas un style en ligne, par exemple

Valeurs

La stroke-widthpropriété peut accepter n'importe quel nombre, y compris des nombres entiers, des décimales et des pourcentages:

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

Notez qu'un identifiant d'unité (c'est px-à- dire et em) n'est pas requis. Un nombre sans unités est une valeur basée sur le système de coordonnées du SVG viewBox. Ainsi, par exemple, le 5rendu est le même que 5%dans un viewBoxqui est défini sur 0 0 100 100(5/100 = .05 ou 5%) mais 10%dans celui qui est 0 0 50 50(5/50 = .1 ou 10%).

Voir la propriété Pen stroke-width par CSS-Tricks (@ css-tricks) sur CodePen.

En rapport

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

Plus d'information

  • Spécifications SVG 1.1
  • MDN sur les remplissages et les traits

Prise en charge du navigateur

Chrome Safari Firefox Opéra C'EST À DIRE Android iOS
Oui Oui Oui Oui 9+ 4.4+ Oui