CSS-Eigenschaft stroke

Die Eigenschaft stroke wird entlang der Umrisse des angegebenen grafischen Elements gemalt.

Die Eigenschaften fill und stroke definieren die Farbe, mit der das Interieur und der Strich um Formen und Text dargestellt werden.

Die Webfarben finden Sie im Abschnitt HTML-Farben.

Anfangswert none
Gilt für Formen und Textinhaltselemente
Geerbt Ja
Animierbar Nein
Version SVG 1.1 Specification
DOM Syntax Object.stroke = "#1c87c9";

Syntax

stroke: color | url | none | context-fill | context-stroke | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft stroke</h2>
    <svg height="100" width="500">
      <g fill="none">
        <path stroke="#8ebf42" d="M5 20 l215 0" />
        <path stroke="#1c87c9" d="M5 40 l215 0" />
        <path stroke="#666" d="M5 60 l215 0" />
      </g>
    </svg>
  </body>
</html>

Ein anderes Beispiel mit der Eigenschaft stroke:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft stroke</h2>
    <svg viewBox="5 5 100 100">
      <style>
        path {
        fill: none;
        stroke-width: 3px;
        marker: url(#diamond);
        }
      </style>
      <path d="M 10,50 v -20 h 40 v -20" stroke="#666"/>
      <path d="M 30,70 v -20 h 40 v -20" stroke="#8ebf42"/>
      <path d="M 50,90 v -20 h 40 v -20" stroke="#1c87c9"/>
      <marker id="diamond" markerWidth="12" markerHeight="12" refX="6" refY="6"
        markerUnits="userSpaceOnUse">
        <circle cx="6" cy="6" r="3"
          fill="#000" stroke="#ccc" stroke-width="1,5"/>
      </marker>
    </svg>
  </body>
</html>

Werte

Wert Beschreibung
none Keine Farbe wird angewendet.
color Stellt eine Volltonfarbe ein. Die Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können verwendet werden.
url Ein URL-Verweis auf ein Paint-Server-Element, das einen Paint-Server definiert.
context-fill Verwendet den Wert der Eigenschaft fill aus einem Kontext-Element.
context-stroke Verwendet den Wert der Eigenschaft stroke aus einem Context-Element.
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 bewirkt die CSS-Eigenschaft 'stroke'?
Finden Sie das nützlich?