CSS stroke-Eigenschaft

Die stroke-Eigenschaft malt entlang der Kontur des angegebenen grafischen Elements.

Die fill und stroke-Eigenschaften legen die zum Rendern des Innenraums und des Strichs um Formen und Text verwendete Farbe fest.

Webfarben finden Sie im Abschnitt HTML-Farben.

Inline-Stile überschreiben Präsentationsattribute. Ein Inline-Stil wie <path style="stroke: #1c87c9;" ... /> hat beispielsweise Vorrang vor einem Präsentationsattribut wie <path stroke="#1c87c9" ... />.

INFO

Die stroke-Eigenschaft kann sowohl als CSS-Eigenschaft als auch als Präsentationsattribut verwendet werden. Sie kann auf jedes Element angewendet werden, hat jedoch nur Auswirkungen auf die folgenden Elemente: <altGlyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> und <tspan>.

Startwert	none
Gilt für	Formen und Textinhaltselemente.
Vererbt	Ja.
Animierbar	Nein.
Version	SVG 1.1-Spezifikation
DOM-Syntax	Object.stroke = "#1c87c9";

Syntax

CSS stroke-Syntax

css

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

Beispiel für die stroke-Eigenschaft:

CSS stroke-Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke property example</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="#666666" d="M5 60 l215 0" />
      </g>
    </svg>
  </body>
</html>

Try it Yourself »

Ergebnis

example

Beispiel für die stroke-Eigenschaft mit dem `<svg>`-Tag:

CSS stroke weiteres Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke property example</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>

Try it Yourself »

Werte

Wert	Beschreibung
none	Es wird keine Farbe angewendet.
color	Legt eine einfarbige Farbe fest. Es können Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() verwendet werden.
url	Eine URL-Referenz auf ein Paint-Server-Element, das einen Paint-Server definiert.
context-fill	Verwendet den fill-Wert eines Kontextelements.
context-stroke	Verwendet den stroke-Wert eines Kontextelements.
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.
inherit	Erbt die Eigenschaft vom Elternelement.

Practice

Was ist der Zweck der CSS 'stroke'-Eigenschaft und wie wird sie verwendet?

Die 'stroke'-Eigenschaft wird verwendet, um die Farbe des Rahmens einer SVG-Form festzulegen.Die 'stroke'-Eigenschaft wird verwendet, um die Farbe des Hintergrunds einer Webseite festzulegen.Die 'stroke'-Eigenschaft kann auf HTML-Elemente wie ein 'div' oder 'section' angewendet werden.Die stroke-Eigenschaft akzeptiert verschiedene Werte wie Farbnamen, Hex-Farbcodes, rgb, rgba, hsl, hsla und Farbschlüsselwörter.'stroke' ist eine Shorthand-Eigenschaft für stroke-width, stroke-linejoin und stroke-linecap.

CSS stroke-Eigenschaft ​

Syntax ​

Beispiel für die stroke-Eigenschaft: ​

Ergebnis ​

Beispiel für die stroke-Eigenschaft mit dem <svg>-Tag: ​

Werte ​