O'Reilly logo

Learning Raphaël JS Vector Graphics by Damian Dawber

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Element attributes

The shapes that we have drawn can have fills, strokes, and a number of other attributes applied to them. When we create a shape, an Element object is returned. This object has an attr method that accepts a number of key-value pair attributes. In this section we will look at the various attributes that can be applied to our drawings using this method (see http://raphaeljs.com/reference.html#Element.attr).

Basic fills

In order give an element a background, we fill it using the fill attribute. For single-color fills, the format is that specified by the CSS specification (that is, #rrggbb or the #rgb shorthand, the rgb(r, g, b) string or a color keyword, for example, navy). To fill rectangles black, for example, we can write:

var rect ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required