CSS stroke-dashoffset-Eigenschaft

Die stroke-dashoffset-Eigenschaft ist ein Präsentationsattribut, das die Position entlang eines SVG-Pfad definiert, an der der Strich einer Kontur beginnen wird.

CSS-Regeln überschreiben Präsentationsattribute. Inline-Stile haben Vorrang vor beiden.

INFO

Die stroke-dashoffset-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>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> und <tspan>.

INFO

Die Einheiten „px“ oder „em“ sind nicht erforderlich.

Anfangswert	0
Gilt für	Formen und Textinhaltselemente.
Vererbbar	Ja.
Animierbar	Ja.
Version	SVG 1.1-Spezifikation
DOM-Syntax	Object.strokeDashoffset = 5;

Syntax

CSS-Syntax für stroke-dashoffset

css

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

Beispiel für die stroke-dashoffset-Eigenschaft:

Der Wert stroke-dashoffset verschiebt den Startpunkt des Strichmusters entlang des Pfads.

CSS-Codebeispiel für stroke-dashoffset

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Stroke-dashoffset property example</h2>
    <svg viewBox="-3 0 33 10" >
      <line x1="0" y1="1" x2="30" y2="1" stroke="#1c87c9" />
      <line x1="0" y1="3" x2="30" y2="3" stroke="#ccc"
        stroke-dasharray="4 1" />
      <line x1="0" y1="5" x2="30" y2="5" stroke="#8ebf42"
        stroke-dasharray="3 1"
        stroke-dashoffset="3" />
      <line x1="0" y1="7" x2="30" y2="7" stroke="#FF0000"
        stroke-dasharray="3 1"
        stroke-dashoffset="-3" />
      <line x1="0" y1="9" x2="30" y2="9" stroke="#666"
        stroke-dasharray="3 1"
        stroke-dashoffset="1" />
      <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="#000"/>
    </svg>
  </body>
</html>

Try it Yourself »

Ergebnis

Liste der CSS stroke-dashoffset-Werte

Werte

Wert	Beschreibung
length	Legt die Länge der Eigenschaft fest. „px“ oder „em“ sind nicht erforderlich.
percentage	Die Eigenschaft wird in Prozent angegeben.
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Praxis

Welchen Zweck hat die CSS-Eigenschaft stroke-dashoffset und wie wird sie verwendet?

Sie wird verwendet, um die Position der Striche in einer gestrichelten Linie zu ändern.Sie gibt die Abmessungen des Randbildes an.Sie ändert den Umrandungsstil eines Elements.Sie verwendet <length>-Werte, um den Versatz des Strichmusters zu definieren.Sie akzeptiert nur Prozentwerte, um den Versatz des Strichmusters zu definieren.

CSS stroke-dashoffset-Eigenschaft ​

Syntax ​

Beispiel für die stroke-dashoffset-Eigenschaft: ​

Ergebnis ​