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.
| Function/Example | Description |
|---|---|
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”.
| Function/Example | Description |
|---|---|
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.
| Function/Example | Description |
|---|---|
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.
| Function/Example | Description |
|---|---|
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. |