Snap.svg

API Reference

Element.after(el)⚓➭

Inserts given element after the current one

Parameters

  1. el Element element to insert

Returns: Element the parent 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 optional function easing function from mina or custom
  4. callback optional function callback function that executes when the animation ends

Returns: Element the current 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.asPX(attr, [value])⚓➭

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

Parameters

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

Returns: Element result of query selection

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
});
console.log(el.attr("fill")); // #fc0

Element.before(el)⚓➭

Inserts given element before the current one

Parameters

  1. el Element element to insert

Returns: Element the parent element

Element.click(handler)⚓➭

Adds a click event handler to the element

Parameters

  1. handler function handler for the event

Returns: object Element

Element.clone()⚓➭

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

Returns: Element the clone

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 optional 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.dblclick(handler)⚓➭

Adds a double click event handler to the element

Parameters

  1. handler function handler for the event

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 optional object context for moving handler
  5. scontext optional object context for drag start handler
  6. econtext optional 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. xnumberx position of the mouse
  2. ynumbery position of the mouse
  3. eventobjectDOM event object

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

  1. dxnumbershift by x from the start point
  2. dynumbershift by y from the start point
  3. xnumberx position of the mouse
  4. ynumbery position of the mouse
  5. eventobjectDOM event object

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

  1. eventobjectDOM event object

Returns: object Element

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 optional object context for moving handler
  5. scontext optional object context for drag start handler
  6. econtext optional 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. xnumberx position of the mouse
  2. ynumbery position of the mouse
  3. eventobjectDOM event object

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

  1. dxnumbershift by x from the start point
  2. dynumbershift by y from the start point
  3. xnumberx position of the mouse
  4. ynumbery position of the mouse
  5. eventobjectDOM event object

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

  1. eventobjectDOM event object

Returns: object Element

Element.getBBox()⚓➭

Returns the bounding box descriptor for the given element

Returns: object bounding box descriptor:

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

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:numberx coordinate,
    2. y:numbery coordinate,
    3. alpha:numberangle 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

Element.getTotalLength()⚓➭

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

Returns: number length

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 optional object context for hover in handler
  4. ocontext optional object context for hover out handler

Returns: object Element

Element.inAnim()⚓➭

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

Returns: object in format:

  1. {
    1. animobjectanimation object,
    2. curStatusnumber0..1 — status of the animation: 0 — just started, 1 — just finished,
    3. statusfunctiongets or sets the status of the animation,
    4. stopfunctionstops the animation
  2. }

Element.innerSVG()⚓➭

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

Returns: string SVG code for the 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.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.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.

Element.mousedown(handler)⚓➭

Adds a mousedown event handler to 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.mouseout(handler)⚓➭

Adds a mouseout event handler to 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.mouseup(handler)⚓➭

Adds a mouseup event handler to the element

Parameters

  1. handler function handler for the event

Returns: object Element

Element.parent()⚓➭

Returns the element's parent

Returns: Element the parent element

Element.pattern(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.prepend(el)⚓➭

Prepends the given element to the current one

Parameters

  1. el Element element to prepend

Returns: Element the parent element

Element.remove()⚓➭

Removes element from the DOM

Returns: Element the detached element

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 optional string key

Returns: object 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.stop()⚓➭

Stops all the animations for the current element

Returns: Element the current element

Element.toDefs()⚓➭

Moves element to the shared <defs> area

Returns: Element the clone

Element.toString()⚓➭

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

Returns: string SVG code for the element

Returns SVG code for the Paper

Returns: string SVG code for the Paper

Element.touchcancel(handler)⚓➭

Adds a touchcancel event handler to 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.touchmove(handler)⚓➭

Adds a touchmove event handler to 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.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. stringstringtransform string,
    2. globalMatrixMatrixmatrix of all transformations applied to element or its parents,
    3. localMatrixMatrixmatrix of transformations applied only to the element,
    4. diffMatrixMatrixmatrix of difference between global and local transformations,
    5. globalstringglobal transformation as string,
    6. localstringlocal transformation as string,
    7. toStringfunctionreturns string property
  2. }

