Snap.svg API Reference

### Snap(…)⚓➭

Creates a drawing surface or wraps existing SVG element.

### Parameters

1. width number string width of surface
2. height number string height of surface

or

### Parameters

1. DOM SVGElement element to be wrapped into Snap structure

or

### Parameters

1. array array array of elements (will return set of elements)

or

### Parameters

1. query string CSS query selector

Returns: object Element

### Snap.format(token, json)⚓➭

Replaces construction of type `{<name>}` to the corresponding argument

### Parameters

1. token string string to format
2. json object object which properties are used as a replacement

Returns: string formatted string

### Usage

    // this draws a rectangular shape equivalent to "M10,20h40v50h-40z"
    paper.path(Snap.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width']}z", {
        x: 10,
        y: 20,
        dim: {
            width: 40,
            height: 50,
            "negative width": -40
        }
    }));

### Snap.rad(deg)⚓➭

Transform angle to radians

### Parameters

1. deg number angle in degrees

Returns: number angle in radians

### Snap.deg(rad)⚓➭

Transform angle to degrees

### Parameters

1. rad number angle in radians

Returns: number angle in degrees

### Snap.sin(angle)⚓➭

Equivalent to `Math.sin()` only works with degrees, not radians.

### Parameters

1. angle number angle in degrees

Returns: number sin

### Snap.tan(angle)⚓➭

Equivalent to `Math.tan()` only works with degrees, not radians.

### Parameters

1. angle number angle in degrees

Returns: number tan

### Snap.cos(angle)⚓➭

Equivalent to `Math.cos()` only works with degrees, not radians.

### Parameters

1. angle number angle in degrees

Returns: number cos

### Snap.asin(num)⚓➭

Equivalent to `Math.asin()` only works with degrees, not radians.

### Parameters

1. num number value

Returns: number asin in degrees

### Snap.acos(num)⚓➭

Equivalent to `Math.acos()` only works with degrees, not radians.

### Parameters

1. num number value

Returns: number acos in degrees

### Snap.atan(num)⚓➭

Equivalent to `Math.atan()` only works with degrees, not radians.

### Parameters

1. num number value

Returns: number atan in degrees

### Snap.atan2(num)⚓➭

Equivalent to `Math.atan2()` only works with degrees, not radians.

### Parameters

1. num number value

Returns: number atan2 in degrees

### Snap.angle(x1, y1, x2, y2, [x3], [y3])⚓➭

Returns an angle between two or three points

### Parameters

1. x1 number x coord of first point
2. y1 number y coord of first point
3. x2 number x coord of second point
4. y2 number y coord of second point
5. x3 number x coord of third point
6. y3 number y coord of third point

Returns: number angle in degrees

### Snap.len(x1, y1, x2, y2)⚓➭

Returns distance between two points

### Parameters

1. x1 number x coord of first point
2. y1 number y coord of first point
3. x2 number x coord of second point
4. y2 number y coord of second point

Returns: number distance

### Snap.len2(x1, y1, x2, y2)⚓➭

Returns squared distance between two points

### Parameters

1. x1 number x coord of first point
2. y1 number y coord of first point
3. x2 number x coord of second point
4. y2 number y coord of second point

Returns: number distance

### Snap.closestPoint(path, x, y)⚓➭

Returns closest point to a given one on a given path.

### Parameters

1. path Element path element
2. x number x coord of a point
3. y number y coord of a point

Returns: object in format

### Snap.is(o, type)⚓➭

Handy replacement for the `typeof` operator

### Parameters

1. o … any object or primitive
2. type string name of the type, e.g., `string`, `function`, `number`, etc.

Returns: boolean `true` if given value is of given type

### Snap.snapTo(values, value, [tolerance])⚓➭

Snaps given value to given grid

### Parameters

1. values array number given array of values or step of the grid
2. value number value to adjust
3. tolerance number maximum distance to the target value that would trigger the snap. Default is `10`.

Returns: number adjusted value

### Snap.getRGB(color)⚓➭

Parses color string as RGB object

### Parameters

1. color string color string in one of the following formats:

- Color name (`red`, `green`, `cornflowerblue`, etc)
- #••• — shortened HTML color: (`#000`, `#fc0`, etc.)
- #•••••• — full length HTML color: (`#000000`, `#bd2300`)
- rgb(•••, •••, •••) — red, green and blue channels values: (`rgb(200, 100, 0)`)
- rgba(•••, •••, •••, •••) — also with opacity
- rgb(•••%, •••%, •••%) — same as above, but in %: (`rgb(100%, 175%, 0%)`)
- rgba(•••%, •••%, •••%, •••%) — also with opacity
- hsb(•••, •••, •••) — hue, saturation and brightness values: (`hsb(0.5, 0.25, 1)`)
- hsba(•••, •••, •••, •••) — also with opacity
- hsb(•••%, •••%, •••%) — same as above, but in %
- hsba(•••%, •••%, •••%, •••%) — also with opacity
- hsl(•••, •••, •••) — hue, saturation and luminosity values: (`hsb(0.5, 0.25, 0.5)`)
- hsla(•••, •••, •••, •••) — also with opacity
- hsl(•••%, •••%, •••%) — same as above, but in %
- hsla(•••%, •••%, •••%, •••%) — also with opacity

Note that `%` can be used any time: `rgb(20%, 255, 50%)`.

Returns: object RGB object in the following format:

1. {
   1. r number red,
   2. g number green,
   3. b number blue,
   4. hex string color in HTML/CSS format: #••••••,
   5. error boolean true if string can't be parsed
2. }

### Snap.hsb(h, s, b)⚓➭

Converts HSB values to a hex representation of the color

