Plattformunabhängig Grafik und 3-D programmieren mit HTML 5

Helfer gefragt

Allerdings funktionieren die inzwischen beinahe unverzichtbaren Helfer beim Arbeiten mit der DOM-Schnittstelle und Javascript-Bibliotheken wie Jquery oder YUI, aber mit SVG nur begrenzt. Zwar klappt das Ansprechen einzelner Elemente, doch die SVG-Attribute sind nicht wie in HTML auf Strings beschränkt. Sie weisen eine Objektstruktur auf, mit der die für HTML konzipierten Javascript-Bibliotheken nichts anfangen können.

Für Jquery gibt es ein SVG-Plugin [15], das leider eine leichte Modifikation der Jquery-Basisbibliothek voraussetzt. Dafür lässt sich damit der XML-Code einer SVG-Grafik so verarbeiten, wie Webentwickler es von Jquery kennen.

Dass SVG im Internet noch immer eine nur geringe Rolle spielt, liegt vor allem an Microsoft: Erst der Internet Explorer 9 weist einen zudem noch recht lückenhaften SVG-Support auf (Abbildung 4). Zwei Workarounds sind verfügbar: Die von Google entwickelte Javascript-Bibliothek SVG Web verwandelt SVG-Grafiken in Flash-Objekte.

Abbildung 4: Mit dem Internet Explorer 9 (links) beginnt der SVG-Support bei Microsoft mit zehn Jahren Verspätung. Mangels Filterunterstützung fallen Grafiken – im Vergleich zu Firefox (rechts) – allerdings ein wenig schlicht aus. Besser soll das erst mit dem IE 10 werden.

Die ebenfalls in Javascript umgesetzte Zeichenbibliothek Rafaël [16] arbeitet nicht mit fertigen SVG-Dateien. Sie stellt Zeichenbefehle bereit, die sie je nach Browser entweder in SVG- oder dem vom Internet Explorer unterstützten proprietären VML umsetzt.

Das API von Rafaël lehnt sich an SVG an. Wer es beherrscht, kommt mit der Bibliothek sofort klar, der Einsteiger sogar schneller als beim direkten Umgang mit SVG: Rafaël stellt Hilfsfunktionen für Animationen und den Zugriff auf SVG-Elemente über die DOM-Schnittstelle des Browsers zur Verfügung. Das wichtigste Plus ist aber die Kompatibilität mit dem Internet Explorer 6 bis 9.

Zeichenkünstler Rafaël

Das Beispiel in Abbildung 5 zeigt die grundlegenden Fähigkeiten der Zeichenbibliothek und demonstriert, wie sich Inkscape als Hilfsmittel nutzen lässt. Die ersten Zeilen des Listings 2 enthalten den HTML-Kopf und binden Rafaël und Jquery ein. Letzteres ist für die Arbeit mit Rafaël nicht unbedingt nötig, doch Jquery erleichtert das Einrichten eines auf allen Browsern lauffähigen Event-Handlers (Zeile 54) und sorgt dafür, dass der Javascript-Code erst abläuft, wenn die DOM-Schnittstelle bereit ist (»$« -Funktion in Zeile 8).

Listing 2

Rafaël-Beispiel

01 <!DOCTYPE HTML>
02 <html>
03   <head>
04     <script type="text/javascript" src="raphael-min.js"></script>
05     <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
06     <script type="text/javascript">
07        //JQuery-Funktion zur Ausführung nach laden des Dokuments
08        $(function(){
09           //Farben, zwischen denen der Ball wechselt
10           var colors = ["#000", "#800", "#f00", "#f80", "#ff0"];
11           //Array-Zähler
12           var counter = 0, zoom = 1;
13
14           //Zeichenfläche 200x200 bei Position 50,50
15           var paper = Raphael(50, 50, 200, 200);
16           //Kreis an Position 40, 60, Radius 10
17           var circle = paper.circle(40, 60, 10);
18           //aus Inkscape kopierte Pfad-Definition
19           var path = paper.path("m 41.416257,61.90761 c 17.95308,-27.77874 " +
20               "56.06346,0.53741 56.06346,0.53741 0,0 38.055253,-28.20692 " +
21               "55.982363,-0.46836 34.96991,54.10886 -55.982363,112.02335 " +
22               "-55.982363,112.02335 0,0 -91.0840396,-57.90515 -56.06346,-112.0924 z");
23           //Rot für Füllung und Umriss
24           path.attr("fill", "#f00");
25           path.attr("stroke", "#f00");
26           //Text in der Mitte der Herzform
27           var text = paper.text(100, 100, "Please\nclick me!");
28           //Textfarbe Gelb
29           text.attr("fill", "#ff0");
30
31           //Animationen in Gang setzen
32           animateCircle();
33           colorChange();
34
35           //animiere den Ball alle 2000 ms neu
36           function animateCircle(){
37               //Rafaël-Methode für das Bewegen das Balls entlang path
38               circle.animateAlong(path, 2000, false);
39               //Timer neu setzen
40               setTimeout(animateCircle, 2000);
41           }
42
43           //ändere Farbe des Balls in zufälligen Zeitabständen
44           function colorChange(){
45               //Rafaël-Funktion verändert Element-Attribute
46               circle.attr("fill", colors[counter]);
47               //Elemente von Array colors hochzählen, ggf. zurück zu 0
48               counter = (counter < 5) ? ++counter : 0;
49               //Timer neu setzen
50               setTimeout(colorChange, Math.random()*50);
51           }
52
53           //Jquery-Click-Handler für das Herz
54           $(path.node).click(function(){
55               //> 1 -> mache kleiner und umgekehrt
56               zoom = (zoom > 0.95) ?
57                   zoom - 0.1:
58                   zoom + 0.1;
59               //animiere Herz-Skalierung mit Typ "bounce" (hin und her)
60               path.animate({scale:zoom}, 500, "bounce")
61           });
62        });
63     </script>
64   </head>
65   <body></body>
66 </html>