Creates an element on paper with a given name and no attributes

Returns: Element the current element

Usage

var c = paper.circle(10, 10, 10); // is the same as...
var c = paper.el("circle").attr({
    cx: 10,
    cy: 10,
    r: 10
});
// and the same as
var c = paper.el("circle", {
    cx: 10,
    cy: 10,
    r: 10
});

Draws a rectangle

Returns: object the rect element

Usage

// regular rectangle
var c = paper.rect(10, 10, 50, 50);
// rectangle with rounded corners
var c = paper.rect(40, 40, 50, 50, 10);

Draws a circle

Returns: object the circle element

Usage

var c = paper.circle(50, 50, 40);

Places an image on the surface

Returns: object the image element

or

Returns: object Snap element object with type image

Usage

var c = paper.image("apple.png", 10, 10, 80, 80);

Draws an ellipse

Returns: object the ellipse element

Usage

var c = paper.ellipse(50, 50, 40, 20);

Creates a <path> element using the given string as the path's definition

Path string consists of one-letter commands, followed by comma seprarated arguments in numerical form. Example:

"M10,20L30,40"

This example features two commands: M, with arguments (10, 20) and L with arguments (30, 40). Uppercase letter commands express coordinates in absolute terms, while lowercase commands express them in relative terms from the most recently declared coordinates.

Here is short list of commands available, for more details see SVG path string format or article about path strings at MDN.

Usage

var c = paper.path("M10 10L90 90");
// draw a diagonal line:
// move to 10,10, line to 90,90

Creates a group element

Returns: object the g element

Usage

var c1 = paper.circle(),
    c2 = paper.rect(),
    g = paper.g(c2, c1); // note that the order of elements is different

or

var c1 = paper.circle(),
    c2 = paper.rect(),
    g = paper.g();
g.add(c2, c1);

See Paper.g

Creates a nested SVG element.

Returns: object the svg element

Equivalent in behaviour to Paper.g, except it’s a mask.

Returns: object the mask element

Equivalent in behaviour to Paper.g, except it’s a pattern.

Returns: object the pattern element

Creates a <use> element.

or

Returns: object the use element

Creates a <symbol> element.

Returns: object the symbol element

Draws a text string

Returns: object the text element

Usage

var t1 = paper.text(50, 50, "Snap");
var t2 = paper.text(50, 50, ["S","n","a","p"]);
// Text path usage
t1.attr({textpath: "M10,10L100,100"});
// or
var pth = paper.path("M10,10L100,100");
t1.attr({textpath: pth});

Draws a line

Returns: object the line element

Usage

var t1 = paper.line(50, 50, 100, 100);

Draws a polyline

or

Returns: object the polyline element

Usage

var p1 = paper.polyline([10, 10, 100, 100]);
var p2 = paper.polyline(10, 10, 100, 100);

Draws a polygon. See Paper.polyline

Creates a gradient element

Gradient Descriptor

The gradient descriptor is an expression formatted as follows: <type>(<coords>)<colors>. The <type> can be either linear or radial. The uppercase L or R letters indicate absolute coordinates offset from the SVG surface. Lowercase l or r letters indicate coordinates calculated relative to the element to which the gradient is applied. Coordinates specify a linear gradient vector as x1, y1, x2, y2, or a radial gradient as cx, cy, r and optional fx, fy specifying a focal point away from the center of the circle. Specify <colors> as a list of dash-separated CSS color values. Each color may be followed by a custom offset value, separated with a colon character.

Examples

Linear gradient, relative from top-left corner to bottom-right corner, from black through red to white:

var g = paper.gradient("l(0, 0, 1, 1)#000-#f00-#fff");

Linear gradient, absolute from (0, 0) to (100, 100), from black through red at 25% to white:

var g = paper.gradient("L(0, 0, 100, 100)#000-#f00:25-#fff");

Radial gradient, relative from the center of the element with radius half the width, from black to white:

var g = paper.gradient("r(0.5, 0.5, 0.5)#000-#fff");

To apply the gradient:

paper.circle(50, 50, 40).attr({
    fill: g
});

Returns: object the gradient element

Returns SVG code for the Paper

Returns: string SVG code for the Paper

Returns SVG code for the Paper as Data URI string.

Returns: string Data URI string

Removes all child nodes of the paper, except <defs>.

Creates a <filter> element

Returns: object Element

Note: It is recommended to use filters embedded into the page inside an empty SVG element.

Usage

var f = paper.filter(''),
    c = paper.circle(10, 10, 10).attr({
        filter: f
    });