Raphaël Quick Reference

This is not intended to be a definitive list of Raphaël features, or even all of the details of these features, just a quick reminder of the specific things we have seen in the course.

For more details, see the Raphaël Reference or maybe a Raphaël Tutorial.

Top-Level Raphaël Functions

This function creates an SVG on the page, and returns a Raphaël paper object representing it.

p = Raphael('fig', 400, 200) Create a 400×200 SVG image (and Raphaël paper object) in the element with id="fig".

Paper Objects

Each of these is a function in a paper object, which creates and returns a Raphaël “element”.

p.circle(50, 80, 15) Draw a circle centred at (50,80), with radius 15.
p.ellipse(50, 80, 10, 20) Draw an ellipse centred at (50,80), with horizontal-radius 10 and vertical-radius 20.
p.path('M10,20 L50,120 L80,40') Draw lines from (10,20) to (50,120) to (80,40).
p.path('M10,20 L50,120 L80,40 Z') Draw lines between the given points, and return to the start.
p.path('M10,20 T50,120 T80,40') Draw a smooth curve from (10,20) to (50,120) to (80,40).
p.path('M10,20 Q60,180 50,120') Draw a curve from (10,20) to (50,120) with (60,180) as the control point.
p.rect(80, 25, 18, 40) Draw a rectangle with top-left corner at (80,25), width 18, height 40.
p.text(40, 100, 'Hello world') Draw the text centred at (40,100).

Element Objects

Each of these operates on a Raphaël element.

e.animate(attribs, 2000) Animate from the element's current attributes to the given ones in 2 seconds.
e.attr(attribs) Change the element's attributes to the given ones.
e.click(handler) When the element is clicked, call handler().
e.rotate(30) Rotate the element 30° clockwise around its centre.
e.scale(1.5) Scale the element to 150% its original size.

Element Attributes

These can be set with the e.attr(…) function.

e.attr({'fill': '#f70'}) Set the fill colour for the shape.
e.attr({'font-family': 'sans-serif', 'font-size': '20px', 'font-weight': 'bold'}) Set properties of the font of a text element. Each works like the corresponding CSS property.
e.attr({'stroke': '#000'}) Set the colour of the stroke (outline).
e.attr({'stroke-width': '3'}) Width of the stroke (outline).
e.attr({'stroke-dasharray': '-'}) Make the stroke (outline) dashed (or dotted, etc).
e.attr({'transform': 'r30s2'}) Transform the element, in this case by rotating 30° and scaling 2 times.