# 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.

Function/ExampleDescription
`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/ExampleDescription
`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/ExampleDescription
`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/ExampleDescription
`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.