Bearbeiten Sie Leinwand Hintergrundfarbe in Raphael mit variablen Papier

Question

Ich möchte die Hintergrundfarbe auf eine bestimmte Farbe einstellen. Ich benutze den folgenden Code:

//JavaScript Code 
var paper = Raphael(200, 350, 320, 200); 
paper.attr("fill", "#f00"); 

Irgendwie funktioniert dieser Code nicht. Bitte helfen Sie mir, wie kann ich die Hintergrundfarbe des Papiers einstellen?

Answer 1

Siehe Antwort unten für eine bessere Art und Weise, aber Sie können ein Rechteck bilden, das die ganze Leinwand Bereich füllt:

var paper = Raphael(200, 350, 320, 200); 
var rect = paper.rect(0, 0, 320, 200); 
rect.attr("fill", "#f00"); 
rect.attr("stroke", "#f00"); 

Answer 2

Eigentlich ist es durchaus möglich, die Hintergrundfarbe für eine SVG-Leinwand gesetzt - Der Vorbehalt hier ist, dass, obwohl Raphael alle Elemente innerhalb der Leinwand steuert, es sehr wenig stilistische Kontrolle direkt über der Leinwand selbst bietet.

Glücklicherweise können Sie Zugriff auf den Dom-Knoten, der mit einem Raphael-Papierobjekt verknüpft ist, über seine Leinwand-Eigenschaft erhalten. Das macht es einfach, solche Dinge zu tun:

var paper = Raphael(200, 350, 320, 200); 
paper.canvas.style.backgroundColor = '#F00'; 

Noch besser wäre es, könnten Sie Ihr Leinwand-Hintergrund/Grenze/padding als Teil Ihrer Anwendung Sheet definieren und dann nur sicherstellen, dass die Leinwand gesetzt, um die entsprechenden verwenden Stil:

var paper = Raphael(200, 350, 320, 200); 
paper.canvas.className += ' my_svg_class';