Skip to main content


Showing posts from August, 2012

How to set the background colour of the paper in Raphael

I've started playing with the JavaScript SVG library RaphaelJS. It looks a really nice library but the very first hurdle I came across was how to set the background colour of the paper. There didn't seem to be any help in the documentation and trying 'paper.attr("fill", "#f00");' resulted in the error Uncaught TypeError: Object #<a> has no method 'attr'. A less than optimal solution might be to create a rectangle on the paper that is the same size as the paper and fill that with the desired colour. But then all objects would need to sit on top of that element and it just feels messy.Looking for a different approach I fired up developer tools in the browser and inspected the HTML, it was at this point I realised the solution was probably pretty simple. Using a style sheet and setting a CSS background colour for the <SVG> tag did exactly what I wanted; it sets the background colour nicely and doesn't need any additional el…