Element.unclick(handler)⚓➭

Removes a click event handler from 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.undrag()⚓➭

Removes all drag event handlers from the given 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.unmousedown(handler)⚓➭

Removes a mousedown event handler from 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.unmouseout(handler)⚓➭

Removes a mouseout event handler from 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.unmouseup(handler)⚓➭

Removes a mouseup event handler from 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.untouchend(handler)⚓➭

Removes a touchend event handler from 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.untouchstart(handler)⚓➭

Removes a touchstart event handler from the element

Parameters

  1. handler function handler for the event

Returns: object Element

Element.use()⚓➭

Creates a <use> element linked to the current element

Returns: Element the <use> 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.clone()⚓➭

Returns a copy of the matrix

Returns: object Matrix

Matrix.invert()⚓➭

Returns an inverted version of the matrix

Returns: object Matrix

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.scale(x, [y], [cx], [cy])⚓➭

Scales the matrix

Parameters

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

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

Matrix.split()⚓➭

Splits matrix into primitive transformations

Returns: object in format:

  1. dxnumbertranslation by x
  2. dynumbertranslation by y
  3. scalexnumberscale by x
  4. scaleynumberscale by y
  5. shearnumbershear
  6. rotatenumberrotation in deg
  7. isSimplebooleancould it be represented via simple transformations

Matrix.toTransformString()⚓➭

Returns transform string that represents given matrix

Returns: string transform string

Matrix.translate(x, y)⚓➭

Translate the matrix

Parameters

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

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

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.clear()⚓➭

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

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

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.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('<feGaussianBlur stdDeviation="2"/>'),
    c = paper.circle(10, 10, 10).attr({
        filter: f
    });

Paper.g([varargs])⚓➭

Creates a group element

Parameters

  1. varargs optional … 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.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.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 Raphaël element object with type image

Usage

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

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.path([pathString])⚓➭

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

