Verwendung von Inline-SVGs mit HTML5

() translation by (you can also view the original English article)

Es ist klar, dass SVG nicht so weit verbreitet ist, wie viele Leute in der Webentwicklungs-Community vielleicht glauben. Außer der Debatte werde ich in diesem Tutorial zeigen, wie man Inline-SVGs verwendet, eine Reihe von Techniken abdeckt und die Interaktion zwischen Webseite und Grafik untersucht. In Verbindung mit anderen neuen Standards in HTML5, JavaScript und CSS3 können Inline-SVGs die Benutzererfahrung erheblich verbessern.

Schritt 1: Erstellen Sie eine HTML5-Seite

Sie können mit den SVG-Elementen mithilfe von DOM-Techniken wie mit anderen Webseitenelementen interagieren.

In diesem Tutorial werden wir ein praktisches Beispiel für eine Inline-SVG durcharbeiten, indem wir eine einfache Komponente erstellen, die ein Plattendeck darstellt. Der Datensatz dreht sich und der Benutzer kann mit ihm interagieren - drücken, um ihn zu verlangsamen, und loslassen, um ihn wieder zu beschleunigen. Das SVG hat eine Schaltfläche, auf die Benutzer klicken können, um den Datensatz zu ändern, wodurch sich sein Erscheinungsbild geringfügig ändert. Die sichtbaren SVG-Elemente werden mit Verläufen und Schlagschattenfiltern erweitert.

Schauen Sie sich jetzt die Demo an, damit Sie eine klare Vorstellung davon haben, was wir bauen.

Wie Sie wissen, fallen Inline-SVGs unter die neuen HTML5-Standards, sodass der in diesem Lernprogramm verwendete Code nicht in allen Browsern vollständig unterstützt wird. Obwohl Inline-SVGs theoretisch in allen aktuellen Versionen der wichtigsten Browser unterstützt werden, werden die von uns verwendeten internen Animationen und interaktiven Effekte noch nicht so gut unterstützt. Das Endergebnis sollte in aktuellen Versionen von Firefox, Chrome und Opera ordnungsgemäß funktionieren. Stellen Sie bei HTML5-Techniken sicher, dass Sie sich bei Live-Sites, an denen Sie arbeiten, nicht auf diese Effekte verlassen, und geben Sie nach Möglichkeit Alternativen an.

Lassen Sie uns zunächst einen HTML5-Seitenumriss erstellen:

<!DOCTYPE html>
<html>
<head>
<script>

</script>
<style>

</style>
</head>
<body>

</body>
</html>

Einer der Hauptvorteile bei der Verwendung von SVG ist die Skalierbarkeit. Um dies auszunutzen, werden wir relative Werte verwenden, um den SVG-Inhalt zu definieren. Fügen Sie im Seitenkörper ein Containerelement für die SVG hinzu:

1	<div id="picHolder">
2
3	</div>

Fügen Sie dem Stilabschnitt in Ihrem Seitenkopf Folgendes hinzu, um zu sehen, wie sich die SVG-Datei im enthaltenen Element befindet:

1	#picHolder {background:#dedeff; border:1px solid #666666;}

Schritt 2: Fügen Sie das SVG-Element hinzu

Fügen Sie im Containerelement im Hauptteil Ihrer Seite die SVG-Elementkontur wie folgt hinzu:

<svg version="1.1"
     	baseProfile="full"
     	xmlns="https://www.w3.org/2000/svg" 
     	height="100%" width="100%">

</svg>

Wir haben die Breite und Höhe auf 100% festgelegt, da wir die Breite des enthaltenen Elements angeben werden. Anstatt die Dimensionen explizit anzugeben, verwenden wir stattdessen eine JavaScript-Funktion, um zu zeigen, wie einfach Sie das SVG nach oben und unten skalieren können. Sie können dem öffnenden SVG-Tag oder dem Stilabschnitt eine feste Breite und Höhe hinzufügen.

Schritt 3: Erstellen Sie die Definitionen

Die sichtbaren Formen in der Grafik werden im SVG-Element definiert. Vorher werden wir am Abschnitt defs arbeiten. Im Abschnitt defs platzieren Sie Definitionen, auf die Sie später beim Erstellen Ihrer Formen verweisen können. Der Abschnitt hat defs Definitionen für einige Verlaufsfüllungen und einige Schlagschatten. Fügen Sie diesen neuen Abschnitt im SVG-Element hinzu:

1	<defs>
2
3	</defs>

