SVG mit Raphaël— Grundlagen des Einbaus

Zunächst muss man natürlich die Raphaël—JavaScript Bibliothek einbinden. Das geschieht zum Beispiel mit

<script src="/javascript/raphael-min.js"></script>

Wenn man noch mit der Entwicklung der Webseiten beschäftigt ist kann man natürlich auch die unkomprimierte Variante verwenden:

<script src="/javascript/raphael.js"></script>

Schließlich besteht auch noch die Möglichkeit, die Datei von einem Content Delivery Network abzurufen:

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>

Erstes kleines Beispiel

Auf der Raphaël-Website findet man das folgnde kleine Einführungsscript

// Zeichnungsfläche erstellen 320 × 200 Pixel groß, beginnend am Punkt mit den Koordinaten 10, 50
var paper = Raphael(10, 50, 320, 200);
// Kreis am Punkt x = 50, y = 40, mit den Radius 10 Pixel
var kreis = paper.circle(50, 40, 10);
// Kreisfüllung rot (#f00)
kreis.attr("fill", "#f00");
// Umrandung blau
kreis.attr("stroke", "#00f");

Man erkennt hier ganz schnell einen Nachteil: da der SVG-Code absolut positioniert im HTML-Baum unterhalb des body-Tags eingehängt wird, landet die Grafik, also der kleine rote Punkt, links oben in der Ecke der Webseite. Daher verwende ich in allen Beispielen eine alternative Methode.

Alternative Methode der Einbindung einer SVG-Grafik mit Raphaël

An geeigneter Stelle wird ein Platzhalter eingefügt:

<div id="zeichung"></div>

In diesen Platzhalter wird die SVG-Grafik eingehängt, in dem der Funktion zur Erzeugung der zeichnungsfläche an Stelle der Postionierungsparamter der Name (die ID) des HTML-Elementes mitgegeben wird, in die die SVG-Grafik eingehängt werden soll:

var paper = Raphael("zeichnung", 320, 200);

Das Grafikbeispiel

Mit dieser Methode wird nun das SVG-Objekt relativ zu dem angegebenen HTML-Objekt positioniert.

Quellcode

window.onload = function () {
// Zeichnungsfläche erstellen 320 × 200 Pixel groß und in Element mit ID Zeichnung
var paper = Raphael("zeichnung", 320, 200);
// Kreis am Punkt x = 50, y = 40, mit den Radius 10 Pixel
var kreis = paper.circle(50, 40, 10);
// Kreisfüllung rot (#f00)
kreis.attr("fill", "#f00");
// Umrandung blau
kreis.attr("stroke", "#00f");
}

Wie man sieht, wird der ganze Code in eine window.onload-Funktion eingebunden. Das ist deshalb notwendig, damit sicher gestellt ist, dass der Platzhalter-div zum Zeitpunkt der Ausführung des javaScripts im DOM-Baum verfügbar ist.