Bei der Vorstellung der einzelnen SVG-Formen habe ich bewusst auf ein besonderes Styling der einzelen Objekte verzeichtet, um den Quellcode möglichst einfach und übersichtlich zu halten. Dager werden alle in Raphaël Formen gezeigten Formen nur mit den Standardvorgaben zur Linienstärke, Linien- und Füllfarbe sowie zu den Elementen der Schriftformatierung gezeigt, d.h. mit einer Linienstärke von 1px, schwarzer Linie, ohne Füllung usw. Bei der tatsächlichen Nutzung von Rapahel zur Darstellung von SVG-Elementen möchte man jedoch in den meisten Fällen mit grafisch ansprechenden Formen arbeiten. Hierzu stellt Raphael die attr-Funktion bereit.
// Zeichnungsflaeche 320x100 Pixel in div agrundlageneins erzeugen
var paper = Raphael("agrundlageneins", 320, 100);
// Quadrat mit 50 Pixel
var rechteck = paper.rect(20,20,50,50);
// Füllung rot (#f00)
rechteck.attr("fill", "#f00");
Das Objekt sieht dann so aus:
Man kann die diese Vorgehensweise dahingehend verkürzen, dass man die Attributzuweisung gleich an die Funktion zur Erzeugung des Objektes anhängt, also:
// Quadrat mit 50 Pixel und innen gelb
var rechteck = paper.rect(20,20,50,50).attr("fill", "#ff0");
Will man 2 oder mehr Attribute zuweisen, dann kann man dies ganz ausführlich so tun:
// Zeichnungsflaeche 320x100 Pixel in div agrundlagendrei erzeugen
var paper = Raphael("agrundlagendrei", 320, 100);
// Quadrat mit 50 Pixel
var rechteck = paper.rect(20,20,50,50);
// Füllung violett (#f0f)
rechteck.attr("fill", "#f0f");
// Linienstärke Umrandung 5 Pixel
rechteck.attr("stroke-width", 5);
Man kann die Attributzuweisung aber auch in einem Array zusammenfassen:
rechteck.attr({"fill": "#f0f" , "stroke-width": 5 });
...oder eben auch gleich bei der Erzeugung des Objektes alle Attribute anhängen:
var rechteck = paper.rect(20,20,50,50).attr({"fill": "#f0f" , "stroke-width": 5 });
In alle drei Fällen erhält man dieses gestylte Quadrat:
Obwohl nicht alle Attribute für alle Elementtypen relevent sind und die Gesamtübersicht anfangs etwas erschlagend wirkt hier zunächst eine Übersicht zu allen verfügbaren Attributen:
arrow-end legt fest, wird das Ende eines Pfades aussehen soll, mögliche Werte sind classic, block, open, oval, diamond und none, außerdem können durch erweiterete Werte noch Länge und Dicke festgelgt werden.arrow-start legt fest, wird das Ende eines Pfades aussehen soll, mögliche Werte wie arrow-endclip-rect legt einen Clippingbereich festcursorstring CSS Typ des Cursorscxcyfill Legt eine Farbe oder Gradienten oder ein Bild für die Füllung festfill-opacity Deckungsgrad für die Füllungfont Schriftparameterfont-family Schriftartfont-size Schriftgrößefont-weight Schriftgewichtheighthref URL, wenn das angegebene Element sich wie ein Hyperlink verhältopacity Deckungsgrad allgemeinpathrrxrysrc URL zu einer Bilddatei, nur für das image-Elementstroke Farbe von Linienstroke-dasharray - Linienmusterstroke-linecap Form der Linienendenstroke-linejoinstroke-miterlimitstroke-opacity Deckungsgrad für Linienstroke-width Linienstärketarget nur bei hreftexttext-anchortitle erzeugt einen Tooltiptransformwidthxy