stroke-width

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die stroke-width CSS Eigenschaft definiert die Breite eines auf die SVG Form angewendeten Strichs. Falls vorhanden, überschreibt sie das stroke-width Attribut des Elements.

Diese Eigenschaft gilt für jede SVG-Form oder Textinhaltselement (siehe stroke-width für eine vollständige Liste), kann aber als vererbte Eigenschaft auch auf Elemente wie <g> angewendet werden und hat dennoch die beabsichtigte Wirkung auf die Striche der nachfolgenden Elemente. Wenn der Wert auf null bewertet wird, wird der Strich nicht gezeichnet.

Syntax

css
/* Length and percentage values */
stroke-width: 0%;
stroke-width: 1.414px;

/* Global values */
stroke-width: inherit;
stroke-width: initial;
stroke-width: revert;
stroke-width: revert-layer;
stroke-width: unset;

Werte

<length>

Pixeleinheiten werden genauso wie SVG-Einheiten behandelt (siehe <number>, oben) und schriftbasierte Längen wie em werden im Hinblick auf den SVG-Wert für die Textgröße des Elements berechnet; die Auswirkungen anderer Längeinheiten können vom Browser abhängen.

<percentage>

Prozentsätze beziehen sich auf die normierte Diagonale des aktuellen SVG-Viewports, welche als <width> 2 + <height> 2 2 berechnet wird.

<number>

Eine Anzahl von SVG-Einheiten, deren Größe durch den aktuellen Einheitsraum definiert wird.

Formale Definition

Initialer Wert1px
Anwendbar aufcircle, ellipse, line, path, polygon, polyline, and rect elements in an svg
VererbtJa
Prozentwerterefer to the normalized diagonal measure of the current SVG viewport’s applied viewbox, or of the viewport itself if no `viewBox` is specified
Berechneter Wertan absolute length or percentage, numbers converted to absolute lengths first
Animationstypby computed value type

Formale Syntax

stroke-width = 
  [ <length-percentage> | <number> ]#  

<length-percentage> = 
  <length>      |
  <percentage>

Beispiele

Verschiedene Strichbreiten

Dieses Beispiel zeigt verschiedene Wertesyntaxen für die stroke-width Eigenschaft.

HTML

Zuerst richten wir fünf Mehrsegmentpfade ein, die alle einen schwarzen Strich mit einer Breite von eins und keine Füllung verwenden. Jeder Pfad erstellt eine Reihe von Bergsymbols, die von links (ein flacher Eckwinkel) nach rechts (ein extremer Eckwinkel) gehen.

html
<svg viewBox="0 0 39 30" xmlns="http://www.w3.org/2000/svg">
  <g stroke="black" stroke-width="1" fill="none">
    <path
      d="M1,5 l7   ,-3 l7   ,3
         m2,0 l3.5 ,-3 l3.5 ,3
         m2,0 l2   ,-3 l2   ,3
         m2,0 l0.75,-3 l0.75,3
         m2,0 l0.5 ,-3 l0.5 ,3" />
    <path
      d="M1,8 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
    <path
      d="M1,14 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
    <path
      d="M1,18 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
    <path
      d="M1,26 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
  </g>
</svg>

CSS

Bei den ersten vier Pfaden wenden wir Strichbreitenwerte als Paare an, um zu zeigen, wie nackte Zahlenwerte und Pixelwerte funktional äquivalent sind. Für die ersten beiden Pfade sind die Werte .25 und .25px. Für die zweiten beiden Pfade sind die Werte 1 und 1px.

Für den fünften und letzten Pfad wird ein Wert von 5% angewendet, wodurch eine Strichbreite festgelegt wird, die fünf Prozent so breit ist, wie die Diagonallänge des SVG-Viewports lang ist.

css
path:nth-child(1) {
  stroke-width: 0.25;
}
path:nth-child(2) {
  stroke-width: 0.25px;
}
path:nth-child(3) {
  stroke-width: 1;
}
path:nth-child(4) {
  stroke-width: 1px;
}
path:nth-child(5) {
  stroke-width: 5%;
}

Ergebnisse

Spezifikationen

Specification
CSS Fill and Stroke Module Level 3
# stroke-width

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch