Projektziel: Das Ziel des Projekts ist es, eine dynamische und visuell ansprechende Darstellung von SVG-Grafiken zu schaffen, bei der die Linien der Formen animiert erscheinen, als ob sie gerade gezeichnet werden. Diese Technik kann auf verschiedene Formen und Designs angewendet werden, um interaktive und lebendige Grafiken für Webseiten, Infografiken oder andere digitale Medien zu erzeugen.
Bild 1 - Skalierbare Vektorgrafiken animiert
Projektlink:
Skalierbare Vektorgrafiken animiert
SVG Animationseffekt
Die Animation simuliert das Zeichnen der Konturen der SVG-Elemente. Dies wird durch die CSS-Eigenschaften stroke-dasharray und stroke-dashoffset erreicht.
- stroke-dasharray: Gibt die Länge und das Muster der gestrichelten Linie an. Wenn diese Länge der gesamten Kontur entspricht, kann die Linie vollständig sichtbar oder unsichtbar gemacht werden.
- stroke-dashoffset: Verschiebt den Startpunkt der Linie. Wenn dieser Wert hoch genug ist, kann die Linie komplett versteckt werden.
- Animation (@keyframes draw): Die Animation reduziert den
stroke-dashoffset allmählich auf null, wodurch die Linie sichtbar wird, als würde sie gezeichnet werden.
<style>
/* Definiere die Gesamtstreckenlänge für die Animation */
#gruppe {
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: draw 5s linear forwards;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
</style>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<g id="gruppe">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="none"/>
<rect x="100" y="10" width="80" height="80" stroke="black" stroke-width="2" fill="none"/>
</g>
</svg>
Die SVGs werden dynamisch über eine PHP-Datei und JSON-Daten geladen.
Die JSON-Datei mit den SVGs:
{
"svg1": {
"content": "<svg id='svg1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g id='animGruppe' style='stroke-dasharray: 251.2; stroke-dashoffset: 251.2; animation: draw 5s linear forwards, fillColor 5s linear forwards;'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='none' /></g><style>@keyframes draw {to {stroke-dashoffset: 0;}} @keyframes fillColor {0% {fill: none;} 100% {fill: red;}}</style></svg>"
},
"svg2": {
"content": "<svg id='svg1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g id='animGruppe' style='display:inline;fill:none;fill-rule:nonzero;stroke:#000000;stroke-opacity:1;stroke-width:3;stroke-dasharray: 251.2; stroke-dashoffset: 251.2; animation: draw 3s linear forwards, fillColor 6s linear forwards;'><circle cx='50' cy='50' r='40' /></g><style>@keyframes draw {to {stroke-dashoffset: 0;}} @keyframes fillColor {0% {fill: none;} 100% {fill: red;}}</style></svg>"
},
"svg3": {
"content": "<svg id='svg1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g id='animGruppe' style='display:inline;fill:none;fill-rule:nonzero;stroke:#000000;stroke-opacity:1;stroke-width:3;stroke-dasharray: 360; stroke-dashoffset: 360; animation: draw 3s linear forwards, fillColor 6s linear forwards;'><rect width='90' height='90' x='5' y='5'/></g><style>@keyframes draw {to {stroke-dashoffset: 0;}} @keyframes fillColor {0% {fill: none;} 100% {fill: red;}}</style></svg>"
},
"svg4": {
"content": "<svg id='svg1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g id='animGruppe' style='stroke-dasharray: 360; stroke-dashoffset: 360; animation: draw 5s linear forwards, fillColor 5s linear forwards;'><rect width='90' height='90' x='5' y='5' stroke='black' stroke-width='3' fill='none' /></g><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='none' /><style>@keyframes draw {to {stroke-dashoffset: 0;}} @keyframes fillColor {0% {fill: none;} 100% {fill: red;}}</style></svg>"
}
}
Bestimmung des stroke-dasharray
Für den Animationseffekt ist die Länge des stroke-dasharray wichtig. Ein zu kurz gewählter Dasharray führt zu einem fehlerhaften Verhalten (SVG 5.)
Für das Rechteck mit einem Umfang von 360 Einheiten (4 Seiten je 90 Einheiten) ist der Wert 360 passend, damit die gesamte Linie durch die Animation sichtbar wird.
Für den Kreis entspricht der Wert dem Umfang des Kreises. Der Umfang eines Kreises wird mit der Formel 2×π×r berechnet. Für einen Kreis mit einem Radius von 40 beträgt der Umfang etwa 251,2 Einheiten.
Für komplexe Pfade gibt es die Methode SVGGeometryElement.getTotalLength(). Die Methode SVGGeometryElement.getTotalLength() gibt den berechneten Wert für die Gesamtlänge des Pfades zurück.
let rechteck = document.querySelector(".rechteck1");
console.log(rechteck);
const lengthDraw2 = rechteck.getTotalLength();
console.log(lengthDraw2);
// Ausgabe auf der HTML-Seite
document.getElementById("output").innerText = "Die Länge des SVG-Pfades ist: " + lengthDraw2;
Die Animation nach dem Zeichnen mit einer Farbe füllen
Dieser Code sorgt dafür, dass der Kreis nach dem Zeichnen mit den spezifizierten Stil-Eigenschaften animiert wird und sich am Ende rot füllt.
-
Der gesamte Stil für das
<g>-Element:
display: inline: Das Element wird im Inline-Layout dargestellt.fill: none: Der Kreis ist anfänglich ohne Füllung.fill-rule: nonzero: Legt die Füllregel fest, falls komplexe Pfade verwendet werden.stroke: #000000: Die Konturfarbe ist schwarz.stroke-opacity: 1: Die Deckkraft der Kontur ist 100 %.stroke-width: 0.5: Die Breite der Konturlinie ist auf 0,5 Einheiten eingestellt.
-
Animation: Die Animationen
draw und fillColor wurden so eingestellt, dass sie nacheinander den Kreis zeichnen und ihn dann rot füllen.
Verwendung von event.preventDefault()
In der Funktion loadSVG wird event.preventDefault() verwendet, um sicherzustellen, dass kein Neuladen der Seite erfolgt, wenn der Button geklickt wird.