Reputation:
I want to set the background color to a specific color. I use the following code:
//JavaScript Code
var paper = Raphael(200, 350, 320, 200);
paper.attr("fill", "#f00");
Somehow, this code doesn't work. Please help, how can I set the background color of paper?
Upvotes: 10
Views: 5518
Reputation: 8791
See the answer below for a better way, but you can make a rectangle that fills the whole canvas area:
var paper = Raphael(200, 350, 320, 200);
var rect = paper.rect(0, 0, 320, 200);
rect.attr("fill", "#f00");
rect.attr("stroke", "#f00");
Upvotes: 3
Reputation: 4433
Actually, it is entirely possible to set the background color for an SVG canvas -- the caveat here is that, though Raphael controls all of the elements inside the canvas, it offers very little stylistic control directly over the canvas itself.
Fortunately, you can get access to the dom node associated with a Raphael paper object through its canvas property. That makes it easy to do things like this:
var paper = Raphael(200, 350, 320, 200);
paper.canvas.style.backgroundColor = '#F00';
Better yet, you could define your canvas background/border/padding as part of your application's stylesheet, and then just make sure the canvas is set to use the appropriate style:
var paper = Raphael(200, 350, 320, 200);
paper.canvas.className += ' my_svg_class';
Upvotes: 26