SVG-Attribute animieren: stroke, fill, stroke-width, dasharray, dashoffset

SVG-Pfad: stroke-dasharray, ein Muster von gestrichelten Linien

stroke-dasharray steuert das Muster des Strichs oder Rahmen und erzeugt Lücken anstelle des ununterbrochenen Strichs. dasharray unterbricht den Strich mit jeweils zwei Werten: der Länge eines Teilstücks gefolgt von der Länge der Lücke. Dabei müssen keine Paare im dasharray liegen, sondern die Werte alterieren, wobei jeder zweite Wert eine Lücke bildet.

<svg>
    <style>
        circle {
                     Teilstück ┐
                               |
                               ▼
            stroke-dasharray: 200, 50;
                                    ▲
                                    |
                             Lücke  ┘
    }
    </style>
    <circle cx="300" cy="300" r="250"
        stroke="blue"
        stroke-width="40"
        fill="none"/>
</svg>

<svg>
	<style>
		circle {
                     Teilstück ┐        ┐
                               |        |
                               ▼        ▼
            stroke-dasharray: 200, 50, 10, 10;
                                    ▲       ▲
                                    |       |
                             Lücke  ┘       ┘
	}
	</style>
	<circle cx="300" cy="300" r="250"
		stroke="blue"
		stroke-width="40"
		fill="none"/>
</svg>

dashoffset – Ausgangspunkt der gestrichtelten Linie

stroke-dashoffset verschiebt den Anfang des Musters. Bei einem Kreis sitzt der Anfang rechts auf der Linie des Mittelpunkts. Eine CSS-Keyframes-Animation kann den Anfangspunkt verschieben.

circle#c3 {
	stroke-dasharray: 200, 50, 10;
}

circle#c4 {
	stroke-dasharray: 200, 50, 10, 10;
	animation: rotate 5s linear infinite;
}

@keyframes rotate {
	to {stroke-dashoffset: 200}
}

Lineart – dasharray und dashoffset animieren

Um den Kreis als Linie Linie zu animieren, wird die Länge der Linie gebraucht. Eine einzige Zeile JavaScript in der Console des Browsers findet die Länge der Linie heraus.

> document.querySelector ("circle#draw").getTotalLength()
< 1571.019287109375

<svg width="600" height="600" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
<style>
	circle {
		stroke-dasharray: 1571;
		stroke-dashoffset: 1571;
		animation: draw 6s ease infinite;
	}
	
	@keyframes draw {
		0% { stroke-dashoffset: 1571}
		40% { stroke-dashoffset: 0}
		100% { stroke-dashoffset: 0}
	}
</style>
<circle cx="300" cy="300" r="250"
	stroke="blue"
	stroke-width="40"
	fill="none"/>
</svg>

SVG – kein Reverse

CSS-Animationen können mit animation-direction: reverse oder dem Web Animations API mit reverse() zurücklaufen. Diese Steuerung fehlt in SVG-Animationen. Es gibt keine reverse-Funktion, um die Animation umzukehren. SVG-Animationen mit <animate> oder <animateTransform> haben keine »Rückwärts«-Option.

dash lässt sich mit CSS animieren – der Rückwärtslauf der SVG-Animation ist also das Ergebnis einer einfachen CSS-Animation.

.line1 {
    stroke-dasharray: 780;
    stroke-dashoffset: 0;
    animation: dash 5s linear alternate infinite;
}