Die Elemente, die wir in diesem Abschnitt platzieren, werden nicht im Bild angezeigt, sondern als Füllungen und Filter für die entsprechenden Formen verwendet. Wir werden mehrere Verlaufsfüllungen einschließen; Lassen Sie uns also nacheinander jeden einzelnen durcharbeiten.

Farbverläufe

An erster Stelle steht ein linearer Gradient:

1	<linearGradient id="backGrad" x1="0%" y1="0%" x2="0%" y2="100%">
2	<stop offset="10%" style="stop-color:#990000; stop-opacity:1" />
3	<stop offset="90%" style="stop-color:#cccc00; stop-opacity:1" />
4	</linearGradient>

Dieser Farbverlauf wird als Füllung für den Hintergrundrechteckbereich angegeben. Die Attribute x1 und y1 stellen die Startpunkte des Gradienten innerhalb der gefüllten Form dar, wobei sich der Gradient von dort zu dem durch x2 und y2 dargestellten Punkt entfaltet. In diesem Fall verläuft der Verlauf von oben nach unten. Die Stoppelemente repräsentieren Farbpunkte im Verlauf. Der erste besagt, dass 10% vom Beginn des Verlaufs eine feste dunkelrote Farbe sind und der zweite Stopp, dass 90% vom Ende des Verlaufs eine gelbe Farbe sind. Zwischen diesen beiden Punkten verschmilzt der Farbverlauf die Farben miteinander. Beide Farben haben volle Deckkraft.

Danach fügen wir einen Verlauf für den Datensatz selbst hinzu. Dieser ist etwas komplexer - es ist ein radialer Farbverlauf mit mehreren Farbstopps:

<radialGradient id="recordGrad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
	<stop offset="30%" style="stop-color:#000000; stop-opacity:1" />
	<stop offset="35%" style="stop-color:#222222; stop-opacity:1" />
	<stop offset="45%" style="stop-color:#000000; stop-opacity:1" />
	<stop offset="85%" style="stop-color:#000000; stop-opacity:1" />
	<stop offset="95%" style="stop-color:#222222; stop-opacity:1" />
	<stop offset="100%" style="stop-color:#000000; stop-opacity:1" />
</radialGradient>

Ein radialer Gradient beginnt an der Innenseite des Kreises, wobei die innersten und äußersten Teile des Kreises durch cx, cy, fx und fy definiert sind und neben dem Radius aufgeführt sind. In diesem Fall nimmt der radiale Gradient die gesamte kreisförmige Aufzeichnungsform ein. Der Großteil der Aufzeichnung ist schwarz, wobei zwei Ringe mit etwas hellerer Farbe die glatteren Abschnitte in der Mitte der Aufzeichnung und ihren Rändern darstellen. Wir werden auch in der Mitte ein Etikett auf der Platte platzieren, sodass der erste hellere Farbfleck auf der Platte direkt außerhalb davon erscheint. Fügen Sie als nächstes die Beschriftungsverlaufsfüllung hinzu:

1	<linearGradient id="labelGrad0" x1="0%" y1="0%" x2="100%" y2="0%">
2	<stop offset="40%" style="stop-color:#000099; stop-opacity:1" />
3	<stop offset="60%" style="stop-color:#009900; stop-opacity:1" />
4	</linearGradient>

Dies ist ein einfacher linearer Verlauf, der als Füllung für das kreisförmige Plattenlabel verwendet wird. Beachten Sie jedoch, dass die Gradienten-ID am Ende eine Null hat. Dies liegt an der Tatsache, dass wir eine interaktive Funktion hinzufügen werden, die es dem Benutzer ermöglicht, "den Datensatz zu ändern". Eine JavaScript-Funktion wechselt zwischen verschiedenen Verlaufsfüllungen für das Beschriftungselement. Fügen Sie zu diesem Zweck weitere Farbverläufe hinzu:

<linearGradient id="labelGrad1" x1="0%" y1="0%" x2="100%" y2="0%">
	<stop offset="0%" style="stop-color:#990000; stop-opacity:1" />
	<stop offset="20%" style="stop-color:#ff6600; stop-opacity:1" />
	<stop offset="40%" style="stop-color:#cccc00; stop-opacity:1" />
	<stop offset="60%" style="stop-color:#009900; stop-opacity:1" />
	<stop offset="80%" style="stop-color:#000099; stop-opacity:1" />
	<stop offset="100%" style="stop-color:#990099; stop-opacity:1" />
</linearGradient>
        