Parameters

  1. pathString optional 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.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.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 optional number horizontal radius for rounded corners, default is 0
    6. ry optional 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.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"]);

    Paper.toString()⚓➭

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

    Returns: string SVG code for the element

    Returns SVG code for the Paper

    Returns: string SVG code for the Paper

    Set.clear()⚓➭

    Removes all elements from the set

    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

    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.pop()⚓➭

    Removes last element and returns it

    Returns: object element

    Set.push()⚓➭

    Adds each argument to the current set

    Returns: object original element

    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… optional object elements to insert

    Returns: object set elements that were deleted

    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. query string CSS query selector

    Returns: object Element

    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

    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 optional object scope of callback

    or

    Parameters

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

    Returns: XMLHttpRequest the XMLHttpRequest object, just in case

    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 optional number x coord of third point
    6. y3 optional number y coord of third point

    Returns: number angle in degrees

    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 optional function easing function from mina or custom
    6. callback optional function callback function to execute when animation ends

    Returns: object animation object in mina format

    1. {
      1. idstringanimation id, consider it read-only,
      2. durationfunctiongets or sets the duration of the animation,
      3. easingfunctioneasing,
      4. speedfunctiongets or sets the speed of the animation,
      5. statusfunctiongets or sets the status of the animation,
      6. stopfunctionstops 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);

    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 optional function one of easing functions of mina or custom one
    4. callback optional function callback function that fires when animation ends

    Returns: object animation object

    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. rnumberred,
      2. gnumbergreen,
      3. bnumberblue,
      4. hexstringcolor in HTML/CSS format: #••••••,
      5. errorbooleantrue if string can't be parsed,
      6. hnumberhue,
      7. snumbersaturation,
      8. vnumbervalue (brightness),
      9. lnumberlightness
    2. }

    Snap.deg(rad)⚓➭

    Transform angle to degrees

    Parameters

    1. rad number angle in radians

    Returns: number angle in degrees

    Snap.filter⚓

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

    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.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.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.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.shadow(dx, dy, [blur], [color])⚓➭

    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 optional number amount of blur
    4. color optional string color 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.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.fragment(varargs)⚓➭

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

    Parameters

    1. varargs … SVG string

    Returns: Fragment the Fragment

    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. rnumberred,
      2. gnumbergreen,
      3. bnumberblue,
      4. hexstringcolor in HTML/CSS format: #••••••,
      5. errorbooleantrue 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.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. rnumberred,
      2. gnumbergreen,
      3. bnumberblue,
      4. hexstringcolor in HTML/CSS format: #••••••
    2. }

    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.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. rnumberred,
      2. gnumbergreen,
      3. bnumberblue,
      4. hexstringcolor in HTML/CSS format: #••••••
    2. }

    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.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 optional object scope of callback

    Snap.parse(svg)⚓➭

    Parses SVG fragment and converts it into a Fragment

    Parameters

    1. svg string SVG string

    Returns: Fragment the Fragment

    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.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:numberx coordinate of the left top point of the box,
      2. y:numbery coordinate of the left top point of the box,
      3. x2:numberx coordinate of the right bottom point of the box,
      4. y2:numbery coordinate of the right bottom point of the box,
      5. width:numberwidth of the box,
      6. height:numberheight of the box
    2. }

    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:numberx coordinate of the point,
      2. y:numbery coordinate of the point,
      3. m: {
        1. x:numberx coordinate of the left anchor,
        2. y:numbery coordinate of the left anchor
      4. },
      5. n: {
        1. x:numberx coordinate of the right anchor,
        2. y:numbery coordinate of the right anchor
      6. },
      7. start: {
        1. x:numberx coordinate of the start of the curve,
        2. y:numbery coordinate of the start of the curve
      8. },
      9. end: {
        1. x:numberx coordinate of the end of the curve,
        2. y:numbery coordinate of the end of the curve
      10. },
      11. alpha:numberangle of the curve derivative at the point
    2. }

    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:numberx coordinate of the left top point of the box,
      2. y:numbery coordinate of the left top point of the box,
      3. x2:numberx coordinate of the right bottom point of the box,
      4. y2:numbery coordinate of the right bottom point of the box,
      5. width:numberwidth of the box,
      6. height:numberheight of the box
    2. }

    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:numberx coordinate,
      2. y:numbery coordinate,
      3. alpha:numberangle 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

    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.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:numberx coordinate of the point,
      2. y:numbery coordinate of the point,
      3. t1:numbert value for segment of path1,
      4. t2:numbert value for segment of path2,
      5. segment1:numberorder number for segment of path1,
      6. segment2:numberorder number for segment of path2,
      7. bez1:arrayeight coordinates representing beziér curve for the segment of path1,
      8. bez2:arrayeight coordinates representing beziér curve for the segment of path2
    3. }
    4. ]

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

    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.toRelative(path)⚓➭

    Utility method Converts path coordinates into relative values

    Parameters

    1. path string path string

    Returns: array path string

    Snap.rad(deg)⚓➭

    Transform angle to radians

    Parameters

    1. deg number angle in degrees

    Returns: number angle in radians

    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.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. hnumberhue,
      2. snumbersaturation,
      3. bnumberbrightness
    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. hnumberhue,
      2. snumbersaturation,
      3. lnumberluminosity
    2. }

    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

    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 optional number maximum distance to the target value that would trigger the snap. Default is 10.

    Returns: number adjusted value

    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 gereal 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 optional function easing function, default is mina.linear

    Returns: object animation descriptor

    1. {
      1. idstringanimation id,
      2. startnumberstart slave number,
      3. endnumberend slave number,
      4. bnumberstart master number,
      5. snumberanimation status (0..1),
      6. durnumberanimation duration,
      7. spdnumberanimation speed,
      8. getfunctiongetter of master number (see mina.time),
      9. setfunctionsetter of slave number,
      10. easingfunctioneasing function, default is mina.linear,
      11. statusfunctionstatus getter/setter,
      12. speedfunctionspeed getter/setter,
      13. durationfunctionduration getter/setter,
      14. stopfunctionanimation stopper
    2. }

    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.bounce(n)⚓➭

    Bounce 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.easeout(n)⚓➭

    Easeout 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.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.time()⚓➭

    Returns the current time. Equivalent to: 

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