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 April 2017.

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

Diese Eigenschaft gilt für jede SVG-Form oder Textelement (siehe stroke-width für eine vollständige Liste), aber als vererbte Eigenschaft kann sie auf Elemente wie <g> angewendet werden und trotzdem die beabsichtigte Wirkung auf die Striche der Nachkommenelemente haben. Wenn der Wert zu Null ausgewertet 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 behandelt wie SVG-Einheiten (siehe <number>, oben) und schriftbasierte Längen wie em werden in Bezug auf den SVG-Wert des Elements für die Schriftgröße berechnet. Die Auswirkungen anderer Längeneinheiten können vom Browser abhängen.
<percentage>: Prozentsätze beziehen sich auf die normalisierte Diagonale des aktuellen SVG-Ansichtsfensters, die wie folgt berechnet wird: $\frac{\sqrt{{<width>}^{2} + {<height>}^{2}}}{\sqrt{2}}$ .
<number> Nicht standardisiert: Eine Anzahl von SVG-Einheiten, deren Größe durch den aktuellen Maßeinheitenraum definiert wird.

Formale Definition

Anfangswert	`1px`
Anwendbar auf	`<circle>`, `<ellipse>`, `<line>`, `<path>`, `<polygon>`, `<polyline>`, and `<rect>` elements in an `svg`
Vererbt	Ja
Prozentwerte	refer to the normalized diagonal measure of the current SVG viewport's applied `viewBox`, or of the viewport itself if no `viewBox` is specified
Berechneter Wert	an absolute `<length>` or `<percentage>`, numbers converted to absolute lengths first
Animationstyp	by computed value type

Formale Syntax

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

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

Beispiele

Verschiedene Strichbreiten

Dieses Beispiel demonstriert verschiedene Wertsynonyme für die stroke-width Eigenschaft.

HTML

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

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

Für die ersten vier Pfade wenden wir Strichbreitenwerte als Paare an, um zu zeigen, wie reine 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 eingestellt wird, die fünf Prozent so breit wie die Diagonalmessung des SVG-Ansichtsfensters 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