<linearGradient id="labelGrad2" x1="0%" y1="0%" x2="100%" y2="0%">
	<stop offset="0%" style="stop-color:#330033; stop-opacity:1" />
	<stop offset="100%" style="stop-color:#cc00cc; stop-opacity:1" />
</linearGradient>

Die Farbverläufe haben jeweils eine ID, die mit einer inkrementierenden Ganzzahl endet, damit wir sie in JavaScript durchlaufen können. Definieren Sie nun einen weiteren Verlauf, um einen Glanzeffekt über dem Datensatz zu erzeugen:

<linearGradient id="shineGrad" x1="0%" y1="0%" x2="100%" y2="100%">
	<stop offset="35%" style="stop-color:#000000; stop-opacity:0" />
	<stop offset="50%" style="stop-color:#ffffff; stop-opacity:0.2" />
	<stop offset="65%" style="stop-color:#000000; stop-opacity:0" />
</linearGradient>

Diesmal verwendet der Farbverlauf undurchsichtige und alpha-transparente Farbstopps. Der Effekt ist ein subtiler Glanz auf der gesamten Platte. Schließlich benötigen wir eine metallische Füllung für den Knopf und die Spindel:

1	<radialGradient id="dialGrad" cx="50%" cy="60%" r="60%" fx="40%" fy="40%">
2	<stop offset="30%" style="stop-color:#cccccc;stop-opacity:1" />
3	<stop offset="100%" style="stop-color:#333333;stop-opacity:1" />
4	</radialGradient>

Diesmal ist der radiale Gradient leicht außermittig, um ein Gefühl von Tiefe und Licht zu erzeugen, das durch einen Schlagschattenfilter ergänzt wird.

Filter

Bevor wir mit dem Abschnitt defs fertig sind, fügen Sie ein paar Schlagschatten hinzu, um einigen Formen etwas mehr Tiefe zu verleihen:

1	<filter id="recordShadow" x="0" y="0" width="200%" height="200%">
2	<feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" />
3	<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
4	</filter>

Dieser wird hinter dem Aufnahmebereich erscheinen. Die Eigenschaften x, y, width und height beziehen sich mit diesem Filter auf die Position und die Abmessungen innerhalb der Form. Der Versatz definiert den Schatten relativ zur ursprünglichen Form. Die Unschärfe verhindert, dass die versetzte Form einfarbig ist, sodass sie als Schatten erscheint. In diesem Fall wird nur der Schatten angezeigt, nicht die Form selbst. Der Schatten wird durch eine bestimmte Form definiert, die hinter der Aufzeichnungsform platziert wird. Für die Benutzersteuerelemente, die kreisförmig und metallisch sind, möchten wir auch einen Schlagschatten, aber wir möchten, dass auch die Form selbst angezeigt wird:

<filter id="dialShadow" x="0" y="0" width="200%" height="200%">
	<feOffset result="offOut" in="SourceAlpha" dx="2" dy="2" />
	<feGaussianBlur result="blurOut" in="offOut" stdDeviation="1" />
	<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>

Dieser Hauptunterschied ist hier, abgesehen von der Skalierung des Schattens, das Mischelement, das die ursprüngliche Form beibehält und gleichzeitig den Schatten um ihn herum zeigt.

Schritt 4: Erstellen Sie die Formen

Das ist genug Vorbereitung; Lass uns mit der Grafik weitermachen! Jedes Element, das Sie dem Hauptteil der SVG hinzufügen, wird über den zuvor aufgelisteten Elementen angezeigt. Wir arbeiten also von unten nach oben, beginnend mit den Formen auf der Rückseite und endend mit denen auf der Vorderseite.

Hintergrundrechteck

Fügen Sie zunächst eine Rechteckform für den Hintergrund hinzu:

1	<rect width="90%" height="90%" x="5%" y="5%" fill="url(#backGrad)" />

Die Abmessungen und die Position des rect Elements werden relativ zum enthaltenden SVG angegeben. Wenn Sie sich erinnern, ist dies relativ zur Größe des enthaltenden Elements. Wir werden dies später in JavaScript einstellen. Wo immer möglich, werden relative Größen- und Positionswerte verwendet, damit das gesamte Bild sowie Animation und Interaktion bei Bedarf vergrößert oder verkleinert werden können. Beachten Sie, dass die Elementfüllung mithilfe des ID-Attributs einen der von uns definierten Verläufe angibt.

Schatten

Als nächstes wird von unten der Datensatzschatten mit einem der von uns erstellten Schlagschattenfilter angezeigt:

