From f8a8d5192b1e5013d9e2f699be54b072ef39d5f0 Mon Sep 17 00:00:00 2001 From: talasila Date: Wed, 8 Feb 2017 10:13:29 -0500 Subject: Initial OpenECOMP UI/DMaapBC commit Change-Id: Ia492e1b88311b9bed4c31f593b28deaaad73b7e4 Signed-off-by: talasila --- .../bower_components/Snap.svg/doc/reference.html | 14816 +++++++++++++++++++ 1 file changed, 14816 insertions(+) create mode 100644 dcae_dmaapbc_webapp/src/main/webapp/app/fusion/ase/scripts/bower_components/Snap.svg/doc/reference.html (limited to 'dcae_dmaapbc_webapp/src/main/webapp/app/fusion/ase/scripts/bower_components/Snap.svg/doc/reference.html') diff --git a/dcae_dmaapbc_webapp/src/main/webapp/app/fusion/ase/scripts/bower_components/Snap.svg/doc/reference.html b/dcae_dmaapbc_webapp/src/main/webapp/app/fusion/ase/scripts/bower_components/Snap.svg/doc/reference.html new file mode 100644 index 0000000..eed4bdd --- /dev/null +++ b/dcae_dmaapbc_webapp/src/main/webapp/app/fusion/ase/scripts/bower_components/Snap.svg/doc/reference.html @@ -0,0 +1,14816 @@ + + + + + + + Snap.svg API Reference + + + + + + + + + + + + + + + + +
+
+
+
+ +
+ +
+
+
+
+ +
+
+

Snap(…)⚓➭

+
+
+
+
+ + + + +

Creates a drawing surface or wraps existing SVG element. +

+ + + + + + + + + + +
+

Parameters

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

or +

+ + + + + + + + + + +
+

Parameters

+
    +
  1. DOM + SVGElement + element to be wrapped into Snap structure
    2. + +
+
+ + + + + + + + +

or +

+ + + + + + + + + + +
+

Parameters

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

or +

+ + + + + + + + + + +
+

Parameters

+
    +
  1. query + string + CSS query selector
    2. + +
+
+ + + + + + + + + + + + + +

+ Returns: + + object + + Element +

+ + + + +
+
+
+ +
+
+

Snap.format(token, json)⚓➭

+
+
+
+
+ + + + +

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

+ + + + + + + + + + +
+

Parameters

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

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

+ Returns: + + number + + angle in radians +

+ + + + +
+
+
+ +
+
+

Snap.deg(rad)⚓➭

+
+
+
+
+ + + + +

Transform angle to degrees +

+ + + + + + + + + + +
+

Parameters

+
    +
  1. rad + number + angle in radians
    2. + +
+
+ + + + + + + + + + + + + +

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

+ Returns: + + number + + sin +

+ + + + +
+
+
+ +
+
+

Snap.tan(angle)⚓➭

+
+
+
+
+ + + + +

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

+ + + + + + + + + + +
+

Parameters

+
    +
  1. angle + number + angle in degrees
    2. + +
+
+ + + + + + + + + + + + + +

+ Returns: + + number + + tan +

+ + + + +
+
+
+ +
+
+

Snap.cos(angle)⚓➭

+
+
+
+
+ + + + +

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

+ + + + + + + + + + +
+

Parameters

+
    +
  1. angle + number + angle in degrees
    2. + +
+
+ + + + + + + + + + + + + +

+ Returns: + + number + + cos +

+ + + + +
+
+
+ +
+
+

Snap.asin(num)⚓➭

+
+
+
+
+ + + + +

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

+ + + + + + + + + + +
+

Parameters

+
    +
  1. num + number + value
    2. + +
+
+ + + + + + + + + + + + + +

+ Returns: + + number + + asin in degrees +

+ + + + +
+
+
+ +
+
+

Snap.acos(num)⚓➭

+
+
+
+
+ + + + +

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

+ + + + + + + + + + +
+

Parameters

+
    +
  1. num + number + value
    2. + +
+
+ + + + + + + + + + + + + +

+ Returns: + + number + + acos in degrees +

+ + + + +
+
+
+ +
+
+