### Parameters

1. h number hue
2. s number saturation
3. b number value or brightness

Returns: string hex representation of the color

### Snap.hsl(h, s, l)⚓➭

Converts HSL values to a hex representation of the color

### Parameters

1. h number hue
2. s number saturation
3. l number luminosity

Returns: string hex representation of the color

### Snap.rgb(r, g, b)⚓➭

Converts RGB values to a hex representation of the color

### Parameters

1. r number red
2. g number green
3. b number blue

Returns: string hex representation of the color

### Snap.color(clr)⚓➭

Parses the color string and returns an object featuring the color's component values

### Parameters

1. clr string color string in one of the supported formats (see Snap.getRGB)

Returns: object Combined RGB/HSB object in the following format:

1. {
   1. r number red,
   2. g number green,
   3. b number blue,
   4. hex string color in HTML/CSS format: #••••••,
   5. error boolean `true` if string can't be parsed,
   6. h number hue,
   7. s number saturation,
   8. v number value (brightness),
   9. l number lightness
2. }

### Snap.hsb2rgb(h, s, v)⚓➭

Converts HSB values to an RGB object

### Parameters

1. h number hue
2. s number saturation
3. v number value or brightness

Returns: object RGB object in the following format:

1. {
   1. r number red,
   2. g number green,
   3. b number blue,
   4. hex string color in HTML/CSS format: #••••••
2. }

### Snap.hsl2rgb(h, s, l)⚓➭

Converts HSL values to an RGB object

### Parameters

1. h number hue
2. s number saturation
3. l number luminosity

Returns: object RGB object in the following format:

1. {
   1. r number red,
   2. g number green,
   3. b number blue,
   4. hex string color in HTML/CSS format: #••••••
2. }

### Snap.rgb2hsb(r, g, b)⚓➭

Converts RGB values to an HSB object

### Parameters

1. r number red
2. g number green
3. b number blue

Returns: object HSB object in the following format:

1. {
   1. h number hue,
   2. s number saturation,
   3. b number brightness
2. }

### Snap.rgb2hsl(r, g, b)⚓➭

Converts RGB values to an HSL object

### Parameters

1. r number red
2. g number green
3. b number blue

Returns: object HSL object in the following format:

1. {
   1. h number hue,
   2. s number saturation,
   3. l number luminosity
2. }

### Snap.parsePathString(pathString)⚓➭

Utility method Parses given path string into an array of arrays of path segments

### Parameters

1. pathString string array path string or array of segments (in the last case it is returned straight away)

Returns: array array of segments

### Snap.parseTransformString(TString)⚓➭

Utility method Parses given transform string into an array of transformations

### Parameters

1. TString string array transform string or array of transformations (in the last case it is returned straight away)

Returns: array array of transformations

### Snap.select(query)⚓➭

Wraps a DOM element specified by CSS selector as Element

### Parameters

1. query string CSS selector of the element

Returns: Element the current element

### Snap.selectAll(query)⚓➭

Wraps DOM elements specified by CSS selector as set or array of Element

### Parameters

1. query string CSS selector of the element

Returns: Element the current element

### Element.node()⚓➭

Gives you a reference to the DOM object, so you can assign event handlers or just mess around.

### Usage

    // draw a circle at coordinate 10,10 with radius of 10
    var c = paper.circle(10, 10, 10);
    c.node.onclick = function () {
        c.attr("fill", "red");
    };

### Element.type()⚓➭

SVG tag name of the given element.

### Element.attr(…)⚓➭

Gets or sets given attributes of the element.

### Parameters

1. params object contains key-value pairs of attributes you want to set

or

### Parameters

1. param string name of the attribute

Returns: Element the current element

or

Returns: string value of attribute

### Usage

    el.attr({
        fill: "#fc0",
        stroke: "#000",
        strokeWidth: 2, // CamelCase...
        "fill-opacity": 0.5, // or dash-separated names
        width: "*=2" // prefixed values
    });
    console.log(el.attr("fill")); // #fc0

Prefixed values in format `"+=10"` supported. All four operations (`+`, `-`, `*` and `/`) could be used. Optionally you can use units for `+` and `-`: `"+=2em"`.

### Snap.parse(svg)⚓➭

Parses SVG fragment and converts it into a Fragment

### Parameters

1. svg string SVG string

Returns: Fragment the Fragment

### Snap.fragment(varargs)⚓➭

Creates a DOM fragment from a given list of elements or strings

### Parameters

1. varargs … SVG string

Returns: Fragment the Fragment

### Paper.el(name, attr)⚓➭

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

### Parameters

1. name string tag name
2. attr object 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
    });

### Element.children()⚓➭

Returns array of all the children of the element.

Returns: array array of Elements

### Element.toJSON()⚓➭

Returns object representation of the given element and all its children.

Returns: object in format

1. {
   1. type string this.type,
   2. attr object attributes map,
   3. childNodes array optional array of children in the same format
2. }

### Snap.ajax(…)⚓➭

Simple implementation of Ajax

### Parameters

1. url string URL
2. postData object string data for post request
3. callback function callback
4. scope object scope of callback

or

### Parameters

1. url string URL
2. callback function callback
3. scope object scope of callback

Returns: XMLHttpRequest the XMLHttpRequest object, just in case

### Snap.load(url, callback, [scope])⚓➭

Loads external SVG file as a Fragment (see Snap.ajax for more advanced AJAX)

### Parameters

1. url string URL
2. callback function callback
3. scope object scope of callback

### Snap.getElementByPoint(x, y)⚓➭

Returns you topmost element under given point.

Returns: object Snap element object

### Parameters