1	<circle cx="50%" cy="50%" r="33%" fill="#000000" filter="url(#recordShadow)" />

Der Schatten wird hinter der Aufzeichnung als kreisförmige Form mit einem Radius liegen, der ungefähr ein Drittel des dem Bild zugewiesenen Raums in der Mitte ausmacht. Da der Filter in diesem Fall keine Überblendung mit dem Bild anwendet, wird der Kreis selbst nicht angezeigt, sondern nur sein Schatten.

Aufzeichnung

Als nächstes kommt die Aufzeichnung selbst:

1	<circle cx="50%" cy="50%" r="33%" fill="url(#recordGrad)" />

Wie beim Schatten stellen die Attribute cx und cy die Mitte des Datensatzes dar, die horizontal und vertikal im Bild mit einem Radius von etwa einem Drittel zentriert ist. Wieder verwenden wir einen der von uns definierten Verläufe, die wir in jeder Form ausführen.

Etikette

Oben auf dem Datensatz befindet sich das Etikett. Fügen Sie es als Nächstes hinzu:

1	<circle id="recordLabel" cx="50%" cy="50%" r="10%" fill="url(#labelGrad0)" />

Der Beschriftungskreis hat den gleichen Mittelpunkt wie die Aufzeichnung, über den er sich etwa ein Drittel des Weges erstreckt. Wir beginnen mit der ersten der von uns definierten Beschriftungsverlaufsoptionen und implementieren später den Benutzerwechsel zwischen diesen Optionen. Wir fügen hier ein ID-Attribut ein, um auf dieses Element in JavaScript zu verweisen.

Scheinen

Lassen Sie uns nun etwas Glanz auf die Platte bringen:

1	<circle id="shine" cx="50%" cy="50%" r="32%" fill="url(#shineGrad)" />

Wenn sich die Schallplatte dreht, bewegt sie sich nur ein wenig nach rechts und nach unten, sodass der Glanz etwas kleiner als die Schallplatte bleibt, damit sie sich beim Bewegen nicht darüber hinaus auszubreiten scheint. Dieses Element verfügt auch über ein ID-Attribut zum Erkennen der Benutzerinteraktion.

Spindel

Fügen Sie der Vollständigkeit halber eine kleine Spindel in die Mitte der Aufzeichnung ein:

1	<circle cx="50%" cy="50%" r="1%" fill="url(#dialGrad)" filter="url(#dialShadow)" />

Diese Form verwendet den von uns erstellten metallischen Farbverlauf. Wir wenden auch den zweiten Schlagschattenfilter an, der das Mischen umfasst, sodass sowohl Form als auch Schatten angezeigt werden.

Taste

Last but not least benötigen wir eine kleine Schaltfläche, mit der Benutzer das Ändern des Datensatzes steuern können, indem sie dieselbe Füllung und denselben Filter wie die Spindel verwenden:

1	<circle cx="83%" cy="83%" r="3%" fill="url(#dialGrad)" filter="url(#dialShadow)">
2
3	</circle>

Dieses Mal trennen wir anstelle eines selbstschließenden Elements die Tags zum Öffnen und Schließen des Kreises. Dies liegt daran, dass wir die Schaltfläche animieren, wenn Benutzer darauf klicken, und den Animationseffekt zwischen diesen Tags einfügen. Beachten Sie, dass wir Füll- und Filterelemente aus dem Abschnitt defs wiederverwenden konnten. Hier ist das erste Erscheinungsbild der Grafik, sobald die Seitenabmessungen vorhanden sind:

Schritt 5: Animation hinzufügen

Jedes Element, das Sie dem Hauptteil der SVG hinzufügen, wird über den zuvor aufgelisteten Elementen angezeigt.

Jetzt haben wir unsere visuellen Elemente installiert. Fügen wir einige Animationen hinzu. Wir können den Datensatz mithilfe von SVG-Animationstransformationen drehen, die eine Erweiterung der SMIL-Animation darstellen. Diese animierten Effekte werden im SVG-Markup definiert. Ein Effekt gilt für jedes SVG-Element, in dem es angezeigt wird. Sie können CSS3-Transformationen für SVG-Elemente verwenden, aber die SMIL-basierten Alternativen bieten Ihnen ein höheres Maß an Kontrolle.

Wir werden zwei einfache Animationen einfügen: Der Datensatz wird sich drehen und die Schaltfläche wird sich ein wenig bewegen, wenn der Benutzer darauf klickt. Beginnen wir mit der etwas einfacheren Animation für die Schaltfläche.