Snap.atan(num)⚓➭

+
+
+
+
+ + + + +

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

+ + + + + + + + + + +
+

Parameters

+
    +
  1. num + number + value
    2. + +
+
+ + + + + + + + + + + + + +

+ Returns: + + number + + atan in degrees +

+ + + + +
+
+
+ +
+
+

Snap.atan2(num)⚓➭

+
+
+
+
+ + + + +

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

+ + + + + + + + + + +
+

Parameters

+
    +
  1. num + number + value
    2. + +
+
+ + + + + + + + + + + + + +

+ 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. +
  2. y1 + number + y coord of first point
    3. +
  3. x2 + number + x coord of second point
    4. +
  4. y2 + number + y coord of second point
    5. +
  5. x3 + number + x coord of third point
    6. +
  6. y3 + number + y coord of third point
    7. + +
+
+ + + + + + + + + + + + + +

+ 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. +
  2. y1 + number + y coord of first point
    3. +
  3. x2 + number + x coord of second point
    4. +
  4. y2 + number + y coord of second point
    5. + +
+
+ + + + + + + + + + + + + +

+ 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. +
  2. y1 + number + y coord of first point
    3. +
  3. x2 + number + x coord of second point
    4. +
  4. y2 + number + y coord of second point
    5. + +
+
+ + + + + + + + + + + + + +

+ 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. +
  2. x + number + x coord of a point
    3. +
  3. y + number + y coord of a point
    4. + +
+
+ + + + + + + + + + + + + +

+ Returns: + + object + + in format +

+ + + + +
+
+
+ +
+
+

Snap.is(o, type)⚓➭

+
+
+
+
+ + + + +

Handy replacement for the typeof operator +

+ + + + + + + + + + +
+

Parameters

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

+ 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. +
  2. value + number + value to adjust
    3. +
  3. tolerance + number + maximum distance to the target value that would trigger the snap. Default is 10.
    4. + +
+
+ + + + + + + + + + + + + +

+ 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:
    2. + +
+
+ + + + + + + + + + +
    + + + + + + + + + + + +
  • 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. + + + +
    2. + g + number + green, +
      3. + + + +
    3. + b + number + blue, +
      4. + + + +
    4. + hex + string + color in HTML/CSS format: #••••••, +
      5. + + + +
    5. + error + boolean + true if string can't be parsed +
      6. + + + +
  2. }
    3. + + +
+ + +
+
+
+ +
+
+

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

+
+
+
+
+ + + + +

Converts HSB values to a hex representation of the color +

+ + + + + + + + + + +
+

Parameters

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

+ 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. +
  2. s + number + saturation
    3. +
  3. l + number + luminosity
    4. + +
+
+ + + + + + + + + + + + + +

+ 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. +
  2. g + number + green
    3. +
  3. b + number + blue
    4. + +
+
+ + + + + + + + + + + + + +

+ 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)
    2. + +
+
+ + + + + + + + + + + + + +

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

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

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

+
+
+
+
+ + + + +

Converts HSB values to an RGB object +

+ + + + + + + + + + +
+

Parameters

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

+ Returns: + + object + + RGB object in the following format: +

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

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

+
+
+
+
+ + + + +

Converts HSL values to an RGB object +

+ + + + + + + + + + +
+

Parameters

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

+ Returns: + + object + + RGB object in the following format: +

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

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

+
+
+
+
+ + + + +

Converts RGB values to an HSB object +

+ + + + + + + + + + +
+

Parameters

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

+ Returns: + + object + + HSB object in the following format: +

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

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

+
+
+
+
+ + + + +

Converts RGB values to an HSL object +

+ + + + + + + + + + +
+

Parameters

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

+ Returns: + + object + + HSL object in the following format: +

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

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)
    2. + +
+
+ + + + + + + + + + + + + +

+ 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)
    2. + +
+
+ + + + + + + + + + + + + +

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

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

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

or +

+ + + + + + + + + + +
+

Parameters

+
    +
  1. param + string + name of the attribute
    2. + +
+
+ + + + + + + + + + + + + +

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

+ Returns: + + Fragment + + the Fragment +

