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.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.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(x, y, width, height, refX, refY)⚓➭

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

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

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

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

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

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