Strichbreite - CSS-Tricks

Anonim

Die stroke-widthEigenschaft in CSS dient zum Festlegen der Breite eines Rahmens für SVG-Formen.

.module ( stroke-width: 2; )

Merken:

  • Dadurch wird ein Präsentationsattribut überschrieben
  • Dies überschreibt keinen Inline-Stil, z

Werte

Die stroke-widthEigenschaft kann eine beliebige Zahl akzeptieren, einschließlich ganzer Zahlen, Dezimalstellen und Prozentsätze:

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

Beachten Sie, dass eine Einheitenkennung (dh pxund em) nicht erforderlich ist. Eine Zahl ohne Einheiten ist ein Wert, der auf dem Koordinatensystem der SVG basiert viewBox. So wird beispielsweise 5dasselbe gerendert wie 5%in einem viewBox, das auf 0 0 100 100(5/100 = 0,05 oder 5%) eingestellt ist, aber 10%in einem, das 0 0 50 50(5/50 = 0,1 oder 10%) ist.

Weitere Informationen finden Sie in der Eigenschaft Stiftstrichbreite von CSS-Tricks (@ css-Tricks) in CodePen.

verbunden

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

Mehr Informationen

  • SVG 1.1 Spec
  • MDN bei Füllungen und Strichen

Browser-Unterstützung

Chrom Safari Feuerfuchs Oper IE Android iOS
Ja Ja Ja Ja 9+ 4.4+ Ja