Ich habe im Beitrag SVG in Webseiten dargelegt, welche Möglichkeiten es gibt, SVG-Dateien in eine Webseite einzubinden. Daneben gibt es aber noch eine weitere Möglichkeit, die so aussieht, dass man mittels JavaScript den SVG-Code erzeugt und in den DOM-Baum der HTML-Seite einbindet. Es gibt eine ganze Reihe von JavaScript-Bibliotheken, die diese Vorgehensweise unterstützen. Eine der ältesten und umfangreichsten dieser Bibiotheken ist Raphaël.
Raphaël ist eine JavaScript-Bibliothek für SVG-Inhalte. Diese JavaScriptdatei ist nicht gerade ein Leichtgewicht, die Entwicklerversion ist immerhin fast 300 kb groß und die verkleinerte Fassung bringt es auch auf fast 90 kb - gezippt sind es ca. 30 kb, aber Raphaël hat einiges zu bieten:
Mit Raphaël kann man sowohl statische SVG-Grafiken, also solche, in denen sich nichts bewegt, als auch SVG-Animationen erstellen. Ich fange bei den Beispielen mit einer statischen SVG-Grafik an.
Das Beispiel zeigt einen Kreis, eine Ellipse, ein Rechteck, einen Pfad als Smiley und einen Text. Das sind alles Elemente einer SVG-Grafik, denen neben den Grundangaben zur Position und Größe noch weitere Parameter übergeben wurden.
Der Quellcode für dieses Beispiel sieht so aus:
<!-- Raphael einbinden -->
<script src="raphael.js"></script>
<script>
// alles in onload, damit sichergestellt ist, dass Platzhalter zeichnung geladen ist
window.onload = function () {
// SVG-Zeichnungsfläche mit 640x480 Pixel im Element mit ID zeichnung erstellen
var paper = Raphael("zeichnung", 640, 480);
// Kreis bei x = 125, y = 240, mit Radius 60
var kreis = paper.circle(125, 240, 60);
// Eigenschaften des Kreises
kreis.attr({fill: "#ffff00", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5});
// Ellipse
var elli = paper.ellipse(125, 140, 80,40);
// Eigenschaften der Ellipse
elli.attr({fill: "#00ff00", stroke: "#00f", "stroke-width": 80, "stroke-opacity": 0.5});
// Text
var text = paper.text(280, 190, "Alles\nfrisch\ngezeichnet");
// Texteigenschaften
text.attr({"font-size": 20, fill: "#000", stroke: "#f00", "stroke-width": 3, "stroke-opacity": 0.5});
// Text transformieren
text.transform("t100,100r45t-100,0");
// Rechteck gleich mit Eigenschaften
paper.rect(220, 140, 80,40,5).attr({fill: "#00ff00", stroke: "#00f", "stroke-width": 20, "stroke-opacity": 0.5});
// Pfad - ein Smiley
paper.path("m182,290q36,25 73,0m-65,-49c0,-4 3,-7 7,-7c4,0 7,3 7,7c0,4 -3,7 -7,7c-4,0 -7,-3 -7,-7m43,0c0,-4 3,-7 7,-7c4,0 7,3 7,7c0,4 -3,7 -7,7c-4,0 -7,-3 -7,-7m-82,20,0c0,-37 30,-67 67,-67c37,0 67,30 67,67c0,37 -30,67 -67,67c-37,0 -67,-30 -67,-67zm0,0l0,0c0,-37 30,-67 67,-67c37,0 67,30 67,67c0,37 -30,67 -67,67c-37,0 -67,-30 -67,-67z").attr({"stroke-width": 5});
}
</script>
Ich hätte den Smiley auch einfacher darstellen können, mit 3 Kreisen und einem kurzen Pfad, aber die von mir gewählte Variante zeigt eindrucksvoller die Fähigkeiten des Pfad-Befehls (siehe auch SVG Pfade). Ich werde im Abschnitt SVG mit Raphaël Schritt für Schritt erklären, wie man Raphaël zur Erstellung von SVG-Grafiken nutzt.
Die Raphaël—JavaScript Library unterstützt auch Animationen mit SVG-Grafiken. Im Unterschied zu den im Abschnitt SVG Animationen erklärten Verfahren haben Animationen mit Raphaël den Vorteil, dass man sich um Browserkompatibiltäten keine Sorge machen muss.
Die SVG-Animation mit Raphaël zeigt einen roten Kreis, eine Art Button und daneben einen größeren grauen Kreis. Sobald man mit der Maus den roten Buttonkreis berührt, verfärbt dieser sich zu grün und der große graue Kreis verkleinert sich. Wenn man die Maus wegbewegt, wird der Button wieder rot.
<!-- Raphael einbinden -->
<script src="raphael.js"></script>
<script>
// alles in onload, damit sichergestellt ist, dass Platzhalter holder geladen ist
window.onload = function () {
// Initialisierung
var R = Raphael("holder", 640, 480);
// Großer Kreis der später animiert werden soll
var grosserkreis= R.circle(320, 240, 200).attr({fill: "#000", "fill-opacity": .5, "stroke-width": 5});
// Button als Set von Elementen
var butt1 = R.set();
// zwei übereinanderliegende Kreise mit unterschiedlichen Eigenschaften
butt1.push(R.circle(25, 25, 30).attr({stroke: "#ccc", fill: "#f00", "fill-opacity": .9, "stroke-width": 2}),
R.circle(25, 25, 30).attr({fill: "#fff","stroke-width": 1, opacity: .1}));
// Button verschieben
butt1.translate(10, 181);
// Button Mousereaktion zuordnen
// bei Mouseover andere Farbe, Umrandungsbreite, Fuellung etc. in 300 Millisekunden
butt1[1].mouseover(function () {
grosserkreis.animate({r:100, fill: "#0f0","stroke-width": 4, opacity: .9}, 300);
// bei Mouseover zweiten Kreis anpassen
}).mouseover(function () {
butt1[1].animate({fill: "#0f0","stroke-width": 4, opacity: .9}, 300);
// bei Mouseout zweiten Kreis wieder alte Eigenschaften
}).mouseout(function () {
butt1[1].animate({fill: "#fff","stroke-width": 1, opacity: .1}, 300);
});
};
</script>
<!-- der Platzhalter -->
<div id="holder"></div>
Ich werde im Abschnitt SVG mit Raphaël Schritt für Schritt erklären, wie man Raphaël zur Erstellung von SVG-Animationen nutzt.