+ + + + +
+
+
+ +
+
+

Snap.fragment(varargs)⚓➭

+
+
+
+
+ + + + +

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

+ + + + + + + + + + +
+

Parameters

+
    +
  1. varargs + … + SVG string
    2. + +
+
+ + + + + + + + + + + + + +

+ 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. +
  2. attr + object + attributes
    3. + +
+
+ + + + + + + + + + + + + +

+ 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. + + + +
    2. + attr + object + attributes map, +
      3. + + + +
    3. + childNodes + array + optional array of children in the same format +
      4. + + + +
  2. }
    3. + + +
+ + +
+
+
+ +
+
+

Snap.ajax(…)⚓➭

+
+
+
+
+ + + + +

Simple implementation of Ajax +

+ + + + + + + + + + +
+

Parameters

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

or +

+ + + + + + + + + + +
+

Parameters

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

+ 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. +
  2. callback + function + callback
    3. +
  3. scope + object + scope of callback
    4. + +
+
+ + + + + + + +
+
+
+ +
+
+

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. +
  2. y + number + y coordinate from the top left corner of the window
    3. + +
+
+ + + + + + + + + + + +

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

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

Element.transform(tstr)⚓➭

+
+
+
+
+ + + + +

Gets or sets transformation of the element +

+ + + + + + + + + + +
+

Parameters

+
    +
  1. tstr + string + transform string in Snap or SVG format
    2. + +
+
+ + + + + + + + + + + + + +

+ Returns: + + Element + + the current element +

+ + + + + +

or +

+ + + + + + + + + + + + + + +

+ Returns: + + object + + transformation descriptor: +

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

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

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

+ Returns: + + Element + + the child element +

+ + + + +
+
+
+ +
+
+

Element.prepend(el)⚓➭

+
+
+
+
+ + + + +

Prepends the given element to the current one +

+ + + + + + + + + + +
+

Parameters

+
    +
  1. el + Element + element to prepend
    2. + +
+
+ + + + + + + + + + + + + +

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

+ Returns: + + Element + + the child element +

+ + + + +
+
+
+ +
+
+

Element.before(el)⚓➭

+
+
+
+
+ + + + +

Inserts given element before the current one +

+ + + + + + + + + + +
+

Parameters

+
    +
  1. el + Element + element to insert
    2. + +
+
+ + + + + + + + + + + + + +

+ Returns: + + Element + + the parent element +

+ + + + +
+
+
+ +
+
+

Element.after(el)⚓➭

+
+
+
+
+ + + + +

Inserts given element after the current one +

+ + + + + + + + + + +
+

Parameters

+
    +
  1. el + Element + element to insert
    2. + +
+
+ + + + + + + + + + + + + +

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

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

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

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

+ 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. +
  2. value + string + attribute value
    3. + +
+
+ + + + + + + + + + + + + +

+ 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. +
  2. y + string number +
    3. +
  3. width + string number +
    4. +
  4. height + string number +
    5. + +
+
+ + + + + + + + + + + + + +

+ 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. +
  2. y + number +
    3. +
  3. width + number +
    4. +
  4. height + number +
    5. +
  5. refX + number +
    6. +
  6. refY + number +
    7. + +
+
+ + + + + + + + + + + + + +

+ 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. +
  2. duration + number + duration of the animation, in milliseconds
    3. +
  3. easing + function + one of easing functions of mina or custom one
    4. +
  4. callback + function + callback function that fires when animation ends
    5. + +
+
+ + + + + + + + + + + + + +

+ 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. + + + +
    2. + mina + object + mina object, +
      3. + + + +
    3. + curStatus + number + 0..1 — status of the animation: 0 — just started, 1 — just finished, +
      4. + + + +
    4. + status + function + gets or sets the status of the animation, +
      5. + + + +
    5. + stop + function + stops the animation +
      6. + + + +
  2. }
    3. + + +
+ + +
+
+
+ +
+
+

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. +
  2. to + number array + number or array of numbers
    3. +
  3. setter + function + caring function that accepts one number argument
    4. +
  4. duration + number + duration, in milliseconds
    5. +
  5. easing + function + easing function from mina or custom
    6. +
  6. callback + function + callback function to execute when animation ends
    7. + +