Fügen Sie innerhalb des Schaltflächenformelements zwischen den von uns erstellten Tags zum Öffnen und Schließen des Kreises die Animationstransformation wie folgt hinzu:

<animateTransform 
	attributeType="XML"
	attributeName="transform" 
	type="translate"
	from="0, 0" to="1, 1"
	dur="0.1s" begin="click"
	repeatCount="1"
	/>

Die animateTransform gilt für ein XML-Attribut innerhalb des Elements, in dem es angezeigt wird. In diesem Fall handelt es sich um eine Übersetzungstransformation. Die Attribute from und to stellen die Start- und Endpositionen für das Element dar - diese sind relativ zu seiner Startposition, sodass sich die Schaltfläche um ein einzelnes Pixel nach rechts und unten bewegt. Die Transformation beginnt, wenn ein Benutzer klickt, über eine Zehntelsekunde vergeht und einmal ausgeführt wird. Die Schaltfläche kehrt nach Abschluss der Animation an ihre ursprüngliche Position zurück. Tipp: Um ein Element nach einer Animation an der Endposition zu halten, geben Sie fill="freeze" an.

Nun zum Drehen der Platte. Eine animateTransform gilt für ein SVG-Element, aber der Spin muss für mehr als ein Element gelten - speziell für den Datensatz und die Beschriftung (nicht für den Glanz oder den Schatten). Anstatt für jede Animation separate Animationen zu erstellen und diese gleichzeitig auszuführen, können wir eine einzelne Transformation verwenden, indem wir diese Elemente zusammenfassen. Fügen Sie vor dem Kreiselement, das den Datensatz darstellt (mit "recordGrad" als Füllung), ein öffnendes Gruppen-Tag hinzu:

<g>

Schließen Sie nach dem Kreis, der das Etikett darstellt, die Gruppe:

</g>

Fügen Sie nun die Transformation vor diesem schließenden Gruppen-Tag hinzu, damit sie für die gesamte Gruppe gilt:

<animateTransform id="spinTrans"
	attributeType="XML"
	attributeName="transform" 
	type="rotate" 
	by="360, 1, 1"
	dur="1s"
	repeatCount="indefinite"
	/>

Diesmal ist der animierte Effekt eine Rotationstransformation. Das Element dreht sich um 360 Grad. Um den Effekt zu verstärken, bewegt es sich bei jeder Drehung über einen Zeitraum von einer Sekunde um ein einzelnes Pixel nach rechts und unten und wiederholt sich auf unbestimmte Zeit. Diese Transformation enthält auch ein from-Attribut, da die Anfangsposition der zu drehenden Elemente angegeben werden muss. Wenn Sie diese Position nicht angeben, drehen sich die Elemente standardmäßig um den Punkt 0, 0. Derzeit können Sie diesen Attributen jedoch keine relativen (d. H. Prozentualen) Werte zuweisen, sondern nur feste Werte. Aus diesem Grund werden wir das from-Attribut festlegen, wenn wir die SVG-Dimensionen in JavaScript angeben.

Schritt 6: Interaktion hinzufügen

Lassen Sie uns nun unsere interaktiven Funktionen implementieren: Klicken Sie auf die Schaltfläche, um den Datensatz zu ändern, und drücken Sie auf den Datensatz, um ihn zu verlangsamen.

Ändern Sie den Datensatz

Fügen Sie zunächst im Skriptabschnitt Ihres Seitenkopfs diese Variablen hinzu, um die Etikettendesigns zu zählen und zu verfolgen:

1	//keep track of current record label
2	var currLabel = 0;
3	//alter this for a different number of labels
4	var numLabels = 3;

Fügen Sie nun innerhalb des Eröffnungs-Tags für das Kreiselement, das die Schaltfläche darstellt (zwischen den Tags befindet sich jetzt eine Animation), den folgenden Listener für Klickereignisse hinzu:

1	onclick="changeRecord()"

Fügen Sie im Abschnitt "Hauptskript" die Funktionsübersicht hinzu:

1	function changeRecord() {
2
3	}

Jedes Mal, wenn der Benutzer die Taste drückt, wechseln wir zum nächsten Etikett und zum ersten, wenn wir das letzte erreichen:

//move to next label
currLabel++;

//reset if at highest number
if (currLabel > numLabels - 1) currLabel = 0;

//set the fill attribute to the next gradient
document.getElementById("recordLabel").setAttribute("fill", "url(#labelGrad"+currLabel+")");

