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>

Versuch es selber!

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>

Versuch es selber!

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.