+
+ + + + + + + + + + + + + +

+ Returns: + + object + + animation object in mina format +

+ + + + + + + + + + + +
    + + +
  1. {
      + + + +
    1. + id + string + animation id, consider it read-only, +
      2. + + + +
    2. + duration + function + gets or sets the duration of the animation, +
      3. + + + +
    3. + easing + function + easing, +
      4. + + + +
    4. + speed + function + gets or sets the speed of the animation, +
      5. + + + +
    5. + status + function + gets or sets the status of the animation, +
      6. + + + +
    6. + stop + function + stops the animation +
      7. + + + +
  2. }
    3. + + +
+ + + + + + + + 
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. +
  2. duration + number + duration of the animation in milliseconds
    3. +
  3. easing + function + easing function from mina or custom
    4. +
  4. callback + function + callback function that executes when the animation ends
    5. + +
+
+ + + + + + + + + + + + + +

+ 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. +
  2. value + any + value to store
    3. + +
+
+ + + + + + + + + + + + + +

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

+ 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. +
  2. b + number +
    3. +
  3. c + number +
    4. +
  4. d + number +
    5. +
  5. e + number +
    6. +
  6. f + number +
    7. + +
+
+ + + + + + + + +

or +

+ + + + + + + + + + +
+

Parameters

+
    +
  1. matrix + object + Matrix
    2. + +
+
+ + + + + + + +
+
+
+ +
+
+

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. +
  2. y + number + vertical offset distance
    3. + +
+
+ + + + + + + +
+
+
+ +
+
+

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

+
+
+
+
+ + + + +

Scales the matrix +

+ + + + + + + + + + +
+

Parameters

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

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. +
  2. x + number + horizontal origin point from which to rotate
    3. +
  3. y + number + vertical origin point from which to rotate
    4. + +
+
+ + + + + + + +
+
+
+ +
+
+

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. +
  2. y + number +
    3. + +
+
+ + + + + + + + + + + + + +

+ 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. +
  2. y + number +
    3. + +
+
+ + + + + + + + + + + + + +

+ 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. + + + +
  2. + dy + number + translation by y +
    3. + + + +
  3. + scalex + number + scale by x +
    4. + + + +
  4. + scaley + number + scale by y +
    5. + + + +
  5. + shear + number + shear +
    6. + + + +
  6. + rotate + number + rotation in deg +
    7. + + + +
  7. + isSimple + boolean + could it be represented via simple transformations +
    8. + + +
+ + +
+
+
+ +
+
+

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. +
  2. b + number +
    3. +
  3. c + number +
    4. +
  4. d + number +
    5. +
  5. e + number +
    6. +
  6. f + number +
    7. + +
+
+ + + + + + + + +

or +

+ + + + + + + + + + +
+

Parameters

+
    +
  1. svgMatrix + SVGMatrix +
    2. + +
+
+ + + + + + + + + + + + + +

+ 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. +
  2. y + number + y coordinate of the top left corner
    3. +
  3. width + number + width
    4. +
  4. height + number + height
    5. +
  5. rx + number + horizontal radius for rounded corners, default is 0
    6. +
  6. ry + number + vertical radius for rounded corners, default is rx or 0
    7. + +
+
+ + + + + + + + + + + + + +

+ 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. +
  2. y + number + y coordinate of the centre
    3. +
  3. r + number + radius
    4. + +
+
+ + + + + + + + + + + + + +

+ 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. +
  2. x + number + x offset position
    3. +
  3. y + number + y offset position
    4. +
  4. width + number + width of the image
    5. +
  5. height + number + height of the image
    6. + +
+
+ + + + + + + + + + + + + +

+ 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. +
  2. y + number + y coordinate of the centre
    3. +
  3. rx + number + horizontal radius
    4. +
  4. ry + number + vertical radius
    5. + +
