CSS-Eigenschaft stroke-width

Die CSS-Eigenschaft stroke-width gibt die Breite des Hubs auf dem Element an.

Die Einheite "px" oder "em" sind nicht erforderlich.
Anfangswert 1
Gilt für Formen und Textinhaltselemente
Geerbt Ja
Animierbar Nein
Version SVG 1.1 Specification
DOM Syntax Object.strokeWidth = "0.5";

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft stroke-width</h2>
    <svg viewBox="0 0 30 10">
      <circle cx="5" cy="5" r="3" stroke="#1c87c9"
        stroke-width="1" />
    </svg>
  </body>
</html>

Ein anderes Beispiel mit der Eigenschaft stroke-width:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft stroke-width</h2>
    <svg viewBox="0 0 30 10">
      <circle cx="5" cy="5" r="3" stroke="#1c87c9"
        stroke-width="3" />
    </svg>
  </body>
</html>

In diesem Beispiel wird die Breite des Hubs als Prozentsatz definiert:

Beispiel

<!DOCTYPE html>
<html>
  <head>
   <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft stroke-width</h2>
    <svg viewBox="0 0 30 10">
      <circle cx="5" cy="5" r="3" stroke="#1c87c9"
        stroke-width="2%" />
    </svg>
  </body>
</html>

Werte

Wert Beschreibung
length Definiert die Breite der Eigenschaft. Die Einheiten "px" oder "em" sind nicht erforderlich.
percentage Die Eigenschaft wird prozentual % angegeben.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera

Übe dein Wissen

Was ist die CSS-Eigenschaft 'stroke-width'?
Finden Sie das nützlich?