1. x number x coordinate from the top left corner of the window
2. y number y coordinate from the top left corner of the window

### Usage

    Snap.getElementByPoint(mouseX, mouseY).attr({stroke: "#f00"});

### Snap.plugin(f)⚓➭

Let you write plugins. You pass in a function with five arguments, like this:

    Snap.plugin(function (Snap, Element, Paper, global, Fragment) {
        Snap.newmethod = function () {};
        Element.prototype.newmethod = function () {};
        Paper.prototype.newmethod = function () {};
    });

Inside the function you have access to all main objects (and their prototypes). This allow you to extend anything you want.

### Parameters

1. f function your plugin body

### Element.getBBox()⚓➭

Returns the bounding box descriptor for the given element

Returns: object bounding box descriptor:

1. {
   1. cx: number x of the center,
   2. cy: number x of the center,
   3. h: number height,
   4. height: number height,
   5. path: string path command for the box,
   6. r0: number radius of a circle that fully encloses the box,
   7. r1: number radius of the smallest circle that can be enclosed,
   8. r2: number radius of the largest circle that can be enclosed,
   9. vb: string box as a viewbox command,
   10. w: number width,
   11. width: number width,
   12. x2: number x of the right side,
   13. x: number x of the left side,
   14. y2: number y of the bottom edge,
   15. y: number y of the top edge
2. }

### Element.transform(tstr)⚓➭

Gets or sets transformation of the element

### Parameters

1. tstr string transform string in Snap or SVG format

Returns: Element the current element

or

Returns: object transformation descriptor:

1. {
   1. string string transform string,
   2. globalMatrix Matrix matrix of all transformations applied to element or its parents,
   3. localMatrix Matrix matrix of transformations applied only to the element,
   4. diffMatrix Matrix matrix of difference between global and local transformations,
   5. global string global transformation as string,
   6. local string local transformation as string,
   7. toString function returns `string` property
2. }

### Element.parent()⚓➭

Returns the element's parent

Returns: Element the parent element

### Element.append(el)⚓➭

Appends the given element to current one

### Parameters

1. el Element Set element to append

Returns: Element the parent element

### Element.add()⚓➭

See Element.append

### Element.appendTo(el)⚓➭

Appends the current element to the given one

### Parameters

1. el Element parent element to append to

Returns: Element the child element

### Element.prepend(el)⚓➭

Prepends the given element to the current one

### Parameters

1. el Element element to prepend

Returns: Element the parent element

### Element.prependTo(el)⚓➭

Prepends the current element to the given one

### Parameters

1. el Element parent element to prepend to

Returns: Element the child element

### Element.before(el)⚓➭

Inserts given element before the current one

### Parameters

1. el Element element to insert

Returns: Element the parent element

### Element.after(el)⚓➭

Inserts given element after the current one

### Parameters

1. el Element element to insert

Returns: Element the parent element

### Element.insertBefore(el)⚓➭

Inserts the element after the given one

### Parameters

1. el Element element next to whom insert to

Returns: Element the parent element

### Element.insertAfter(el)⚓➭

Inserts the element after the given one

### Parameters

1. el Element element next to whom insert to

Returns: Element the parent element

### Element.remove()⚓➭

Removes element from the DOM

Returns: Element the detached element

### Element.select(query)⚓➭

Gathers the nested Element matching the given set of CSS selectors

### Parameters

1. query string CSS selector

Returns: Element result of query selection

### Element.selectAll(query)⚓➭

Gathers nested Element objects matching the given set of CSS selectors

### Parameters

1. query string CSS selector

Returns: Set array result of query selection

### Element.asPX(attr, [value])⚓➭

Returns given attribute of the element as a `px` value (not %, em, etc.)

### Parameters

1. attr string attribute name
2. value string attribute value

Returns: Element result of query selection

### Element.use()⚓➭

Creates a `<use>` element linked to the current element

Returns: Element the `<use>` element

### Element.clone()⚓➭

Creates a clone of the element and inserts it after the element

Returns: Element the clone

### Element.toDefs()⚓➭

Moves element to the shared `<defs>` area

Returns: Element the element

### Element.toPattern(x, y, width, height)⚓➭

Creates a `<pattern>` element from the current element To create a pattern you have to specify the pattern rect:

### Parameters

1. x string number
2. y string number
3. width string number
4. height string number

Returns: Element the `<pattern>` element

You can use pattern later on as an argument for `fill` attribute:

    var p = paper.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({
            fill: "none",
            stroke: "#bada55",
            strokeWidth: 5
        }).pattern(0, 0, 10, 10),
        c = paper.circle(200, 200, 100);
    c.attr({
        fill: p
    });

### Element.marker(x, y, width, height, refX, refY)⚓➭

Creates a `<marker>` element from the current element To create a marker you have to specify the bounding rect and reference point:

### Parameters

1. x number
2. y number
3. width number
4. height number
5. refX number
6. refY number

Returns: Element the `<marker>` element

You can specify the marker later as an argument for `marker-start`, `marker-end`, `marker-mid`, and `marker` attributes. The `marker` attribute places the marker at every point along the path, and `marker-mid` places them at every point except the start and end.

### Snap.animation(attr, duration, [easing], [callback])⚓➭

Creates an animation object

### Parameters

1. attr object attributes of final destination
2. duration number duration of the animation, in milliseconds
3. easing function one of easing functions of mina or custom one
4. callback function callback function that fires when animation ends

Returns: object animation object

### Element.inAnim()⚓➭

Returns a set of animations that may be able to manipulate the current element

Returns: object in format:

1. {
   1. anim object animation object,
   2. mina object mina object,
   3. curStatus number 0..1 — status of the animation: 0 — just started, 1 — just finished,
   4. status function gets or sets the status of the animation,
   5. stop function stops the animation
2. }

### Snap.animate(from, to, setter, duration, [easing], [callback])⚓➭

Runs generic animation of one number into another with a caring function

### Parameters

1. from number array number or array of numbers
2. to number array number or array of numbers
3. setter function caring function that accepts one number argument
4. duration number duration, in milliseconds
5. easing function easing function from mina or custom
6. callback function callback function to execute when animation ends

Returns: object animation object in mina format

1. {
   1. id string animation id, consider it read-only,
   2. duration function gets or sets the duration of the animation,
   3. easing function easing,
   4. speed function gets or sets the speed of the animation,
   5. status function gets or sets the status of the animation,
   6. stop function stops the animation
2. }

    var rect = Snap().rect(0, 0, 10, 10);
    Snap.animate(0, 10, function (val) {
        rect.attr({
            x: val
        });
    }, 1000);
    // in given context is equivalent to
    rect.animate({x: 10}, 1000);

### Element.stop()⚓➭

Stops all the animations for the current element

Returns: Element the current element

### Element.animate(attrs, duration, [easing], [callback])⚓➭

Animates the given attributes of the element

### Parameters

1. attrs object key-value pairs of destination attributes
2. duration number duration of the animation in milliseconds
3. easing function easing function from mina or custom
4. callback function callback function that executes when the animation ends

Returns: Element the current element

### Element.data(key, [value])⚓➭

Adds or retrieves given value associated with given key. (Don’t confuse with `data-` attributes)

See also Element.removeData

### Parameters

1. key string key to store data
2. value any value to store

Returns: object Element

or, if value is not specified:

Returns: any value

### Usage

    for (var i = 0, i < 5, i++) {
        paper.circle(10 + 15 * i, 10, 10)
             .attr({fill: "#000"})
             .data("i", i)
             .click(function () {
                alert(this.data("i"));
             });
    }

### Element.removeData([key])⚓➭

Removes value associated with an element by given key. If key is not provided, removes all the data of the element.

### Parameters

1. key string key

Returns: object Element

### Element.outerSVG()⚓➭

Returns SVG code for the element, equivalent to HTML's `outerHTML`.

See also Element.innerSVG

Returns: string SVG code for the element

### Element.toString()⚓➭

See Element.outerSVG

### Element.innerSVG()⚓➭

Returns SVG code for the element's contents, equivalent to HTML's `innerHTML`

Returns: string SVG code for the element

### Fragment.select()⚓➭

See Element.select

### Fragment.selectAll()⚓➭

See Element.selectAll

### Matrix.add(…)⚓➭

Adds the given matrix to existing one

### Parameters

1. a number
2. b number
3. c number
4. d number
5. e number
6. f number

or

### Parameters

1. matrix object Matrix

### Matrix.invert()⚓➭

Returns an inverted version of the matrix

Returns: object Matrix

### Matrix.clone()⚓➭

Returns a copy of the matrix

Returns: object Matrix

### Matrix.translate(x, y)⚓➭

Translate the matrix

### Parameters

1. x number horizontal offset distance
2. y number vertical offset distance

### Matrix.scale(x, [y], [cx], [cy])⚓➭

Scales the matrix

### Parameters

1. x number amount to be scaled, with `1` resulting in no change
2. y number amount to scale along the vertical axis. (Otherwise `x` applies to both axes.)
3. cx number horizontal origin point from which to scale
4. cy number vertical origin point from which to scale

Default cx, cy is the middle point of the element.

### Matrix.rotate(a, x, y)⚓➭

Rotates the matrix

### Parameters

1. a number angle of rotation, in degrees
2. x number horizontal origin point from which to rotate
3. y number vertical origin point from which to rotate

### Matrix.x(x, y)⚓➭

Returns x coordinate for given point after transformation described by the matrix. See also Matrix.y

### Parameters

1. x number
2. y number

Returns: number x

### Matrix.y(x, y)⚓➭

Returns y coordinate for given point after transformation described by the matrix. See also Matrix.x

### Parameters

1. x number
2. y number

Returns: number y

### Matrix.determinant()⚓➭

Finds determinant of the given matrix.

Returns: number determinant

### Matrix.split()⚓➭

Splits matrix into primitive transformations

Returns: object in format:

1. dx number translation by x
2. dy number translation by y
3. scalex number scale by x
4. scaley number scale by y
5. shear number shear
6. rotate number rotation in deg
7. isSimple boolean could it be represented via simple transformations

### Matrix.toTransformString()⚓➭

Returns transform string that represents given matrix

Returns: string transform string

### Snap.Matrix()⚓➭

Matrix constructor, extend on your own risk. To create matrices use Snap.matrix.

### Snap.matrix(…)⚓➭

Utility method Returns a matrix based on the given parameters

### Parameters

1. a number
2. b number
3. c number
4. d number
5. e number
6. f number

or

### Parameters

1. svgMatrix SVGMatrix

Returns: object Matrix

### Paper.rect(x, y, width, height, [rx], [ry])⚓➭

Draws a rectangle

### Parameters

1. x number x coordinate of the top left corner
2. y number y coordinate of the top left corner
3. width number width
4. height number height
5. rx number horizontal radius for rounded corners, default is 0
6. ry number vertical radius for rounded corners, default is rx or 0

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);

### Paper.circle(x, y, r)⚓➭

Draws a circle

### Parameters

1. x number x coordinate of the centre
2. y number y coordinate of the centre
3. r number radius

Returns: object the `circle` element

### Usage

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

### Paper.image(src, x, y, width, height)⚓➭

Places an image on the surface

### Parameters

1. src string URI of the source image
2. x number x offset position
3. y number y offset position
4. width number width of the image
5. height number height of the image

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);

### Paper.ellipse(x, y, rx, ry)⚓➭

Draws an ellipse

### Parameters

1. x number x coordinate of the centre
2. y number y coordinate of the centre
3. rx number horizontal radius
4. ry number vertical radius

Returns: object the `ellipse` element

### Usage

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

### Paper.path([pathString])⚓➭

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

### Parameters

1. pathString string path string in SVG format

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.

Command | Name | Parameters
--- | --- | ---
M | moveto | (x y)+
Z | closepath | (none)
L | lineto | (x y)+
H | horizontal lineto | x+
V | vertical lineto | y+
C | curveto | (x1 y1 x2 y2 x y)+
S | smooth curveto | (x2 y2 x y)+
Q | quadratic Bézier curveto | (x1 y1 x y)+
T | smooth quadratic Bézier curveto | (x y)+
A | elliptical arc | (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
R | Catmull-Rom curveto* | x1 y1 (x y)+

- Catmull-Rom curveto is a not standard SVG command and added to make life easier.
Note: there is a special case when a path consists of only three commands: `M10,10R…z`. In this case the path connects back to its starting point.

### Usage

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

### Paper.g([varargs])⚓➭

Creates a group element

### Parameters

1. varargs … elements to nest within the group

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);

### Paper.group()⚓➭

See Paper.g

### Paper.svg(x, y, width, height, vbx, vby, vbw, vbh)⚓➭

Creates a nested SVG element.

### Parameters

1. x number optional X of the element
2. y number optional Y of the element
3. width number optional width of the element
4. height number optional height of the element
5. vbx number optional viewbox X
6. vby number optional viewbox Y
7. vbw number optional viewbox width
8. vbh number optional viewbox height

Returns: object the `svg` element

### Paper.mask()⚓➭

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

Returns: object the `mask` element

### Paper.ptrn(x, y, width, height, vbx, vby, vbw, vbh)⚓➭

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

### Parameters

1. x number optional X of the element
2. y number optional Y of the element
3. width number optional width of the element
4. height number optional height of the element
5. vbx number optional viewbox X
6. vby number optional viewbox Y
7. vbw number optional viewbox width
8. vbh number optional viewbox height

Returns: object the `pattern` element

### Paper.use(…)⚓➭

Creates a <use> element.

### Parameters

1. id string optional id of element to link

or

### Parameters

1. id Element optional element to link

Returns: object the `use` element

### Paper.symbol(vbx, vby, vbw, vbh)⚓➭

Creates a <symbol> element.

### Parameters

1. vbx number optional viewbox X
2. vby number optional viewbox Y
3. vbw number optional viewbox width
4. vbh number optional viewbox height

Returns: object the `symbol` element

### Paper.text(x, y, text)⚓➭

Draws a text string

### Parameters

1. x number x coordinate position
2. y number y coordinate position
3. text string array The text string to draw or array of strings to nest within separate `<tspan>` elements

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});

### Paper.line(x1, y1, x2, y2)⚓➭

Draws a line

### Parameters

1. x1 number x coordinate position of the start
2. y1 number y coordinate position of the start
3. x2 number x coordinate position of the end
4. y2 number y coordinate position of the end

Returns: object the `line` element

### Usage

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

### Paper.polyline(…)⚓➭

Draws a polyline

### Parameters

1. points array array of points

or

### Parameters

1. varargs … points

Returns: object the `polyline` element

### Usage

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

### Paper.polygon()⚓➭

Draws a polygon. See Paper.polyline

### Paper.gradient(gradient)⚓➭

Creates a gradient element

### Parameters

1. gradient string gradient descriptor

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

### Paper.toString()⚓➭

Returns SVG code for the Paper

Returns: string SVG code for the Paper

### Paper.toDataURL()⚓➭

Returns SVG code for the Paper as Data URI string.

Returns: string Data URI string

### Paper.clear()⚓➭

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

### Element.addClass(value)⚓➭

Adds given class name or list of class names to the element.

### Parameters

1. value string class name or space separated list of class names

Returns: Element original element.

### Element.removeClass(value)⚓➭

Removes given class name or list of class names from the element.

### Parameters

1. value string class name or space separated list of class names

Returns: Element original element.

### Element.hasClass(value)⚓➭

Checks if the element has a given class name in the list of class names applied to it.

### Parameters

1. value string class name

Returns: boolean `true` if the element has given class

### Element.toggleClass(value, flag)⚓➭

Add or remove one or more classes from the element, depending on either the class’s presence or the value of the `flag` argument.

### Parameters

1. value string class name or space separated list of class names
2. flag boolean value to determine whether the class should be added or removed

Returns: Element original element.

### mina(a, A, b, B, get, set, [easing])⚓➭

Generic animation of numbers

### Parameters

1. a number start slave number
2. A number end slave number
3. b number start master number (start time in general case)
4. B number end master number (end time in gereal case)
5. get function getter of master number (see mina.time)
6. set function setter of slave number
7. easing function easing function, default is mina.linear

Returns: object animation descriptor

1. {
   1. id string animation id,
   2. start number start slave number,
   3. end number end slave number,
   4. b number start master number,
   5. s number animation status (0..1),
   6. dur number animation duration,
   7. spd number animation speed,
   8. get function getter of master number (see mina.time),
   9. set function setter of slave number,
   10. easing function easing function, default is mina.linear,
   11. status function status getter/setter,
   12. speed function speed getter/setter,
   13. duration function duration getter/setter,
   14. stop function animation stopper
   15. pause function pauses the animation
   16. resume function resumes the animation
   17. update function calles setter with the right value of the animation
2. }

### mina.time()⚓➭

Returns the current time. Equivalent to:

    function () {
        return (new Date).getTime();
    }

### mina.getById(id)⚓➭

Returns an animation by its id

### Parameters

1. id string animation's id

Returns: object See mina

### mina.linear(n)⚓➭

Default linear easing

### Parameters

1. n number input 0..1

Returns: number output 0..1

### mina.easeout(n)⚓➭

Easeout easing

### Parameters

1. n number input 0..1

Returns: number output 0..1

### mina.easein(n)⚓➭

Easein easing

### Parameters

1. n number input 0..1

Returns: number output 0..1

### mina.easeinout(n)⚓➭

Easeinout easing

### Parameters

1. n number input 0..1

Returns: number output 0..1

### mina.backin(n)⚓➭

Backin easing

### Parameters

1. n number input 0..1

Returns: number output 0..1

### mina.backout(n)⚓➭

Backout easing

### Parameters

1. n number input 0..1

Returns: number output 0..1

### mina.elastic(n)⚓➭

Elastic easing

### Parameters

1. n number input 0..1

Returns: number output 0..1

### mina.bounce(n)⚓➭

Bounce easing

### Parameters

1. n number input 0..1

Returns: number output 0..1

### Paper.filter(filstr)⚓➭

Creates a `<filter>` element

### Parameters

1. filstr string SVG fragment of filter provided as a string

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
        });

### Snap.filter.blur(x, [y])⚓➭

Returns an SVG markup string for the blur filter

### Parameters

1. x number amount of horizontal blur, in pixels
2. y number amount of vertical blur, in pixels

Returns: string filter representation

### Usage

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

### Snap.filter.shadow(…)⚓➭

Returns an SVG markup string for the shadow filter

### Parameters

1. dx number horizontal shift of the shadow, in pixels
2. dy number vertical shift of the shadow, in pixels
3. blur number amount of blur
4. color string color of the shadow
5. opacity number `0..1` opacity of the shadow

or

### Parameters

1. dx number horizontal shift of the shadow, in pixels
2. dy number vertical shift of the shadow, in pixels
3. color string color of the shadow
4. opacity number `0..1` opacity of the shadow

which makes blur default to `4`. Or

### Parameters

1. dx number horizontal shift of the shadow, in pixels
2. dy number vertical shift of the shadow, in pixels
3. opacity number `0..1` opacity of the shadow

Returns: string filter representation

### Usage

    var f = paper.filter(Snap.filter.shadow(0, 2, 3)),
        c = paper.circle(10, 10, 10).attr({
            filter: f
        });

### Snap.filter.grayscale(amount)⚓➭

Returns an SVG markup string for the grayscale filter

### Parameters

1. amount number amount of filter (`0..1`)

Returns: string filter representation

### Snap.filter.sepia(amount)⚓➭

Returns an SVG markup string for the sepia filter

### Parameters

1. amount number amount of filter (`0..1`)

Returns: string filter representation

### Snap.filter.saturate(amount)⚓➭

Returns an SVG markup string for the saturate filter

### Parameters

1. amount number amount of filter (`0..1`)

Returns: string filter representation

### Snap.filter.hueRotate(angle)⚓➭

Returns an SVG markup string for the hue-rotate filter

### Parameters

1. angle number angle of rotation

Returns: string filter representation

### Snap.filter.invert(amount)⚓➭

Returns an SVG markup string for the invert filter

### Parameters

1. amount number amount of filter (`0..1`)

Returns: string filter representation

### Snap.filter.brightness(amount)⚓➭

Returns an SVG markup string for the brightness filter

### Parameters

1. amount number amount of filter (`0..1`)

Returns: string filter representation

### Snap.filter.contrast(amount)⚓➭

Returns an SVG markup string for the contrast filter

### Parameters

1. amount number amount of filter (`0..1`)

Returns: string filter representation

### Element.click(handler)⚓➭

Adds a click event handler to the element

### Parameters

1. handler function handler for the event

Returns: object Element

### Element.unclick(handler)⚓➭

Removes a click event handler from the element

### Parameters

1. handler function handler for the event

Returns: object Element

### Element.dblclick(handler)⚓➭

Adds a double click event handler to the element

### Parameters

1. handler function handler for the event

Returns: object Element

### Element.undblclick(handler)⚓➭

Removes a double click event handler from the element

### Parameters

1. handler function handler for the event

Returns: object Element

### Element.mousedown(handler)⚓➭

Adds a mousedown event handler to the element

### Parameters

1. handler function handler for the event

Returns: object Element

### Element.unmousedown(handler)⚓➭

Removes a mousedown event handler from the element

### Parameters

1. handler function handler for the event

Returns: object Element

### Element.mousemove(handler)⚓➭

Adds a mousemove event handler to the element

### Parameters

1. handler function handler for the event

Returns: object Element

### Element.unmousemove(handler)⚓➭

Removes a mousemove event handler from the element

### Parameters

1. handler function handler for the event

Returns: object Element

### Element.mouseout(handler)⚓➭

Adds a mouseout event handler to the element

### Parameters

1. handler function handler for the event

Returns: object Element

### Element.unmouseout(handler)⚓➭

Removes a mouseout event handler from the element

### Parameters

1. handler function handler for the event

Returns: object Element

### Element.mouseover(handler)⚓➭

Adds a mouseover event handler to the element

### Parameters

1. handler function handler for the event

Returns: object Element

### Element.unmouseover(handler)⚓➭

Removes a mouseover event handler from the element

### Parameters

1. handler function handler for the event

Returns: object Element

### Element.mouseup(handler)⚓➭

Adds a mouseup event handler to the element

### Parameters

1. handler function handler for the event

Returns: object Element

### Element.unmouseup(handler)⚓➭

Removes a mouseup event handler from the element

### Parameters

1. handler function handler for the event

Returns: object Element

### Element.touchstart(handler)⚓➭

Adds a touchstart event handler to the element

### Parameters

1. handler function handler for the event

Returns: object Element

### Element.untouchstart(handler)⚓➭

Removes a touchstart event handler from the element

### Parameters

1. handler function handler for the event

Returns: object Element

### Element.touchmove(handler)⚓➭

Adds a touchmove event handler to the element

### Parameters

1. handler function handler for the event

Returns: object Element

### Element.untouchmove(handler)⚓➭

Removes a touchmove event handler from the element

### Parameters

1. handler function handler for the event

Returns: object Element

### Element.touchend(handler)⚓➭

Adds a touchend event handler to the element

### Parameters

1. handler function handler for the event

Returns: object Element

### Element.untouchend(handler)⚓➭

Removes a touchend event handler from the element

### Parameters

1. handler function handler for the event

Returns: object Element

### Element.touchcancel(handler)⚓➭

Adds a touchcancel event handler to the element

### Parameters

1. handler function handler for the event

Returns: object Element

### Element.untouchcancel(handler)⚓➭

Removes a touchcancel event handler from the element

### Parameters

1. handler function handler for the event

Returns: object Element

### Element.hover(f_in, f_out, [icontext], [ocontext])⚓➭

Adds hover event handlers to the element

### Parameters

1. f_in function handler for hover in
2. f_out function handler for hover out
3. icontext object context for hover in handler
4. ocontext object context for hover out handler

Returns: object Element

### Element.unhover(f_in, f_out)⚓➭

Removes hover event handlers from the element

### Parameters

1. f_in function handler for hover in
2. f_out function handler for hover out

Returns: object Element

### Element.drag(onmove, onstart, onend, [mcontext], [scontext], [econtext])⚓➭

Adds event handlers for an element's drag gesture

### Parameters

1. onmove function handler for moving
2. onstart function handler for drag start
3. onend function handler for drag end
4. mcontext object context for moving handler
5. scontext object context for drag start handler
6. econtext object context for drag end handler

Additionaly following `drag` events are triggered: `drag.start.<id>` on start, `drag.end.<id>` on end and `drag.move.<id>` on every move. When element is dragged over another element `drag.over.<id>` fires as well.

Start event and start handler are called in specified context or in context of the element with following parameters:

1. x number x position of the mouse
2. y number y position of the mouse
3. event object DOM event object

Move event and move handler are called in specified context or in context of the element with following parameters:

1. dx number shift by x from the start point
2. dy number shift by y from the start point
3. x number x position of the mouse
4. y number y position of the mouse
5. event object DOM event object

End event and end handler are called in specified context or in context of the element with following parameters:

1. event object DOM event object

Returns: object Element

### Element.undrag()⚓➭

Removes all drag event handlers from the given element

### Snap.path.getTotalLength(path)⚓➭

Returns the length of the given path in pixels

### Parameters

1. path string SVG path string

Returns: number length

### Snap.path.getPointAtLength(path, length)⚓➭

Returns the coordinates of the point located at the given length along the given path

### Parameters

1. path string SVG path string
2. length number length, in pixels, from the start of the path, excluding non-rendering jumps

Returns: object representation of the point:

1. {
   1. x: number x coordinate,
   2. y: number y coordinate,
   3. alpha: number angle of derivative
2. }

### Snap.path.getSubpath(path, from, to)⚓➭

Returns the subpath of a given path between given start and end lengths

### Parameters

1. path string SVG path string
2. from number length, in pixels, from the start of the path to the start of the segment
3. to number length, in pixels, from the start of the path to the end of the segment

Returns: string path string definition for the segment

### Element.getTotalLength()⚓➭

Returns the length of the path in pixels (only works for `path` elements)

Returns: number length

### Element.getPointAtLength(length)⚓➭

Returns coordinates of the point located at the given length on the given path (only works for `path` elements)

### Parameters

1. length number length, in pixels, from the start of the path, excluding non-rendering jumps

Returns: object representation of the point:

1. {
   1. x: number x coordinate,
   2. y: number y coordinate,
   3. alpha: number angle of derivative
2. }

### Element.getSubpath(from, to)⚓➭

Returns subpath of a given element from given start and end lengths (only works for `path` elements)

### Parameters

1. from number length, in pixels, from the start of the path to the start of the segment
2. to number length, in pixels, from the start of the path to the end of the segment

Returns: string path string definition for the segment

### Snap.path.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t)⚓➭

Utility method Finds dot coordinates on the given cubic beziér curve at the given t

### Parameters

1. p1x number x of the first point of the curve
2. p1y number y of the first point of the curve
3. c1x number x of the first anchor of the curve
4. c1y number y of the first anchor of the curve
5. c2x number x of the second anchor of the curve
6. c2y number y of the second anchor of the curve
7. p2x number x of the second point of the curve
8. p2y number y of the second point of the curve
9. t number position on the curve (0..1)

Returns: object point information in format:

1. {
   1. x: number x coordinate of the point,
   2. y: number y coordinate of the point,
   3. m: {
      1. x: number x coordinate of the left anchor,
      2. y: number y coordinate of the left anchor
   4. },
   5. n: {
      1. x: number x coordinate of the right anchor,
      2. y: number y coordinate of the right anchor
   6. },
   7. start: {
      1. x: number x coordinate of the start of the curve,
      2. y: number y coordinate of the start of the curve
   8. },
   9. end: {
      1. x: number x coordinate of the end of the curve,
      2. y: number y coordinate of the end of the curve
   10. },
   11. alpha: number angle of the curve derivative at the point
2. }

### Snap.path.bezierBBox(…)⚓➭

Utility method Returns the bounding box of a given cubic beziér curve

### Parameters

1. p1x number x of the first point of the curve
2. p1y number y of the first point of the curve
3. c1x number x of the first anchor of the curve
4. c1y number y of the first anchor of the curve
5. c2x number x of the second anchor of the curve
6. c2y number y of the second anchor of the curve
7. p2x number x of the second point of the curve
8. p2y number y of the second point of the curve

or

### Parameters

1. bez array array of six points for beziér curve

Returns: object bounding box

1. {
   1. x: number x coordinate of the left top point of the box,
   2. y: number y coordinate of the left top point of the box,
   3. x2: number x coordinate of the right bottom point of the box,
   4. y2: number y coordinate of the right bottom point of the box,
   5. width: number width of the box,
   6. height: number height of the box
2. }

### Snap.path.isPointInsideBBox(bbox, x, y)⚓➭

Utility method Returns `true` if given point is inside bounding box

### Parameters

1. bbox string bounding box
2. x string x coordinate of the point
3. y string y coordinate of the point

Returns: boolean `true` if point is inside

### Snap.path.isBBoxIntersect(bbox1, bbox2)⚓➭

Utility method Returns `true` if two bounding boxes intersect

### Parameters

1. bbox1 string first bounding box
2. bbox2 string second bounding box

Returns: boolean `true` if bounding boxes intersect

### Snap.path.intersection(path1, path2)⚓➭

Utility method Finds intersections of two paths

### Parameters

1. path1 string path string
2. path2 string path string

Returns: array dots of intersection

1. [
2. {
   1. x: number x coordinate of the point,
   2. y: number y coordinate of the point,
   3. t1: number t value for segment of path1,
   4. t2: number t value for segment of path2,
   5. segment1: number order number for segment of path1,
   6. segment2: number order number for segment of path2,
   7. bez1: array eight coordinates representing beziér curve for the segment of path1,
   8. bez2: array eight coordinates representing beziér curve for the segment of path2
3. }
4. ]

### Snap.path.isPointInside(path, x, y)⚓➭

Utility method Returns `true` if given point is inside a given closed path.

Note: fill mode doesn’t affect the result of this method.

### Parameters

1. path string path string
2. x number x of the point
3. y number y of the point

Returns: boolean `true` if point is inside the path

### Snap.path.getBBox(path)⚓➭

Utility method Returns the bounding box of a given path

### Parameters

1. path string path string

Returns: object bounding box

1. {
   1. x: number x coordinate of the left top point of the box,
   2. y: number y coordinate of the left top point of the box,
   3. x2: number x coordinate of the right bottom point of the box,
   4. y2: number y coordinate of the right bottom point of the box,
   5. width: number width of the box,
   6. height: number height of the box
2. }

### Snap.path.toRelative(path)⚓➭

Utility method Converts path coordinates into relative values

### Parameters

1. path string path string

Returns: array path string

### Snap.path.toAbsolute(path)⚓➭

Utility method Converts path coordinates into absolute values

### Parameters

1. path string path string

Returns: array path string

### Snap.path.toCubic(pathString)⚓➭

Utility method Converts path to a new path where all segments are cubic beziér curves

### Parameters

1. pathString string array path string or array of segments

Returns: array array of segments

### Snap.path.map(path, matrix)⚓➭

Transform the path string with the given matrix

### Parameters

1. path string path string
2. matrix object see Matrix

Returns: string transformed path string

### Set.push()⚓➭

Adds each argument to the current set

Returns: object original element

### Set.pop()⚓➭

Removes last element and returns it

Returns: object element

### Set.forEach(callback, thisArg)⚓➭

Executes given function for each element in the set

If the function returns `false`, the loop stops running.

### Parameters

1. callback function function to run
2. thisArg object context object for the callback

Returns: object Set object

### Set.animate(…)⚓➭

Animates each element in set in sync.

### Parameters

1. attrs object key-value pairs of destination attributes
2. duration number duration of the animation in milliseconds
3. easing function easing function from mina or custom
4. callback function callback function that executes when the animation ends

or

### Parameters

1. animation array array of animation parameter for each element in set in format `[attrs, duration, easing, callback]`

### Usage

    // animate all elements in set to radius 10
    set.animate({r: 10}, 500, mina.easein);
    // or
    // animate first element to radius 10, but second to radius 20 and in different time
    set.animate([{r: 10}, 500, mina.easein], [{r: 20}, 1500, mina.easein]);

Returns: Element the current element

### Set.bind(…)⚓➭

Specifies how to handle a specific attribute when applied to a set.

### Parameters

1. attr string attribute name
2. callback function function to run

or

### Parameters

1. attr string attribute name
2. element Element specific element in the set to apply the attribute to

or

### Parameters

1. attr string attribute name
2. element Element specific element in the set to apply the attribute to
3. eattr string attribute on the element to bind the attribute to

Returns: object Set object

### Set.clear()⚓➭

Removes all elements from the set

### Set.splice(index, count, [insertion…])⚓➭

Removes range of elements from the set

### Parameters

1. index number position of the deletion
2. count number number of element to remove
3. insertion… object elements to insert

Returns: object set elements that were deleted

### Set.exclude(element)⚓➭

Removes given element from the set

### Parameters

1. element object element to remove

Returns: boolean `true` if object was found and removed from the set