W3docs
de
Anmelden

CSS stroke-width Eigenschaft

Wie die CSS-Eigenschaft stroke-width genutzt wird, um die Breite des Strichs festzulegen. Lesen Sie über die Eigenschaft und sehen Sie Beispiele zu den Werten.

Die CSS-Eigenschaft stroke-width legt die Dicke des Umrisses (den „Strich") fest, der um eine SVG-Form oder einen Text gezeichnet wird. Der Strich ist die gemalte Linie, die dem Pfad der Form folgt; stroke-width bestimmt, wie dick diese Linie ist.

Diese Seite behandelt die Syntax, die zulässigen Werte (Längen und Prozentwerte), die Interaktion von stroke-width mit SVG-Präsentationsattributen sowie die Fallstricke bei Einheiten und der viewBox-Skalierung.

Wozu stroke-width verwenden

In SVG werden der Umriss einer Form und ihr Inneres getrennt gezeichnet: Die Eigenschaft stroke zeichnet den Umriss, und fill füllt das Innere. Ein Strich ist erst sichtbar, wenn er eine von null verschiedene Breite hat, daher bewirkt stroke-width, dass ein Umriss überhaupt erscheint. Verwenden Sie diese Eigenschaft, um Ränder dicker oder dünner zu machen, um Haarlinien-Raster zu zeichnen oder um fett umrahmte Icons und Texte zu erstellen.

stroke-width vs. das SVG-Attribut

Es gibt zwei Möglichkeiten, die Strichbreite festzulegen: als SVG-Präsentationsattribut im Markup (stroke-width="3") oder als CSS-Eigenschaft. Wenn beide vorhanden sind, gewinnt CSS — eine CSS-Regel (oder ein Inline-style) hat Vorrang vor dem Präsentationsattribut. Das ist der häufigste Grund, warum ein im SVG-Markup gesetzter Wert scheinbar „ignoriert" wird: Ein Stylesheet überschreibt ihn.

<!-- The CSS stroke-width: 1px wins over the attribute stroke-width="5". -->
<circle cx="5" cy="5" r="3" stroke-width="5" style="stroke-width: 1px;" />
Info

stroke-width ist ein Präsentationsattribut und kann auf jedes Element angewendet werden, wirkt sich jedoch nur auf die folgenden Elemente aus: <altGlyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> und <tspan>.

Info

Einheiten wie px oder em sind erforderlich, außer wenn der Wert 0 ist.

Standardwert1
Gilt fürFormen und Textelemente.
VererbbarJa.
AnimierbarJa.
VersionSVG 1.1 Specification
DOM-SyntaxObject.strokeWidth = "0.5";

Syntax

stroke-width: length | percentage | initial | inherit;

Die Breite ist auf dem Pfad zentriert: Eine Hälfte wird innerhalb der Formkante gezeichnet und die andere Hälfte außerhalb. Ein stroke-width von 4 bei einem Kreis mit Radius 3 fügt demnach 2 Einheiten jenseits des Radius hinzu und überlappt 2 Einheiten nach innen.

Beispiel der stroke-width-Eigenschaft:

CSS stroke-width Code-Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-width property example</h2>
    <svg viewBox="0 0 30 10">
      <circle cx="5" cy="5" r="3" stroke="#1c87c9" style="stroke-width: 1px;" />
    </svg>
  </body>
</html>
Probier es selbst »

Ergebnis

CSS stroke-width

Beispiel der stroke-width-Eigenschaft mit dem Wert „length":

CSS stroke-width weiteres Code-Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-width property example</h2>
    <svg viewBox="0 0 30 10">
      <circle cx="5" cy="5" r="3" stroke="#1c87c9" style="stroke-width: 3px;" />
    </svg>
  </body>
</html>
Probier es selbst »

Beispiel der stroke-width-Eigenschaft mit dem Wert „%":

Ein Prozentwert wird relativ zur SVG-Diagonale aufgelöst — genauer gesagt der Diagonale des viewport (sqrt(width² + height²) / sqrt(2)), nicht relativ zur Größe der Form selbst. Das macht prozentuale Breiten praktisch, wenn der Strich mit der Zeichnung skalieren soll.

CSS stroke-width Prozentwert-Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-width property example</h2>
    <svg viewBox="0 0 30 10">
      <circle cx="5" cy="5" r="3" stroke="#1c87c9" style="stroke-width: 2%;" />
    </svg>
  </body>
</html>
Probier es selbst »

Werte

WertBeschreibung
lengthGibt die Breite des Strichs an.
percentageGibt die Breite des Strichs in % an.
initialSetzt die Eigenschaft auf ihren Standardwert.
inheritErbt die Eigenschaft vom übergeordneten Element.

Hinweise und Fallstricke

  • Eine Breite von null verbirgt den Strich. stroke-width: 0 zeichnet nichts, auch wenn eine stroke-Farbe gesetzt ist.
  • Einheiten sind für CSS-Werte ungleich null erforderlich. Innerhalb eines style-Attributs oder Stylesheets sind Angaben wie 2px oder 0.5em nötig. Die reine Zahlenform (stroke-width="3") ist nur als SVG-Attribut gültig, wo die Zahl in Benutzerraum-Einheiten interpretiert wird.
  • Der Strich liegt beidseitig am Pfad. Da die Hälfte der Breite außerhalb der Formkante liegt, kann ein dicker Strich über die viewBox hinausragen und abgeschnitten werden. Fügen Sie der viewBox Innenabstand hinzu, wenn Ihr Umriss abgeschnitten wird.
  • Er skaliert mit der viewBox. Ein in Benutzereinheiten angegebener stroke-width wächst und schrumpft, wenn das SVG auf seinen Container skaliert wird. Um eine konstante Bildschirmdicke unabhängig von der Skalierung zu erhalten, fügen Sie dem Element das SVG-Attribut vector-effect="non-scaling-stroke" hinzu.

Verwandte Eigenschaften

Übung

Übung
Was macht die CSS-Eigenschaft 'stroke-width'?
Was macht die CSS-Eigenschaft 'stroke-width'?
Was this page helpful?