CSS stroke-dashoffset Eigenschaft
So verwenden Sie die CSS-Eigenschaft stroke-dashoffset, um festzulegen, wo der Strich beginnen soll. Lesen Sie über die Eigenschaft und sehen Sie die Werte mit Beispielen.
Die Eigenschaft stroke-dashoffset definiert den Abstand entlang eines SVG-Pfades, an dem das Strichmuster eines Strichs beginnt. Sie arbeitet eng mit stroke-dasharray zusammen, das die Längen der Striche und Lücken festlegt. stroke-dasharray bestimmt, wie das Muster aussieht; stroke-dashoffset bestimmt, wo entlang des Pfades dieses Muster beginnt.
Diese Seite erklärt, wie der Versatz das Strichmuster verschiebt, warum das Animieren dieses Effekts den beliebten "selbstzeichnenden Linien"-Effekt erzeugt, und welche Werte die Eigenschaft akzeptiert.
stroke-dashoffset kann auf zwei Arten festgelegt werden: als Präsentationsattribut auf dem SVG-Element (stroke-dashoffset="5") oder als CSS-Eigenschaft (stroke-dashoffset: 5;). Wenn beide vorhanden sind, hat die CSS-Regel Vorrang vor dem Präsentationsattribut, und eine inline style-Deklaration hat Vorrang vor beiden.
Wie der Versatz funktioniert
Stellen Sie sich das Strichmuster wie ein Lineal vor, das entlang des Pfades gelegt wird. stroke-dashoffset schiebt dieses Lineal vorwärts oder rückwärts, bevor der Pfad gezeichnet wird:
- Ein positiver Wert verschiebt das Muster rückwärts entlang des Pfades (der Strich, der gerade vor dem Startpunkt lag, kommt in den sichtbaren Bereich).
- Ein negativer Wert verschiebt das Muster vorwärts.
- Der Versatz umläuft die Gesamtlänge eines Strich-und-Lücken-Zyklus, sodass ein Versatz gleich der Zykluslänge identisch mit
0aussieht.
Da der Wert nur ein Abstand ist, sind die Einheiten (px, em) im SVG-Benutzerraum optional — eine bloße Zahl wird in Benutzereinheiten interpretiert.
Die Eigenschaft stroke-dashoffset kann sowohl als CSS-Eigenschaft als auch als Präsentationsattribut verwendet werden. Sie kann auf jedes Element angewendet werden, hat jedoch nur auf die folgenden Elemente eine Wirkung: <altGlyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> und <tspan>.
"Px"- oder "em"-Einheiten sind nicht erforderlich.
| Anfangswert | 0 |
|---|---|
| Gilt für | Formen und Textelemente. |
| Vererbbar | Ja. |
| Animierbar | Ja. |
| Version | SVG 1.1 Specification |
| DOM Syntax | Object.strokeDashoffset = 5; |
Syntax
CSS stroke-dashoffset Syntax
stroke-dashoffset: length | percentage | initial | inherit;Beispiel der stroke-dashoffset Eigenschaft:
Der Wert stroke-dashoffset verschiebt den Startpunkt des Strichmusters entlang des Pfades.
CSS stroke-dashoffset Codebeispiel
<!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>Ergebnis
Jede Linie oben verwendet dasselbe stroke-dasharray, aber einen anderen Versatz, sodass die Striche an unterschiedlichen Ausgangspunkten beginnen. Das <path> mit kleinen Markierungen zeigt genau, wo jedes Muster beginnt.
Die "selbstzeichnende Linie"-Animation
Der häufigste Grund für die Verwendung von stroke-dashoffset ist die Animation eines SVG, sodass es sich selbst zu zeichnen scheint. Der Trick besteht darin, sowohl das Strich-Array als auch den Versatz auf die Gesamtlänge des Pfades zu setzen: Dadurch wird der gesamte Strich zu einer riesigen Lücke (unsichtbar). Die Animation des Versatzes zurück auf 0 schiebt den einzelnen Strich in den sichtbaren Bereich und zeichnet die Linie vom Anfang bis zum Ende.
<!DOCTYPE html>
<html>
<head>
<style>
.draw {
fill: none;
stroke: #1c87c9;
stroke-width: 4;
/* One dash and one gap, each as long as the path */
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: draw 2s ease forwards;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<h2>Self-drawing line</h2>
<svg viewBox="0 0 110 110" width="160">
<path class="draw" d="M5,55 C5,5 105,5 105,55 S5,105 5,55" />
</svg>
</body>
</html>Um dies für beliebige Formen präzise umzusetzen, lesen Sie die Pfadlänge in JavaScript mit path.getTotalLength() aus und verwenden Sie diesen Wert sowohl für stroke-dasharray als auch für den Anfangswert von stroke-dashoffset.
Häufige Fallstricke
- Das Muster bewegt sich überhaupt nicht.
stroke-dashoffsethat nur eine Wirkung, wenn auchstroke-dasharraygesetzt ist. Ohne Striche gibt es nichts zu versetzen. - Kein sichtbarer Strich. Das Element benötigt eine
stroke-Farbe und eine nicht nullstroke-width; der Versatz hat keine Wirkung auf einen Strich, den Sie nicht sehen können. - Die Zeichenanimation wird nur "halb gezeichnet". Stellen Sie sicher, dass sowohl
stroke-dasharrayals auch der anfänglichestroke-dashoffsetmindestens so lang wiegetTotalLength()sind; wenn sie kürzer sind, ist die Lücke zu klein, um den gesamten Pfad zu verbergen.
Werte
| Wert | Beschreibung |
|---|---|
| length | Legt die Länge der Eigenschaft fest. "Px"- oder "em"-Einheiten sind nicht erforderlich. |
| percentage | Die Eigenschaft wird in Prozent angegeben. |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |