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

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

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

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

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.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.innerSVG()

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

Returns: string SVG code for the element

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.

CommandNameParameters
Mmoveto(x y)+
Zclosepath(none)
Llineto(x y)+
Hhorizontal linetox+
Vvertical linetoy+
Ccurveto(x1 y1 x2 y2 x y)+
Ssmooth curveto(x2 y2 x y)+
Qquadratic Bézier curveto(x1 y1 x y)+
Tsmooth quadratic Bézier curveto(x y)+
Aelliptical arc(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
RCatmull-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.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.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