Die letzte Zeile hier zeigt, wie Sie mit den SVG-Elementen mithilfe von DOM-Techniken wie mit anderen Webseitenelementen interagieren können. Hier legen wir das fill attribut des Beschriftungskreiselements so fest, dass die nächste Verlaufsfüllung verwendet wird, wobei die Füll-ID angegeben wird.

Verlangsamen

Fügen Sie nun dem Datensatz-Shine-Element die folgenden Ereignisattribute hinzu (mit "ShineGrad" als Füllung), da wir Ereignisse mit der Maus nach unten und oben verwenden, um eine Verlangsamung und eine erneute Beschleunigung des Datensatzes auszulösen:

1	onmousedown="onRecord()" onmouseup="offRecord()"

Fügen Sie im Skriptabschnitt die Funktion hinzu, wenn ein Benutzer auf den Datensatz drückt:

1	//function called when user is pressing record
2	function onRecord() {
3
4	}

Innerhalb dieser Funktion können wir die Aufzeichnung drehende Animation verlangsamen, indem wir das Attribut animateTransform duration ändern. Wir ändern auch die Glanzopazität, um den Eindruck eines Herunterdrückens zu erwecken:

1	//slow the animation duration
2	document.getElementById("spinTrans").setAttribute("dur", "5s");
3	//decrease the shine opacity
4	document.getElementById("shine").style.opacity="0.7";

Wenn der Benutzer den Datensatz freigibt, soll die normale Geschwindigkeit und das normale Erscheinungsbild wiederhergestellt werden. Fügen Sie daher als Nächstes die Funktion "Maus hoch" hinzu:

//function called when user releases record
function offRecord() {
	//reset to normal speed
	document.getElementById("spinTrans").setAttribute("dur", "1s");

	//set opacity back to normal
	document.getElementById("shine").style.opacity="1.0";
}

Schritt 7: Geben Sie die Größe an

Wir können jetzt endlich die Gesamtgröße der SVG einstellen. Fügen Sie oben im Skriptabschnitt eine neue Variable hinzu:

1	//desired size of SVG
2	var size = 300;

Wir werden zunächst 300 Pixel für die Breite und Höhe der Grafik verwenden, aber Sie können dies jederzeit ändern. Definieren Sie im Skriptabschnitt eine Funktion zum Festlegen dieser Dimensionen:

//function to set SVG dimensions
function setSize() {
	//set css and transform size
	var holder = document.getElementById("picHolder");

	holder.style.height=size+"px";
	holder.style.width=size+"px";
	document.getElementById("spinTrans").setAttribute("from", "0, "+size/2+", "+size/2+"");
}

Wir setzen die Größe für das enthaltende div-Element. Nehmen Sie sich einen Moment Zeit, um sich die letzte Zeile dieser Funktion anzusehen. Da die Rotationstransformationsanimation keine relativen Prozentwerte verwenden kann, müssen wir das from-Element mithilfe der Größenvariablen festlegen (geteilt durch zwei für den Mittelpunkt des Datensatzes). Mit 300 als SVG-Größe würde die Transformation folgendermaßen mit festen Werten aussehen:

<animateTransform id="spinTrans"
	attributeType="XML"
	attributeName="transform" 
	type="rotate" 
	from="0, 150, 150"
	by="360, 1, 1"
	dur="1s"
	repeatCount="indefinite"
	/>

Wenn Sie feste Werte in Ihrer SVG verwenden möchten, können Sie dies tun. Wir verwenden diese Technik nur, um die Verwendung relativer Dimensionen zu demonstrieren. Rufen Sie abschließend diese Funktion am Ende des Skriptabschnitts auf:

1	window.addEventListener("DOMContentLoaded", setSize, false);

Abschluss

Unsere interaktive SVG-Animation ist jetzt fertig! Öffnen Sie Ihre Seite in einem unterstützenden Browser, um den Effekt anzuzeigen. Vergessen Sie nicht, mit dem Datensatz und der Schaltfläche zu interagieren. Versuchen Sie, die Größenvariable zu ändern, um zu sehen, wie sich alle SVG-Elemente anpassen, einschließlich der Animationen und Interaktionen.

Wenn Sie SVG weiter erforschen möchten, sollten Sie unter anderem Pfade, Text, Maskierung und Clipping berücksichtigen. Es gibt auch eine Reihe zusätzlicher Animationsoptionen, die berücksichtigt werden müssen. Natürlich werden diese Effekte momentan nicht für alle Benutzer funktionieren, aber hoffentlich bald...