SVG-Pfade mit stroke-dasharray, stroke-dashoffset und pathLength animieren

SVG Nexus · Zuletzt aktualisiert: November 2026

Erstellen Sie flüssige SVG-Linienanimationen in reinem CSS mit pathLength="1", stroke-dasharray und Unterstützung für prefers-reduced-motion.

Wie stroke-dasharray und stroke-dashoffset Konturen zeichnen

Jede konturierte SVG-Form (<path>, <circle>, <polyline>) lässt sich über stroke-dasharray in Segmente teilen. Entspricht die Strichlänge dem gesamten Pfadumfang und wird stroke-dashoffset auf 0 animiert, entsteht ein präziser Selbstzeichnungs-Effekt.

Pfadlängen mit pathLength="1" vereinheitlichen

Statt Pfadlängen per JavaScript mit getTotalLength() auszulesen, normiert pathLength="1" direkt am SVG-Element den Umfang, sodass eine einzige CSS-Regel (stroke-dasharray: 1; stroke-dashoffset: 1) für jedes Icon funktioniert.

Zeitversetzte Mehrpfad-Icons sauber abstimmen

Nutzen Sie animation-delay für mehrteilige Symbole und ein kleines Intervall (stroke-dasharray: 1 1.02) bei stroke-linecap="round", damit vor Animationsstart kein Anfangspunkt sichtbar bleibt.

Barrierefreiheit durch prefers-reduced-motion

Schalten Sie dekorative Pfadanimationen unter @media (prefers-reduced-motion: reduce) ab, damit bewegungsempfindliche Nutzer sofort das vollständige Symbol sehen.

<svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="2">
  <path pathLength="1" d="M20 6 9 17l-5-5" class="draw-check"/>
</svg>
<style>
.draw-check { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.6s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
</style>

← Praktische SVG-Anleitungen und Tutorials