+
+ + + + + + + + + + + + + +

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

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

    + Returns: + + object + + the g element +

    + + + + + + + + +

    Usage

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

    or +

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

    Paper.group()⚓➭

    +
    +
    +
    +
    + + + + +

    See Paper.g +

    + + + + + + + + +
    +
    +
    + +
    +
    +

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

    +
    +
    +
    +
    + + + + +

    Creates a nested SVG element. +

    + + + + + + + + + + +
    +

    Parameters

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

    + 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. +
    2. y + number + optional Y of the element
      3. +
    3. width + number + optional width of the element
      4. +
    4. height + number + optional height of the element
      5. +
    5. vbx + number + optional viewbox X
      6. +
    6. vby + number + optional viewbox Y
      7. +
    7. vbw + number + optional viewbox width
      8. +
    8. vbh + number + optional viewbox height
      9. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + the pattern element +

    + + + + +
    +
    +
    + +
    +
    +

    Paper.use(…)⚓➭

    +
    +
    +
    +
    + + + + +

    Creates a <use> element. +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. id + string + optional id of element to link
      2. + +
    +
    + + + + + + + + +

    or +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. id + Element + optional element to link
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + the use element +

    + + + + +
    +
    +
    + +
    +
    +

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

    +
    +
    +
    +
    + + + + +

    Creates a <symbol> element. +

    + + + + + + + + + + +
    +

    Parameters

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

    + Returns: + + object + + the symbol element +

    + + + + +
    +
    +
    + +
    +
    +

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

    +
    +
    +
    +
    + + + + +

    Draws a text string +

    + + + + + + + + + + +
    +

    Parameters

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

    + 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. +
    2. y1 + number + y coordinate position of the start
      3. +
    3. x2 + number + x coordinate position of the end
      4. +
    4. y2 + number + y coordinate position of the end
      5. + +
    +
    + + + + + + + + + + + + + +

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

    or +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. varargs + … + points
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + the polyline element +

    + + + + + + + + +

    Usage

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

    Paper.polygon()⚓➭

    +
    +
    +
    +
    + + + + +

    Draws a polygon. See Paper.polyline +

    + + + + + + + + +
    +
    +
    + +
    +
    +

    Paper.gradient(gradient)⚓➭

    +
    +
    +
    +
    + + + + +

    Creates a gradient element +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. gradient + string + gradient descriptor
      2. + +
    +
    + + + + + + + + + + + +

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

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

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

    + 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. +
    2. flag + boolean + value to determine whether the class should be added or removed
      3. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + Element + + original element. +

    + + + + +
    +
    +
    + +
    +
    +

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

    +
    +
    +
    +
    + + + + +

    Generic animation of numbers +

    + + + + + + + + + + +
    +

    Parameters

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

    + Returns: + + object + + animation descriptor +

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

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

    + Returns: + + object + + See mina +

    + + + + +
    +
    +
    + +
    +
    +

    mina.linear(n)⚓➭

    +
    +
    +
    +
    + + + + +

    Default linear easing +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. n + number + input 0..1
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + number + + output 0..1 +

    + + + + +
    +
    +
    + +
    +
    +

    mina.easeout(n)⚓➭

    +
    +
    +
    +
    + + + + +

    Easeout easing +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. n + number + input 0..1
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + number + + output 0..1 +

    + + + + +
    +
    +
    + +
    +
    +

    mina.easein(n)⚓➭

    +
    +
    +
    +
    + + + + +

    Easein easing +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. n + number + input 0..1
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + number + + output 0..1 +

    + + + + +
    +
    +
    + +
    +
    +

    mina.easeinout(n)⚓➭

    +
    +
    +
    +
    + + + + +

    Easeinout easing +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. n + number + input 0..1
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + number + + output 0..1 +

    + + + + +
    +
    +
    + +
    +
    +

    mina.backin(n)⚓➭

    +
    +
    +
    +
    + + + + +

    Backin easing +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. n + number + input 0..1
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + number + + output 0..1 +

    + + + + +
    +
    +
    + +
    +
    +

    mina.backout(n)⚓➭

    +
    +
    +
    +
    + + + + +

    Backout easing +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. n + number + input 0..1
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + number + + output 0..1 +

    + + + + +
    +
    +
    + +
    +
    +

    mina.elastic(n)⚓➭

    +
    +
    +
    +
    + + + + +

    Elastic easing +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. n + number + input 0..1
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + number + + output 0..1 +

    + + + + +
    +
    +
    + +
    +
    +

    mina.bounce(n)⚓➭

    +
    +
    +
    +
    + + + + +

    Bounce easing +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. n + number + input 0..1
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + number + + output 0..1 +

    + + + + +
    +
    +
    + +
    +
    +

    Paper.filter(filstr)⚓➭

    +
    +
    +
    +
    + + + + +

    Creates a <filter> element +

    + + + + + + + + + + +
    +

    Parameters

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

    + 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. +
    2. y + number + amount of vertical blur, in pixels
      3. + +
    +
    + + + + + + + + + + + + + +

    + 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. +
    2. dy + number + vertical shift of the shadow, in pixels
      3. +
    3. blur + number + amount of blur
      4. +
    4. color + string + color of the shadow
      5. +
    5. opacity + number + 0..1 opacity of the shadow
      6. + +
    +
    + + + + + + + + +

    or +

    + + + + + + + + + + +
    +

    Parameters

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

    which makes blur default to 4. Or +

    + + + + + + + + + + +
    +

    Parameters

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

    + 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)
      2. + +
    +
    + + + + + + + + + + + + + +

    + 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)
      2. + +
    +
    + + + + + + + + + + + + + +

    + 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)
      2. + +
    +
    + + + + + + + + + + + + + +

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

    + 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)
      2. + +
    +
    + + + + + + + + + + + + + +

    + 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)
      2. + +
    +
    + + + + + + + + + + + + + +

    + 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)
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + string + + filter representation +

    + + + + +
    +
    +
    + +
    +
    +

    Element.click(handler)⚓➭

    +
    +
    +
    +
    + + + + +

    Adds a click event handler to the element +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. handler + function + handler for the event
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + Element +

    + + + + +
    +
    +
    + +
    +
    +

    Element.unclick(handler)⚓➭

    +
    +
    +
    +
    + + + + +

    Removes a click event handler from the element +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. handler + function + handler for the event
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + Element +

    + + + + +
    +
    +
    + +
    +
    +

    Element.dblclick(handler)⚓➭

    +
    +
    +
    +
    + + + + +

    Adds a double click event handler to the element +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. handler + function + handler for the event
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + Element +

    + + + + +
    +
    +
    + +
    +
    +

    Element.undblclick(handler)⚓➭

    +
    +
    +
    +
    + + + + +

    Removes a double click event handler from the element +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. handler + function + handler for the event
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + Element +

    + + + + +
    +
    +
    + +
    +
    +

    Element.mousedown(handler)⚓➭

    +
    +
    +
    +
    + + + + +

    Adds a mousedown event handler to the element +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. handler + function + handler for the event
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + Element +

    + + + + +
    +
    +
    + +
    +
    +

    Element.unmousedown(handler)⚓➭

    +
    +
    +
    +
    + + + + +

    Removes a mousedown event handler from the element +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. handler + function + handler for the event
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + Element +

    + + + + +
    +
    +
    + +
    +
    +

    Element.mousemove(handler)⚓➭

    +
    +
    +
    +
    + + + + +

    Adds a mousemove event handler to the element +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. handler + function + handler for the event
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + Element +

    + + + + +
    +
    +
    + +
    +
    +

    Element.unmousemove(handler)⚓➭

    +
    +
    +
    +
    + + + + +

    Removes a mousemove event handler from the element +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. handler + function + handler for the event
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + Element +

    + + + + +
    +
    +
    + +
    +
    +

    Element.mouseout(handler)⚓➭

    +
    +
    +
    +
    + + + + +

    Adds a mouseout event handler to the element +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. handler + function + handler for the event
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + Element +

    + + + + +
    +
    +
    + +
    +
    +

    Element.unmouseout(handler)⚓➭

    +
    +
    +
    +
    + + + + +

    Removes a mouseout event handler from the element +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. handler + function + handler for the event
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + Element +

    + + + + +
    +
    +
    + +
    +
    +

    Element.mouseover(handler)⚓➭

    +
    +
    +
    +
    + + + + +

    Adds a mouseover event handler to the element +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. handler + function + handler for the event
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + Element +

    + + + + +
    +
    +
    + +
    +
    +

    Element.unmouseover(handler)⚓➭

    +
    +
    +
    +
    + + + + +

    Removes a mouseover event handler from the element +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. handler + function + handler for the event
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + Element +

    + + + + +
    +
    +
    + +
    +
    +

    Element.mouseup(handler)⚓➭

    +
    +
    +
    +
    + + + + +

    Adds a mouseup event handler to the element +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. handler + function + handler for the event
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + Element +

    + + + + +
    +
    +
    + +
    +
    +

    Element.unmouseup(handler)⚓➭

    +
    +
    +
    +
    + + + + +

    Removes a mouseup event handler from the element +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. handler + function + handler for the event
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + Element +

    + + + + +
    +
    +
    + +
    +
    +

    Element.touchstart(handler)⚓➭

    +
    +
    +
    +
    + + + + +

    Adds a touchstart event handler to the element +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. handler + function + handler for the event
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + Element +

    + + + + +
    +
    +
    + +
    +
    +

    Element.untouchstart(handler)⚓➭

    +
    +
    +
    +
    + + + + +

    Removes a touchstart event handler from the element +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. handler + function + handler for the event
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + Element +

    + + + + +
    +
    +
    + +
    +
    +

    Element.touchmove(handler)⚓➭

    +
    +
    +
    +
    + + + + +

    Adds a touchmove event handler to the element +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. handler + function + handler for the event
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + Element +

    + + + + +
    +
    +
    + +
    +
    +

    Element.untouchmove(handler)⚓➭

    +
    +
    +
    +
    + + + + +

    Removes a touchmove event handler from the element +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. handler + function + handler for the event
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + Element +

    + + + + +
    +
    +
    + +
    +
    +

    Element.touchend(handler)⚓➭

    +
    +
    +
    +
    + + + + +

    Adds a touchend event handler to the element +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. handler + function + handler for the event
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + Element +

    + + + + +
    +
    +
    + +
    +
    +

    Element.untouchend(handler)⚓➭

    +
    +
    +
    +
    + + + + +

    Removes a touchend event handler from the element +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. handler + function + handler for the event
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + Element +

    + + + + +
    +
    +
    + +
    +
    +

    Element.touchcancel(handler)⚓➭

    +
    +
    +
    +
    + + + + +

    Adds a touchcancel event handler to the element +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. handler + function + handler for the event
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + Element +

    + + + + +
    +
    +
    + +
    +
    +

    Element.untouchcancel(handler)⚓➭

    +
    +
    +
    +
    + + + + +

    Removes a touchcancel event handler from the element +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. handler + function + handler for the event
      2. + +
    +
    + + + + + + + + + + + + + +

    + 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. +
    2. f_out + function + handler for hover out
      3. +
    3. icontext + object + context for hover in handler
      4. +
    4. ocontext + object + context for hover out handler
      5. + +
    +
    + + + + + + + + + + + + + +

    + 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. +
    2. f_out + function + handler for hover out
      3. + +
    +
    + + + + + + + + + + + + + +

    + 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. +
    2. onstart + function + handler for drag start
      3. +
    3. onend + function + handler for drag end
      4. +
    4. mcontext + object + context for moving handler
      5. +
    5. scontext + object + context for drag start handler
      6. +
    6. econtext + object + context for drag end handler
      7. + +
    +
    + + + + + + + + +

    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. + + + +
    2. + y + number + y position of the mouse +
      3. + + + +
    3. + event + object + DOM event object +
      4. + + +
    + + + +

    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. + + + +
    2. + dy + number + shift by y from the start point +
      3. + + + +
    3. + x + number + x position of the mouse +
      4. + + + +
    4. + y + number + y position of the mouse +
      5. + + + +
    5. + event + object + DOM event object +
      6. + + +
    + + + +

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

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

    + 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. +
    2. length + number + length, in pixels, from the start of the path, excluding non-rendering jumps
      3. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + representation of the point: +

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

    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. +
    2. from + number + length, in pixels, from the start of the path to the start of the segment
      3. +
    3. to + number + length, in pixels, from the start of the path to the end of the segment
      4. + +
    +
    + + + + + + + + + + + + + +

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

    + Returns: + + object + + representation of the point: +

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

    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. +
    2. to + number + length, in pixels, from the start of the path to the end of the segment
      3. + +
    +
    + + + + + + + + + + + + + +

    + 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. +
    2. p1y + number + y of the first point of the curve
      3. +
    3. c1x + number + x of the first anchor of the curve
      4. +
    4. c1y + number + y of the first anchor of the curve
      5. +
    5. c2x + number + x of the second anchor of the curve
      6. +
    6. c2y + number + y of the second anchor of the curve
      7. +
    7. p2x + number + x of the second point of the curve
      8. +
    8. p2y + number + y of the second point of the curve
      9. +
    9. t + number + position on the curve (0..1)
      10. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + point information in format: +

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

    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. +
    2. p1y + number + y of the first point of the curve
      3. +
    3. c1x + number + x of the first anchor of the curve
      4. +
    4. c1y + number + y of the first anchor of the curve
      5. +
    5. c2x + number + x of the second anchor of the curve
      6. +
    6. c2y + number + y of the second anchor of the curve
      7. +
    7. p2x + number + x of the second point of the curve
      8. +
    8. p2y + number + y of the second point of the curve
      9. + +
    +
    + + + + + + + + +

    or +

    + + + + + + + + + + +
    +

    Parameters

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

    + Returns: + + object + + bounding box +

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

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

    +
    +
    +
    +
    + + + + +

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

    + + + + + + + + + + +
    +

    Parameters

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

    + 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. +
    2. bbox2 + string + second bounding box
      3. + +
    +
    + + + + + + + + + + + + + +

    + 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. +
    2. path2 + string + path string
      3. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + array + + dots of intersection +

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

    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. +
    2. x + number + x of the point
      3. +
    3. y + number + y of the point
      4. + +
    +
    + + + + + + + + + + + + + +

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

    + Returns: + + object + + bounding box +

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

    Snap.path.toRelative(path)⚓➭

    +
    +
    +
    +
    + + + + +

    Utility method +Converts path coordinates into relative values +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. path + string + path string
      2. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + array + + path string +

    + + + + +
    +
    +
    + +
    +
    +

    Snap.path.toAbsolute(path)⚓➭

    +
    +
    +
    +
    + + + + +

    Utility method +Converts path coordinates into absolute values +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. path + string + path string
      2. + +
    +
    + + + + + + + + + + + + + +

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

    + 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. +
    2. matrix + object + see Matrix
      3. + +
    +
    + + + + + + + + + + + + + +

    + 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. +
    2. thisArg + object + context object for the callback
      3. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + Set object +

    + + + + +
    +
    +
    + +
    +
    +

    Set.animate(…)⚓➭

    +
    +
    +
    +
    + + + + +

    Animates each element in set in sync. +

    + + + + + + + + + + +
    +

    Parameters

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

    or +

    + + + + + + + + + + +
    +

    Parameters

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

    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. +
    2. callback + function + function to run
      3. + +
    +
    + + + + + + + + +

    or +

    + + + + + + + + + + +
    +

    Parameters

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

    or +

    + + + + + + + + + + +
    +

    Parameters

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

    + 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. +
    2. count + number + number of element to remove
      3. +
    3. insertion… + object + elements to insert
      4. + +
    +
    + + + + + + + + + + + + + +

    + Returns: + + object + + set elements that were deleted +

    + + + + +
    +
    +
    + +
    +
    +

    Set.exclude(element)⚓➭

    +
    +
    +
    +
    + + + + +

    Removes given element from the set +

    + + + + + + + + + + +
    +

    Parameters

    +
      +
    1. element + object + element to remove
      2. + +
    +
    + + + + + + + + + + + + + +

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

    + + + + +
    +
    +
    + +
    +
    +
    +
    + + + + -- cgit 1.2.3-korg