+ Element.add()⚓➭
See Element.append + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+ Snap(…)⚓➭
+
+
+
+
+
+
Creates a drawing surface or wraps existing SVG element.
-Element.after(el)⚓➭
Inserts given element after the current one + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- width + number string + width of surface +
- height + number string + height of surface + +
or
-Parameters
- el -Element -element to insert -
Returns: Element the parent element
-Element.animate(attrs, duration, [easing], [callback])⚓➭
Animates the given attributes of the element + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- DOM + SVGElement + element to be wrapped into Snap structure + +
or
-Parameters
- attrs -object -key-value pairs of destination attributes -
- duration -number -duration of the animation in milliseconds -
- easing -optional -function -easing function from mina or custom -
- callback -optional -function -callback function that executes when the animation ends -
Returns: Element the current element
-Element.append(el)⚓➭
Appends the given element to current one + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- query + string + CSS query selector + +
+ Returns: + + object + + Element +
+ + + + +Snap.format(token, json)⚓➭
+
+
+
+
+
+
-
Replaces construction of type {<name>} to the corresponding argument
Parameters
- el -Element Set -element to append -
Returns: Element the parent element
-Element.asPX(attr, [value])⚓➭
Returns given attribute of the element as a px value (not %, em, etc.)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- token + string + string to format +
- json + object + object which properties are used as a replacement + +
+ Returns: + + string + + formatted string +
+ + + + + + + + +Usage
+ + + + + + + + + + + +// this draws a rectangular shape equivalent to "M10,20h40v50h-40z"
+paper.path(Snap.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width']}z", {
+ x: 10,
+ y: 20,
+ dim: {
+ width: 40,
+ height: 50,
+ "negative width": -40
+ }
+}));Snap.rad(deg)⚓➭
+
+
+
+
+
+
-
Transform angle to radians
-Parameters
- attr -string -attribute name -
- value -optional -string -attribute value -
Returns: Element result of query selection
-Element.attr(…)⚓➭
Gets or sets given attributes of the element + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- deg + number + angle in degrees + +
+ Returns: + + number + + angle in radians +
+ + + + +Snap.deg(rad)⚓➭
+
+
+
+
+
+
-
+ Transform angle to degrees
-Parameters
- params -object -contains key-value pairs of attributes you want to set -
or + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- rad + number + angle in radians + +
+ Returns: + + number + + angle in degrees +
+ + + + +Snap.angle(x1, y1, x2, y2, [x3], [y3])⚓➭
+
+
+
+
+
+
-
+ Returns an angle between two or three points
-Parameters
- param -string -name of the attribute -
Returns: Element the current element
-or + + + + + + + + + + + + +
Parameters
+ + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- x1 + number + x coord of first point +
- y1 + number + y coord of first point +
- x2 + number + x coord of second point +
- y2 + number + y coord of second point +
- x3 + number + x coord of third point +
- y3 + number + y coord of third point + +
+ Returns: + + number + + angle in degrees +
+ + + + +Snap.is(o, type)⚓➭
+
+
+
+
+
+
+ Handy replacement for the typeof operator
Returns: string value of attribute
-Usage
el.attr({
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+ - o
+ …
+ any object or primitive
+ - type
+ string
+ name of the type, e.g.,
string, function, number, etc.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns:
+
+ boolean
+
+ true if given value is of given type
+
+
+
+
+
+ Snap.snapTo(values, value, [tolerance])⚓➭
+
+
+
+
+
+
+ Snaps given value to given grid +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- values + array number + given array of values or step of the grid +
- value + number + value to adjust +
- tolerance
+ number
+ maximum distance to the target value that would trigger the snap. Default is
10.
+
+
+ Returns: + + number + + adjusted value +
+ + + + +Matrix.add(…)⚓➭
+
+
+
+
+
+
+ Adds the given matrix to existing one +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- a + number + +
- b + number + +
- c + number + +
- d + number + +
- e + number + +
- f + number + + +
or +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- matrix + object + Matrix + +
Matrix.invert()⚓➭
+
+
+
+
+
+
+ Returns an inverted version of the matrix +
+ + + + + + + + + + + + + + ++ Returns: + + object + + Matrix +
+ + + + +Matrix.clone()⚓➭
+
+
+
+
+
+
+ Returns a copy of the matrix +
+ + + + + + + + + + + + + + ++ Returns: + + object + + Matrix +
+ + + + +Matrix.translate(x, y)⚓➭
+
+
+
+
+
+
+ Translate the matrix +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- x + number + horizontal offset distance +
- y + number + vertical offset distance + +
Matrix.scale(x, [y], [cx], [cy])⚓➭
+
+
+
+
+
+
+ Scales the matrix +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- x
+ number
+ amount to be scaled, with
1resulting in no change
+ - y
+ number
+ amount to scale along the vertical axis. (Otherwise
xapplies to both axes.)
+ - cx + number + horizontal origin point from which to scale +
- cy + number + vertical origin point from which to scale + +
Default cx, cy is the middle point of the element. +
+ + + + + + + + +Matrix.rotate(a, x, y)⚓➭
+
+
+
+
+
+
+ Rotates the matrix +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- a + number + angle of rotation, in degrees +
- x + number + horizontal origin point from which to rotate +
- y + number + vertical origin point from which to rotate + +
Matrix.x(x, y)⚓➭
+
+
+
+
+
+
+ Returns x coordinate for given point after transformation described by the matrix. See also Matrix.y +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- x + number + +
- y + number + + +
+ Returns: + + number + + x +
+ + + + +Matrix.y(x, y)⚓➭
+
+
+
+
+
+
+ Returns y coordinate for given point after transformation described by the matrix. See also Matrix.x +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- x + number + +
- y + number + + +
+ Returns: + + number + + y +
+ + + + +Matrix.split()⚓➭
+
+
+
+
+
+
+ Splits matrix into primitive transformations +
+ + + + + + + + + + + + + + ++ Returns: + + object + + in format: +
+ + + + + + + + + + + +-
+
+
+
- + dx + number + translation by x + + + + +
- + dy + number + translation by y + + + + +
- + scalex + number + scale by x + + + + +
- + scaley + number + scale by y + + + + +
- + shear + number + shear + + + + +
- + rotate + number + rotation in deg + + + + +
- + isSimple + boolean + could it be represented via simple transformations + + + +
Matrix.toTransformString()⚓➭
+
+
+
+
+
+
+ Returns transform string that represents given matrix +
+ + + + + + + + + + + + + + ++ Returns: + + string + + transform string +
+ + + + +Snap.Matrix(…)⚓➭
+
+
+
+
+
+
+ Utility method +Returns a matrix based on the given parameters +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- a + number + +
- b + number + +
- c + number + +
- d + number + +
- e + number + +
- f + number + + +
or +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- svgMatrix + SVGMatrix + + +
+ Returns: + + object + + Matrix +
+ + + + +Snap.getRGB(color)⚓➭
+
+
+
+
+
+
+ Parses color string as RGB object +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- color + string + color string in one of the following formats: + +
-
+
+
+
+
+
+
+
+
+
+
+
+
- Color name (
red,green,cornflowerblue, etc)
+
+
+
+
+
+
+
+
+
+
+
+ - #••• — shortened HTML color: (
#000,#fc0, etc.)
+
+
+
+
+
+
+
+
+
+
+
+ - #•••••• — full length HTML color: (
#000000,#bd2300)
+
+
+
+
+
+
+
+
+
+
+
+ - rgb(•••, •••, •••) — red, green and blue channels values: (
rgb(200, 100, 0))
+
+
+
+
+
+
+
+
+
+
+
+ - rgba(•••, •••, •••, •••) — also with opacity + + + + + + + + + + + +
- rgb(•••%, •••%, •••%) — same as above, but in %: (
rgb(100%, 175%, 0%))
+
+
+
+
+
+
+
+
+
+
+
+ - rgba(•••%, •••%, •••%, •••%) — also with opacity + + + + + + + + + + + +
- hsb(•••, •••, •••) — hue, saturation and brightness values: (
hsb(0.5, 0.25, 1))
+
+
+
+
+
+
+
+
+
+
+
+ - hsba(•••, •••, •••, •••) — also with opacity + + + + + + + + + + + +
- hsb(•••%, •••%, •••%) — same as above, but in % + + + + + + + + + + + +
- hsba(•••%, •••%, •••%, •••%) — also with opacity + + + + + + + + + + + +
- hsl(•••, •••, •••) — hue, saturation and luminosity values: (
hsb(0.5, 0.25, 0.5))
+
+
+
+
+
+
+
+
+
+
+
+ - hsla(•••, •••, •••, •••) — also with opacity + + + + + + + + + + + +
- hsl(•••%, •••%, •••%) — same as above, but in % + + + + + + + + + + + +
- hsla(•••%, •••%, •••%, •••%) — also with opacity + + + + + + + + + + + +
Note that % can be used any time: rgb(20%, 255, 50%).
+
+ Returns: + + object + + RGB object in the following format: +
+ + + + + + + + + + + +-
+
+
+
- {
-
+
+
+
+
- + r + number + red, + + + + +
- + g + number + green, + + + + +
- + b + number + blue, + + + + +
- + hex + string + color in HTML/CSS format: #••••••, + + + + +
- + error + boolean + true if string can't be parsed + + + + +
- } + + +
Snap.hsb(h, s, b)⚓➭
+
+
+
+
+
+
+ Converts HSB values to a hex representation of the color +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- h + number + hue +
- s + number + saturation +
- b + number + value or brightness + +
+ Returns: + + string + + hex representation of the color +
+ + + + +Snap.hsl(h, s, l)⚓➭
+
+
+
+
+
+
+ Converts HSL values to a hex representation of the color +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- h + number + hue +
- s + number + saturation +
- l + number + luminosity + +
+ Returns: + + string + + hex representation of the color +
+ + + + +Snap.rgb(r, g, b)⚓➭
+
+
+
+
+
+
+ Converts RGB values to a hex representation of the color +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- r + number + red +
- g + number + green +
- b + number + blue + +
+ Returns: + + string + + hex representation of the color +
+ + + + +Snap.color(clr)⚓➭
+
+
+
+
+
+
+ Parses the color string and returns an object featuring the color's component values +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- clr + string + color string in one of the supported formats (see Snap.getRGB) + +
+ Returns: + + object + + Combined RGB/HSB object in the following format: +
+ + + + + + + + + + + +-
+
+
+
- {
-
+
+
+
+
- + r + number + red, + + + + +
- + g + number + green, + + + + +
- + b + number + blue, + + + + +
- + hex + string + color in HTML/CSS format: #••••••, + + + + +
-
+ error
+ boolean
+
trueif string can't be parsed, +
+
+
+
+ - + h + number + hue, + + + + +
- + s + number + saturation, + + + + +
- + v + number + value (brightness), + + + + +
- + l + number + lightness + + + + +
- } + + +
Snap.hsb2rgb(h, s, v)⚓➭
+
+
+
+
+
+
+ Converts HSB values to an RGB object +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- h + number + hue +
- s + number + saturation +
- v + number + value or brightness + +
+ Returns: + + object + + RGB object in the following format: +
+ + + + + + + + + + + +-
+
+
+
- {
-
+
+
+
+
- + r + number + red, + + + + +
- + g + number + green, + + + + +
- + b + number + blue, + + + + +
- + hex + string + color in HTML/CSS format: #•••••• + + + + +
- } + + +
Snap.hsl2rgb(h, s, l)⚓➭
+
+
+
+
+
+
+ Converts HSL values to an RGB object +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- h + number + hue +
- s + number + saturation +
- l + number + luminosity + +
+ Returns: + + object + + RGB object in the following format: +
+ + + + + + + + + + + +-
+
+
+
- {
-
+
+
+
+
- + r + number + red, + + + + +
- + g + number + green, + + + + +
- + b + number + blue, + + + + +
- + hex + string + color in HTML/CSS format: #•••••• + + + + +
- } + + +
Snap.rgb2hsb(r, g, b)⚓➭
+
+
+
+
+
+
+ Converts RGB values to an HSB object +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- r + number + red +
- g + number + green +
- b + number + blue + +
+ Returns: + + object + + HSB object in the following format: +
+ + + + + + + + + + + +-
+
+
+
- {
-
+
+
+
+
- + h + number + hue, + + + + +
- + s + number + saturation, + + + + +
- + b + number + brightness + + + + +
- } + + +
Snap.rgb2hsl(r, g, b)⚓➭
+
+
+
+
+
+
+ Converts RGB values to an HSL object +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- r + number + red +
- g + number + green +
- b + number + blue + +
+ Returns: + + object + + HSL object in the following format: +
+ + + + + + + + + + + +-
+
+
+
- {
-
+
+
+
+
- + h + number + hue, + + + + +
- + s + number + saturation, + + + + +
- + l + number + luminosity + + + + +
- } + + +
Snap.parsePathString(pathString)⚓➭
+
+
+
+
+
+
+ Utility method +Parses given path string into an array of arrays of path segments +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- pathString + string array + path string or array of segments (in the last case it is returned straight away) + +
+ Returns: + + array + + array of segments +
+ + + + +Snap.parseTransformString(TString)⚓➭
+
+
+
+
+
+
+ Utility method +Parses given transform string into an array of transformations +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- TString + string array + transform string or array of transformations (in the last case it is returned straight away) + +
+ Returns: + + array + + array of transformations +
+ + + + +Snap.select(query)⚓➭
+
+
+
+
+
+
+ Wraps a DOM element specified by CSS selector as Element +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- query + string + CSS selector of the element + +
+ Returns: + + Element + + the current element +
+ + + + +Snap.selectAll(query)⚓➭
+
+
+
+
+
+
+ Wraps DOM elements specified by CSS selector as set or array of Element +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- query + string + CSS selector of the element + +
+ Returns: + + Element + + the current element +
+ + + + +Element.attr(…)⚓➭
+
+
+
+
+
+
Gets or sets given attributes of the element +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- params + object + contains key-value pairs of attributes you want to set + +
or +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- param + string + name of the attribute + +
+ Returns: + + Element + + the current element +
+ + + + + +or +
+ + + + + + + + + + + + + + ++ Returns: + + string + + value of attribute +
+ + + + + + + + +Usage
+ + + + + + + + + + + +el.attr({
fill: "#fc0",
stroke: "#000",
strokeWidth: 2, // CamelCase...
"fill-opacity": 0.5 // or dash-separated names
});
-console.log(el.attr("fill")); // #fc0
-Element.before(el)⚓➭
Inserts given element before the current one +console.log(el.attr("fill")); // #fc0 + + + + + +
Element.getBBox()⚓➭
+
+
+
+
+
+
-
Returns the bounding box descriptor for the given element
-Parameters
- el -Element -element to insert -
Returns: Element the parent element
-Element.click(handler)⚓➭
Adds a click event handler to the element + + + + + + + + + + + + + + +
+ Returns: + + object + + bounding box descriptor: +
+ + + + + + + + + + + +-
+
+
+
- {
-
+
+
+
+
- + cx: + number + x of the center, + + + + +
- + cy: + number + x of the center, + + + + +
- + h: + number + height, + + + + +
- + height: + number + height, + + + + +
- + path: + string + path command for the box, + + + + +
- + r0: + number + radius of a circle that fully encloses the box, + + + + +
- + r1: + number + radius of the smallest circle that can be enclosed, + + + + +
- + r2: + number + radius of the largest circle that can be enclosed, + + + + +
- + vb: + string + box as a viewbox command, + + + + +
- + w: + number + width, + + + + +
- + width: + number + width, + + + + +
- + x2: + number + x of the right side, + + + + +
- + x: + number + x of the left side, + + + + +
- + y2: + number + y of the bottom edge, + + + + +
- + y: + number + y of the top edge + + + + +
- } + + +
Element.transform(tstr)⚓➭
+
+
+
+
+
+
-
Gets or sets transformation of the element
-Parameters
- handler -function -handler for the event -
Returns: object Element
-Element.clone()⚓➭
Creates a clone of the element and inserts it after the element + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- tstr + string + transform string in Snap or SVG format + +
+ Returns: + + Element + + the current element +
+ + + + + +or
-Returns: Element the clone
-Element.data(key, [value])⚓➭
Adds or retrieves given value associated with given key. (Don’t confuse
-with data- attributes)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns: + + object + + transformation descriptor: +
+ + + + + + + + + + + +-
+
+
+
- {
-
+
+
+
+
- + string + string + transform string, + + + + +
- + globalMatrix + Matrix + matrix of all transformations applied to element or its parents, + + + + +
- + localMatrix + Matrix + matrix of transformations applied only to the element, + + + + +
- + diffMatrix + Matrix + matrix of difference between global and local transformations, + + + + +
- + global + string + global transformation as string, + + + + +
- + local + string + local transformation as string, + + + + +
-
+ toString
+ function
+ returns
stringproperty +
+
+
+
+
- } + + +
Element.parent()⚓➭
+
+
+
+
+
+
+ Returns the element's parent
-See also Element.removeData + + + + + + + + + + + + + + +
+ Returns: + + Element + + the parent element +
+ + + + +Element.append(el)⚓➭
+
+
+
+
+
+
-
+ Appends the given element to current one
-Parameters
- key -string -key to store data -
- value -optional -any -value to store -
Returns: object Element
-or, if value is not specified: + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- el + Element Set + element to append + +
+ Returns: + + Element + + the parent element +
+ + + + +Element.add()⚓➭
+
+
+
+
+
+
See Element.append
-Returns: any value
-Usage
for (var i = 0, i < 5, i++) {
- paper.circle(10 + 15 * i, 10, 10)
- .attr({fill: "#000"})
- .data("i", i)
- .click(function () {
- alert(this.data("i"));
- });
-}
-Element.dblclick(handler)⚓➭
Adds a double click event handler to the element + + + + + + + + +
Element.prepend(el)⚓➭
+
+
+
+
+
+
-
Prepends the given element to the current one
-Parameters
- handler -function -handler for the event -
Returns: object Element
-Element.drag(onmove, onstart, onend, [mcontext], [scontext], [econtext])⚓➭
Adds event handlers for an element's drag gesture + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- el + Element + element to prepend + +
+ Returns: + + Element + + the parent element +
+ + + + +Element.before(el)⚓➭
+
+
+
+
+
+
-
+ Inserts given element before the current one
-Parameters
- onmove -function -handler for moving -
- onstart -function -handler for drag start -
- onend -function -handler for drag end -
- mcontext -optional -object -context for moving handler -
- scontext -optional -object -context for drag start handler -
- econtext -optional -object -context for drag end handler -
Additionaly following drag events are triggered: drag.start.<id> on start,
-drag.end.<id> on end and drag.move.<id> on every move. When element is dragged over another element
-drag.over.<id> fires as well.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- el + Element + element to insert + +
+ Returns: + + Element + + the parent element +
+ + + + +Element.after(el)⚓➭
+
+
+
+
+
+
+ Inserts given element after the current one
-Start event and start handler are called in specified context or in context of the element with following parameters: + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- el + Element + element to insert + +
+ Returns: + + Element + + the parent element +
+ + + + +Element.insertBefore(el)⚓➭
+
+
+
+
+
+
+ Inserts the element after the given one
-- xnumberx position of the mouse -
- ynumbery position of the mouse -
- eventobjectDOM event object -
Move event and move handler are called in specified context or in context of the element with following parameters: + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- el + Element + element next to whom insert to + +
+ Returns: + + Element + + the parent element +
+ + + + +Element.insertAfter(el)⚓➭
+
+
+
+
+
+
+ Inserts the element after the given one
-- dxnumbershift by x from the start point -
- dynumbershift by y from the start point -
- xnumberx position of the mouse -
- ynumbery position of the mouse -
- eventobjectDOM event object -
End event and end handler are called in specified context or in context of the element with following parameters: + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- el + Element + element next to whom insert to + +
+ Returns: + + Element + + the parent element +
+ + + + +Element.remove()⚓➭
+Adds event handlers for an element's drag gesture + + + + + + + + + + + + + + +
+ Returns: + + Element + + the detached element +
+ + + + +Element.select(query)⚓➭
+
+
+
+
+
+
-
+ Gathers the nested Element matching the given set of CSS selectors
-Parameters
- onmove -function -handler for moving -
- onstart -function -handler for drag start -
- onend -function -handler for drag end -
- mcontext -optional -object -context for moving handler -
- scontext -optional -object -context for drag start handler -
- econtext -optional -object -context for drag end handler -
Additionaly following drag events are triggered: drag.start.<id> on start,
-drag.end.<id> on end and drag.move.<id> on every move. When element is dragged over another element
-drag.over.<id> fires as well.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- query + string + CSS selector + +
+ Returns: + + Element + + result of query selection +
+ + + + +Element.selectAll(query)⚓➭
+
+
+
+
+
+
+ Gathers nested Element objects matching the given set of CSS selectors
-Start event and start handler are called in specified context or in context of the element with following parameters: + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- query + string + CSS selector + +
+ Returns: + + Set + + array + + result of query selection +
+ + + + +Element.asPX(attr, [value])⚓➭
+
+
+
+
+
+
+ Returns given attribute of the element as a px value (not %, em, etc.)
- xnumberx position of the mouse -
- ynumbery position of the mouse -
- eventobjectDOM event object -
Move event and move handler are called in specified context or in context of the element with following parameters: + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- attr + string + attribute name +
- value + string + attribute value + +
+ Returns: + + Element + + result of query selection +
+ + + + +Element.use()⚓➭
+
+
+
+
+
+
+ Creates a <use> element linked to the current element
- dxnumbershift by x from the start point -
- dynumbershift by y from the start point -
- xnumberx position of the mouse -
- ynumbery position of the mouse -
- eventobjectDOM event object -
End event and end handler are called in specified context or in context of the element with following parameters: + + + + + + + + + + + + + + +
+ Returns:
+
+ Element
+
+ the <use> element
+
Element.clone()⚓➭
+
+
+
+
+
+
Creates a clone of the element and inserts it after the element
-- eventobjectDOM event object -
Returns: object Element
-Element.getBBox()⚓➭
Returns the bounding box descriptor for the given element + + + + + + + + + + + + + + +
+ Returns: + + Element + + the clone +
+ + + + +Element.toDefs()⚓➭
+
+
+
+
+
+
Moves element to the shared <defs> area
Returns: object bounding box descriptor:
-- {
- cx:numberx of the center, -
- cy:numberx of the center, -
- h:numberheight, -
- height:numberheight, -
- path:stringpath command for the box, -
- r0:numberradius of a circle that fully encloses the box, -
- r1:numberradius of the smallest circle that can be enclosed, -
- r2:numberradius of the largest circle that can be enclosed, -
- vb:stringbox as a viewbox command, -
- w:numberwidth, -
- width:numberwidth, -
- x2:numberx of the right side, -
- x:numberx of the left side, -
- y2:numbery of the bottom edge, -
- y:numbery of the top edge -
- }
Element.getPointAtLength(length)⚓➭
Returns coordinates of the point located at the given length on the given path (only works for path elements)
-
Parameters
- length -number -length, in pixels, from the start of the path, excluding non-rendering jumps -
Returns: object representation of the point:
-- {
- x:numberx coordinate, -
- y:numbery coordinate, -
- alpha:numberangle of derivative -
- }
Element.getSubpath(from, to)⚓➭
Returns subpath of a given element from given start and end lengths (only works for path elements)
-
Parameters
- from -number -length, in pixels, from the start of the path to the start of the segment -
- to -number -length, in pixels, from the start of the path to the end of the segment -
Returns: string path string definition for the segment
-Element.getTotalLength()⚓➭
Returns the length of the path in pixels (only works for path elements)
-
Returns: number length
-Element.hover(f_in, f_out, [icontext], [ocontext])⚓➭
Adds hover event handlers to the element -
-Parameters
- f_in -function -handler for hover in -
- f_out -function -handler for hover out -
- icontext -optional -object -context for hover in handler -
- ocontext -optional -object -context for hover out handler -
Returns: object Element
-Element.inAnim()⚓➭
Returns a set of animations that may be able to manipulate the current element -
-Returns: object in format:
-- {
- animobjectanimation object, -
- curStatusnumber0..1 — status of the animation: 0 — just started, 1 — just finished, -
- statusfunctiongets or sets the status of the animation, -
- stopfunctionstops the animation -
- }
Element.innerSVG()⚓➭
Returns SVG code for the element's contents, equivalent to HTML's innerHTML
-
Returns: string SVG code for the element
-Element.insertAfter(el)⚓➭
Inserts the element after the given one -
-Parameters
- el -Element -element next to whom insert to -
Returns: Element the parent element
-Element.insertBefore(el)⚓➭
Inserts the element after the given one -
-Parameters
- el -Element -element next to whom insert to -
Returns: Element the parent element
-Element.marker(x, y, width, height, refX, refY)⚓➭
Creates a <marker> element from the current element
-To create a marker you have to specify the bounding rect and reference point:
-
Parameters
- x -number - -
- y -number - -
- width -number - -
- height -number - -
- refX -number - -
- refY -number - -
Returns: Element the <marker> element
You can specify the marker later as an argument for marker-start, marker-end, marker-mid, and marker attributes. The marker attribute places the marker at every point along the path, and marker-mid places them at every point except the start and end.
-
Element.mousedown(handler)⚓➭
Adds a mousedown event handler to the element -
-Parameters
- handler -function -handler for the event -
Returns: object Element
-Element.mousemove(handler)⚓➭
Adds a mousemove event handler to the element -
-Parameters
- handler -function -handler for the event -
Returns: object Element
-Element.mouseout(handler)⚓➭
Adds a mouseout event handler to the element -
-Parameters
- handler -function -handler for the event -
Returns: object Element
-Element.mouseover(handler)⚓➭
Adds a mouseover event handler to the element -
-Parameters
- handler -function -handler for the event -
Returns: object Element
-Element.mouseup(handler)⚓➭
Adds a mouseup event handler to the element -
-Parameters
- handler -function -handler for the event -
Returns: object Element
-Element.parent()⚓➭
Returns the element's parent -
-Returns: Element the parent element
-Element.pattern(x, y, width, height)⚓➭
Creates a <pattern> element from the current element
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns: + + Element + + the clone +
+ + + + +Element.pattern(x, y, width, height)⚓➭
+
+
+
+
+
+
-
Creates a <pattern> element from the current element
To create a pattern you have to specify the pattern rect:
Parameters
- x -string number - -
- y -string number - -
- width -string number - -
- height -string number - -
Returns: Element the <pattern> element
You can use pattern later on as an argument for fill attribute:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- x + string number + +
- y + string number + +
- width + string number + +
- height + string number + + +
+ Returns:
+
+ Element
+
+ the <pattern> element
+
You can use pattern later on as an argument for fill attribute:
var p = paper.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({
+
+
+
+
+
+
+
+
+
+
+
+
+
+ var p = paper.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({
fill: "none",
stroke: "#bada55",
strokeWidth: 5
@@ -449,444 +4712,2237 @@ To create a pattern you have to specify the pattern rect:
c = paper.circle(200, 200, 100);
c.attr({
fill: p
-});
-
Element.prepend(el)⚓➭
Prepends the given element to the current one +}); + + + + + +
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
- el -Element -element to prepend -
Returns: Element the parent element
-Element.remove()⚓➭
Removes element from the DOM + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- x + number + +
- y + number + +
- width + number + +
- height + number + +
- refX + number + +
- refY + number + + +
+ Returns:
+
+ Element
+
+ the <marker> element
+
You can specify the marker later as an argument for marker-start, marker-end, marker-mid, and marker attributes. The marker attribute places the marker at every point along the path, and marker-mid places them at every point except the start and end.
Returns: Element the detached element
-Element.removeData([key])⚓➭
Removes value associated with an element by given key. + + + + + + + + +
Snap.animation(attr, duration, [easing], [callback])⚓➭
+
+
+
+
+
+
+ Creates an animation object +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- attr + object + attributes of final destination +
- duration + number + duration of the animation, in milliseconds +
- easing + function + one of easing functions of mina or custom one +
- callback + function + callback function that fires when animation ends + +
+ Returns: + + object + + animation object +
+ + + + +Element.inAnim()⚓➭
+
+
+
+
+
+
+ Returns a set of animations that may be able to manipulate the current element +
+ + + + + + + + + + + + + + ++ Returns: + + object + + in format: +
+ + + + + + + + + + + +-
+
+
+
- {
-
+
+
+
+
- + anim + object + animation object, + + + + +
- + curStatus + number + 0..1 — status of the animation: 0 — just started, 1 — just finished, + + + + +
- + status + function + gets or sets the status of the animation, + + + + +
- + stop + function + stops the animation + + + + +
- } + + +
Snap.animate(from, to, setter, duration, [easing], [callback])⚓➭
+
+
+
+
+
+
+ Runs generic animation of one number into another with a caring function +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- from + number array + number or array of numbers +
- to + number array + number or array of numbers +
- setter + function + caring function that accepts one number argument +
- duration + number + duration, in milliseconds +
- easing + function + easing function from mina or custom +
- callback + function + callback function to execute when animation ends + +
+ Returns: + + object + + animation object in mina format +
+ + + + + + + + + + + +-
+
+
+
- {
-
+
+
+
+
- + id + string + animation id, consider it read-only, + + + + +
- + duration + function + gets or sets the duration of the animation, + + + + +
- + easing + function + easing, + + + + +
- + speed + function + gets or sets the speed of the animation, + + + + +
- + status + function + gets or sets the status of the animation, + + + + +
- + stop + function + stops the animation + + + + +
- } + + +
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
+-
+
- attrs + object + key-value pairs of destination attributes +
- duration + number + duration of the animation in milliseconds +
- easing + function + easing function from mina or custom +
- callback + function + callback function that executes when the animation ends + +
+ Returns: + + Element + + the current element +
+ + + + +Element.data(key, [value])⚓➭
+
+
+
+
+
+
+ Adds or retrieves given value associated with given key. (Don’t confuse
+with data- attributes)
+
See also Element.removeData +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- key + string + key to store data +
- value + any + value to store + +
+ Returns: + + object + + Element +
+ + + + + +or, if value is not specified: +
+ + + + + + + + + + + + + + ++ Returns: + + any + + value +
+ + + + + + + + +Usage
+ + + + + + + + + + + +for (var i = 0, i < 5, i++) {
+ paper.circle(10 + 15 * i, 10, 10)
+ .attr({fill: "#000"})
+ .data("i", i)
+ .click(function () {
+ alert(this.data("i"));
+ });
+}Element.removeData([key])⚓➭
+
+
+
+
+
+
-
Removes value associated with an element by given key. If key is not provided, removes all the data of the element.
-Parameters
- key -optional -string -key -
Returns: object Element
-Element.select(query)⚓➭
undefined⚓➭
+
+
+
+
+
+
-
Returns SVG code for the element, equivalent to HTML's outerHTML
Parameters
- query -string -CSS selector -
Returns: Element result of query selection
-Element.selectAll(query)⚓➭
Gathers nested Element objects matching the given set of CSS selectors + + + + + + + + + + + + + + +
+ Returns: + + string + + SVG code for the element +
+ + + + +Element.innerSVG()⚓➭
+
+
+
+
+
+
-
Returns SVG code for the element's contents, equivalent to HTML's innerHTML
Parameters
- query -string -CSS selector -
Returns: Set array result of query selection
-Element.stop()⚓➭
Stops all the animations for the current element + + + + + + + + + + + + + + +
+ Returns: + + string + + SVG code for the element +
+ + + + +Snap.parse(svg)⚓➭
+
+
+
+
+
+
Parses SVG fragment and converts it into a Fragment
-Returns: Element the current element
-Element.toDefs()⚓➭
Moves element to the shared <defs> area
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- svg + string + SVG string + +
+ Returns: + + Fragment + + the Fragment +
+ + + + +Fragment.select()⚓➭
+
+
+
+
+
+
See Element.select
-Returns: Element the clone
-Element.toString()⚓➭
Returns SVG code for the element, equivalent to HTML's outerHTML
+
+
+
+
+
+
+
+
+
Fragment.selectAll()⚓➭
+
+
+
+
+
+
-
Returns: string SVG code for the element
-Returns SVG code for the Paper + + + + + + + + +
Snap.fragment(varargs)⚓➭
+
+
+
+
+
+
Creates a DOM fragment from a given list of elements or strings
-Returns: string SVG code for the Paper
-Element.touchcancel(handler)⚓➭
Adds a touchcancel event handler to the element + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- varargs + … + SVG string + +
+ Returns: + + Fragment + + the Fragment +
+ + + + +Paper.el(name, attr)⚓➭
+
+
+
+
+
+
-
Creates an element on paper with a given name and no attributes
-Parameters
- handler -function -handler for the event -
Returns: object Element
-Element.touchend(handler)⚓➭
Adds a touchend event handler to the element -
-Parameters
- handler -function -handler for the event -
Returns: object Element
-Element.touchmove(handler)⚓➭
Adds a touchmove event handler to the element -
-Parameters
- handler -function -handler for the event -
Returns: object Element
-Element.touchstart(handler)⚓➭
Adds a touchstart event handler to the element -
-Parameters
- handler -function -handler for the event -
Returns: object Element
-Element.transform(tstr)⚓➭
Gets or sets transformation of the element -
-Parameters
- tstr -string -transform string in Snap or SVG format -
Returns: Element the current element
-or -
-Returns: object transformation descriptor:
-- {
- stringstringtransform string, -
- globalMatrixMatrixmatrix of all transformations applied to element or its parents, -
- localMatrixMatrixmatrix of transformations applied only to the element, -
- diffMatrixMatrixmatrix of difference between global and local transformations, -
- globalstringglobal transformation as string, -
- localstringlocal transformation as string, -
- toStringfunctionreturns
stringproperty -
- }
Element.unclick(handler)⚓➭
Removes a click event handler from the element -
-Parameters
- handler -function -handler for the event -
Returns: object Element
-Element.undblclick(handler)⚓➭
Removes a double click event handler from the element -
-Parameters
- handler -function -handler for the event -
Returns: object Element
-Element.undrag()⚓➭
Removes all drag event handlers from the given element -
-Element.unhover(f_in, f_out)⚓➭
Removes hover event handlers from the element -
-Parameters
- f_in -function -handler for hover in -
- f_out -function -handler for hover out -
Returns: object Element
-Element.unmousedown(handler)⚓➭
Removes a mousedown event handler from the element -
-Parameters
- handler -function -handler for the event -
Returns: object Element
-Element.unmousemove(handler)⚓➭
Removes a mousemove event handler from the element -
-Parameters
- handler -function -handler for the event -
Returns: object Element
-Element.unmouseout(handler)⚓➭
Removes a mouseout event handler from the element -
-Parameters
- handler -function -handler for the event -
Returns: object Element
-Element.unmouseover(handler)⚓➭
Removes a mouseover event handler from the element -
-Parameters
- handler -function -handler for the event -
Returns: object Element
-Element.unmouseup(handler)⚓➭
Removes a mouseup event handler from the element -
-Parameters
- handler -function -handler for the event -
Returns: object Element
-Element.untouchcancel(handler)⚓➭
Removes a touchcancel event handler from the element -
-Parameters
- handler -function -handler for the event -
Returns: object Element
-Element.untouchend(handler)⚓➭
Removes a touchend event handler from the element -
-Parameters
- handler -function -handler for the event -
Returns: object Element
-Element.untouchmove(handler)⚓➭
Removes a touchmove event handler from the element -
-Parameters
- handler -function -handler for the event -
Returns: object Element
-Element.untouchstart(handler)⚓➭
Removes a touchstart event handler from the element -
-Parameters
- handler -function -handler for the event -
Returns: object Element
-Element.use()⚓➭
Creates a <use> element linked to the current element
-
Returns: Element the <use> element
Fragment⚓
Fragment.select()⚓➭
See Element.select -
-Fragment.selectAll()⚓➭
See Element.selectAll -
-Matrix⚓
Matrix.add(…)⚓➭
Adds the given matrix to existing one -
-Parameters
- a -number - -
- b -number - -
- c -number - -
- d -number - -
- e -number - -
- f -number - -
or -
-Parameters
- matrix -object -Matrix -
Matrix.clone()⚓➭
Returns a copy of the matrix -
-Returns: object Matrix
-Matrix.invert()⚓➭
Returns an inverted version of the matrix -
-Returns: object Matrix
-Matrix.rotate(a, x, y)⚓➭
Rotates the matrix -
-Parameters
- a -number -angle of rotation, in degrees -
- x -number -horizontal origin point from which to rotate -
- y -number -vertical origin point from which to rotate -
Matrix.scale(x, [y], [cx], [cy])⚓➭
Scales the matrix -
-Parameters
- x
-number
-amount to be scaled, with
1resulting in no change
- - y
-optional
-number
-amount to scale along the vertical axis. (Otherwise
xapplies to both axes.)
- - cx -optional -number -horizontal origin point from which to scale -
- cy -optional -number -vertical origin point from which to scale -
Default cx, cy is the middle point of the element. -
-Matrix.split()⚓➭
Splits matrix into primitive transformations -
-Returns: object in format:
-- dxnumbertranslation by x -
- dynumbertranslation by y -
- scalexnumberscale by x -
- scaleynumberscale by y -
- shearnumbershear -
- rotatenumberrotation in deg -
- isSimplebooleancould it be represented via simple transformations -
Matrix.toTransformString()⚓➭
Returns transform string that represents given matrix -
-Returns: string transform string
-Matrix.translate(x, y)⚓➭
Translate the matrix -
-Parameters
- x -number -horizontal offset distance -
- y -number -vertical offset distance -
Matrix.x(x, y)⚓➭
Returns x coordinate for given point after transformation described by the matrix. See also Matrix.y -
-Parameters
- x -number - -
- y -number - -
Returns: number x
-Matrix.y(x, y)⚓➭
Returns y coordinate for given point after transformation described by the matrix. See also Matrix.x -
-Parameters
- x -number - -
- y -number - -
Returns: number y
-Paper⚓
Paper.circle(x, y, r)⚓➭
Draws a circle -
-Parameters
- x -number -x coordinate of the centre -
- y -number -y coordinate of the centre -
- r -number -radius -
Returns: object the circle element
Usage
var c = paper.circle(50, 50, 40);
-Paper.clear()⚓➭
Removes all child nodes of the paper, except <defs>. -
-Paper.el(name, attr)⚓➭
Creates an element on paper with a given name and no attributes -
-Parameters
- name -string -tag name -
- attr -object -attributes -
Returns: Element the current element
-Usage
var c = paper.circle(10, 10, 10); // is the same as...
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+ - name
+ string
+ tag name
+ - attr
+ object
+ attributes
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns:
+
+ Element
+
+ the current element
+
+
+
+
+
+
+
+
+
+ Usage
+
+
+
+
+
+
+
+
+
+
+
+ var c = paper.circle(10, 10, 10); // is the same as...
var c = paper.el("circle").attr({
cx: 10,
cy: 10,
r: 10
-});
-
Paper.ellipse(x, y, rx, ry)⚓➭
Draws an ellipse +}); + + + + + +
Paper.rect(x, y, width, height, [rx], [ry])⚓➭
+
+
+
+
+
+
-
Draws a rectangle
-Parameters
- x -number -x coordinate of the centre -
- y -number -y coordinate of the centre -
- rx -number -horizontal radius -
- ry -number -vertical radius -
Returns: object the ellipse element
Usage
var c = paper.ellipse(50, 50, 40, 20);
-Paper.filter(filstr)⚓➭
Creates a <filter> element
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- x + number + x coordinate of the top left corner +
- y + number + y coordinate of the top left corner +
- width + number + width +
- height + number + height +
- rx + number + horizontal radius for rounded corners, default is 0 +
- ry + number + vertical radius for rounded corners, default is rx or 0 + +
+ Returns:
+
+ object
+
+ the rect element
+
Usage
+ + + + + + + + + + + +// regular rectangle
+var c = paper.rect(10, 10, 50, 50);
+// rectangle with rounded corners
+var c = paper.rect(40, 40, 50, 50, 10);Paper.circle(x, y, r)⚓➭
+
+
+
+
+
+
-
+ Draws a circle
-Parameters
- filstr -string -SVG fragment of filter provided as a string -
Returns: object Element
-Note: It is recommended to use filters embedded into the page inside an empty SVG element. + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- x + number + x coordinate of the centre +
- y + number + y coordinate of the centre +
- r + number + radius + +
+ Returns:
+
+ object
+
+ the circle element
+
Usage
+ + + + + + + + + + + +var c = paper.circle(50, 50, 40);Paper.image(src, x, y, width, height)⚓➭
+
+
+
+
+
+
Places an image on the surface
-Usage
var f = paper.filter('<feGaussianBlur stdDeviation="2"/>'),
- c = paper.circle(10, 10, 10).attr({
- filter: f
- });
-Paper.g([varargs])⚓➭
Creates a group element + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- src + string + URI of the source image +
- x + number + x offset position +
- y + number + y offset position +
- width + number + width of the image +
- height + number + height of the image + +
+ Returns:
+
+ object
+
+ the image element
+
or
-Parameters
- varargs -optional -… -elements to nest within the group -
Returns: object the g element
Usage
var c1 = paper.circle(),
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns:
+
+ object
+
+ Raphaël 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
+-
+
- x + number + x coordinate of the centre +
- y + number + y coordinate of the centre +
- rx + number + horizontal radius +
- ry + number + vertical radius + +
+ Returns:
+
+ object
+
+ the ellipse element
+
Usage
+ + + + + + + + + + + +var c = paper.ellipse(50, 50, 40, 20);Paper.path([pathString])⚓➭
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 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:
+ Creates a <path> element using the given string as the path's definition
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- pathString + string + path string in SVG format + +
Path string consists of one-letter commands, followed by comma seprarated arguments in numerical form. Example: +
+ + + + + + + + + + + + + +"M10,20L30,40"This example features two commands: M, with arguments (10, 20) and L with arguments (30, 40). Uppercase letter commands express coordinates in absolute terms, while lowercase commands express them in relative terms from the most recently declared coordinates.
+
Here is short list of commands available, for more details see SVG path string format or article about path strings at MDN.
+ + + + + + + + + + + +| Command | Name | Parameters |
|---|---|---|
| M | moveto | (x y)+ |
| Z | closepath | (none) |
| L | lineto | (x y)+ |
| H | horizontal lineto | x+ |
| V | vertical lineto | y+ |
| C | curveto | (x1 y1 x2 y2 x y)+ |
| S | smooth curveto | (x2 y2 x y)+ |
| Q | quadratic Bézier curveto | (x1 y1 x y)+ |
| T | smooth quadratic Bézier curveto | (x y)+ |
| A | elliptical arc | (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ |
| R | Catmull-Rom curveto* | x1 y1 (x y)+ |
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,90Paper.g([varargs])⚓➭
+
+
+
+
+
+
Creates a group element +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- varargs + … + elements to nest within the group + +
+ Returns:
+
+ object
+
+ the g element
+
Usage
+ + + + + + + + + + + +var c1 = paper.circle(),
c2 = paper.rect(),
- g = paper.g(c2, c1); // note that the order of elements is different
-or + g = paper.g(c2, c1); // note that the order of elements is different + + + + + + +
or
-var c1 = paper.circle(),
+
+
+
+
+
+
+
+
+
+
+
+
+
+ var c1 = paper.circle(),
c2 = paper.rect(),
g = paper.g();
-g.add(c2, c1);
-
Paper.gradient(gradient)⚓➭
Creates a gradient element +g.add(c2, c1); + + + + + +
Paper.group()⚓➭
+
+
+
+
+
+
-
+ See Paper.g
-Parameters
- gradient -string -gradient descriptor -
Gradient Descriptor
The gradient descriptor is an expression formatted as + + + + + + + + +
Paper.text(x, y, text)⚓➭
+
+
+
+
+
+
+ Draws a text string +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- x + number + x coordinate position +
- y + number + y coordinate position +
- text
+ string array
+ The text string to draw or array of strings to nest within separate
<tspan>elements
+
+
+ Returns:
+
+ object
+
+ the text element
+
Usage
+ + + + + + + + + + + +var t1 = paper.text(50, 50, "Snap");
+var t2 = paper.text(50, 50, ["S","n","a","p"]);Paper.line(x1, y1, x2, y2)⚓➭
+
+
+
+
+
+
+ Draws a line +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- x1 + number + x coordinate position of the start +
- y1 + number + y coordinate position of the start +
- x2 + number + x coordinate position of the end +
- y2 + number + y coordinate position of the end + +
+ Returns:
+
+ object
+
+ the line element
+
Usage
+ + + + + + + + + + + +var t1 = paper.line(50, 50, 100, 100);Paper.polyline(…)⚓➭
+
+
+
+
+
+
+ Draws a polyline +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- points + array + array of points + +
or +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- varargs + … + points + +
+ Returns:
+
+ object
+
+ the polyline element
+
Usage
+ + + + + + + + + + + +var p1 = paper.polyline([10, 10, 100, 100]);
+var p2 = paper.polyline(10, 10, 100, 100);Paper.polygon()⚓➭
+
+
+
+
+
+
+ Draws a polygon. See Paper.polyline +
+ + + + + + + + +Paper.gradient(gradient)⚓➭
+
+
+
+
+
+
Creates a gradient element +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- gradient + string + gradient descriptor + +
Gradient Descriptor
+ + + + + + + +The gradient descriptor is an expression formatted as
follows: <type>(<coords>)<colors>. The <type> can be
either linear or radial. The uppercase L or R letters
indicate absolute coordinates offset from the SVG surface.
@@ -900,1169 +6956,5422 @@ 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 + + + + + + + + + + + + +
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
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 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
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 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:
+
+
+
+
+
+
+
+
+
+
+
+
+
+ var g = paper.gradient("r(0.5, 0.5, 0.5)#000-#fff");
To apply the gradient:
-paper.circle(50, 50, 40).attr({
+
+
+
+
+
+
+
+
+
+
+
+
+
+ paper.circle(50, 50, 40).attr({
fill: g
-});
-
Returns: object the gradient element
-Paper.group()⚓➭
See Paper.g +}); + + + + + + + + + + + +
+ Returns:
+
+ object
+
+ the gradient element
+
Paper.toString()⚓➭
+
+
+
+
+
+
Returns SVG code for the Paper
-Paper.image(src, x, y, width, height)⚓➭
Places an image on the surface + + + + + + + + + + + + + + +
+ Returns: + + string + + SVG code for the Paper +
+ + + + +Paper.clear()⚓➭
+
+
+
+
+
+
-
+ Removes all child nodes of the paper, except <defs>.
-Parameters
- src -string -URI of the source image -
- x -number -x offset position -
- y -number -y offset position -
- width -number -width of the image -
- height -number -height of the image -
Returns: object the image element
or + + + + + + + + +
Snap.ajax(…)⚓➭
+
+
+
+
+
+
Simple implementation of Ajax
-Returns: object Raphaël element object with type image
Usage
var c = paper.image("apple.png", 10, 10, 80, 80);
-Paper.line(x1, y1, x2, y2)⚓➭
Draws a line + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- url + string + URL +
- postData + object string + data for post request +
- callback + function + callback +
- scope + object + scope of callback + +
or
-Parameters
- x1 -number -x coordinate position of the start -
- y1 -number -y coordinate position of the start -
- x2 -number -x coordinate position of the end -
- y2 -number -y coordinate position of the end -
Returns: object the line element
Usage
var t1 = paper.line(50, 50, 100, 100);
-Paper.path([pathString])⚓➭
Creates a <path> element using the given string as the path's definition
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- url + string + URL +
- callback + function + callback +
- scope + object + scope of callback + +
+ Returns: + + XMLHttpRequest + + the XMLHttpRequest object, just in case +
+ + + + +Snap.load(url, callback, [scope])⚓➭
+
+
+
+
+
+
-
+ Loads external SVG file as a Fragment (see Snap.ajax for more advanced AJAX)
-Parameters
- pathString -optional -string -path string in SVG format -
Path string consists of one-letter commands, followed by comma seprarated arguments in numerical form. Example: + + + + + + + + + + +
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- url + string + URL +
- callback + function + callback +
- scope + object + scope of callback + +
mina(a, A, b, B, get, set, [easing])⚓➭
+
+
+
+
+
+
+ Generic animation of numbers
-"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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- a + number + start slave number +
- A + number + end slave number +
- b + number + start master number (start time in gereal case) +
- B + number + end master number (end time in gereal case) +
- get + function + getter of master number (see mina.time) +
- set + function + setter of slave number +
- easing + function + easing function, default is mina.linear + +
+ Returns: + + object + + animation descriptor +
+ + + + + + + + + + + +-
+
+
+
- {
-
+
+
+
+
- + id + string + animation id, + + + + +
- + start + number + start slave number, + + + + +
- + end + number + end slave number, + + + + +
- + b + number + start master number, + + + + +
- + s + number + animation status (0..1), + + + + +
- + dur + number + animation duration, + + + + +
- + spd + number + animation speed, + + + + +
- + get + function + getter of master number (see mina.time), + + + + +
- + set + function + setter of slave number, + + + + +
- + easing + function + easing function, default is mina.linear, + + + + +
- + status + function + status getter/setter, + + + + +
- + speed + function + speed getter/setter, + + + + +
- + duration + function + duration getter/setter, + + + + +
- + stop + function + animation stopper + + + + +
- } + + +
mina.time()⚓➭
+
+
+
+
+
+
-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:
+ Returns the current time. Equivalent to:
- -Here is short list of commands available, for more details see SVG path string format or article about path strings at MDN.
-| Command | Name | Parameters |
|---|---|---|
| M | moveto | (x y)+ |
| Z | closepath | (none) |
| L | lineto | (x y)+ |
| H | horizontal lineto | x+ |
| V | vertical lineto | y+ |
| C | curveto | (x1 y1 x2 y2 x y)+ |
| S | smooth curveto | (x2 y2 x y)+ |
| Q | quadratic Bézier curveto | (x1 y1 x y)+ |
| T | smooth quadratic Bézier curveto | (x y)+ |
| A | elliptical arc | (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ |
| R | Catmull-Rom curveto* | x1 y1 (x y)+ |
M10,10R…z. In this case the path connects back to its starting point.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ function () {
+ return (new Date).getTime();
+}mina.getById(id)⚓➭
+
+
+
+
+
+
Returns an animation by its id
-Usage
var c = paper.path("M10 10L90 90");
-// draw a diagonal line:
-// move to 10,10, line to 90,90
-Paper.polygon()⚓➭
Draws a polygon. See Paper.polyline + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- id + string + animation's id + +
+ Returns: + + object + + See mina +
+ + + + +mina.linear(n)⚓➭
+
+
+
+
+
+
Default linear easing
-Paper.polyline(…)⚓➭
Draws a polyline + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- n + number + input 0..1 + +
+ Returns: + + number + + output 0..1 +
+ + + + +mina.easeout(n)⚓➭
+
+
+
+
+
+
-
+ Easeout easing
-Parameters
- points -array -array of points -
or + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- n + number + input 0..1 + +
+ Returns: + + number + + output 0..1 +
+ + + + +mina.easein(n)⚓➭
+
+
+
+
+
+
-
Easein easing
-Parameters
- varargs -… -points -
Returns: object the polyline element
Usage
var p1 = paper.polyline([10, 10, 100, 100]);
-var p2 = paper.polyline(10, 10, 100, 100);
-Paper.rect(x, y, width, height, [rx], [ry])⚓➭
-
+ Draws a rectangle + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- n + number + input 0..1 + +
+ Returns: + + number + + output 0..1 +
+ + + + +mina.easeinout(n)⚓➭
+
+
+
+
+
+
-
Easeinout easing
-Parameters
- x -number -x coordinate of the top left corner -
- y -number -y coordinate of the top left corner -
- width -number -width -
- height -number -height -
- rx -optional -number -horizontal radius for rounded corners, default is 0 -
- ry -optional -number -vertical radius for rounded corners, default is rx or 0 -
Returns: object the rect element
Usage
// regular rectangle
-var c = paper.rect(10, 10, 50, 50);
-// rectangle with rounded corners
-var c = paper.rect(40, 40, 50, 50, 10);
-Paper.text(x, y, text)⚓➭
Draws a text string + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- n + number + input 0..1 + +
+ Returns: + + number + + output 0..1 +
+ + + + +mina.backin(n)⚓➭
+
+
+
+
+
+
-
Backin easing
-Parameters
- x -number -x coordinate position -
- y -number -y coordinate position -
- text
-string array
-The text string to draw or array of strings to nest within separate
<tspan>elements
-
Returns: object the text element
Usage
var t1 = paper.text(50, 50, "Snap");
-var t2 = paper.text(50, 50, ["S","n","a","p"]);
-Paper.toString()⚓➭
Returns SVG code for the element, equivalent to HTML's outerHTML
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- n + number + input 0..1 + +
+ Returns: + + number + + output 0..1 +
+ + + + +mina.backout(n)⚓➭
+
+
+
+
+
+
Backout easing
-Returns: string SVG code for the element
-Returns SVG code for the Paper + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- n + number + input 0..1 + +
+ Returns: + + number + + output 0..1 +
+ + + + +mina.elastic(n)⚓➭
+
+
+
+
+
+
Elastic easing
-Returns: string SVG code for the Paper
-Set⚓
Set.clear()⚓➭
Removes all elements from the set + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- n + number + input 0..1 + +
+ Returns: + + number + + output 0..1 +
+ + + + +mina.bounce(n)⚓➭
+
+
+
+
+
+
Bounce easing
-Set.exclude(element)⚓➭
Removes given element from the set + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- n + number + input 0..1 + +
+ Returns: + + number + + output 0..1 +
+ + + + +Paper.filter(filstr)⚓➭
+
+
+
+
+
+
-
Creates a <filter> element
Parameters
- element -object -element to remove -
Returns: boolean true if object was found and removed from the set
Set.forEach(callback, thisArg)⚓➭
Executes given function for each element in the set + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- filstr + string + SVG fragment of filter provided as a string + +
+ Returns: + + object + + Element +
+ + + + + +Note: It is recommended to use filters embedded into the page inside an empty SVG element.
-If the function returns false, the loop stops running.
-
Parameters
- callback -function -function to run -
- thisArg -object -context object for the callback -
Returns: object Set object
-Set.pop()⚓➭
Removes last element and returns it -
-Returns: object element
-Set.push()⚓➭
Adds each argument to the current set -
-Returns: object original element
-Set.splice(index, count, [insertion…])⚓➭
Removes range of elements from the set -
-Parameters
- index -number -position of the deletion -
- count -number -number of element to remove -
- insertion… -optional -object -elements to insert -
Returns: object set elements that were deleted
-Snap(…)⚓➭
Creates a drawing surface or wraps existing SVG element. -
-Parameters
- width -number string -width of surface -
- height -number string -height of surface -
or -
-Parameters
- DOM -SVGElement -element to be wrapped into Snap structure -
or -
-Parameters
- query -string -CSS query selector -
Returns: object Element
-Snap.Matrix(…)⚓➭
Utility method -Returns a matrix based on the given parameters -
-Parameters
- a -number - -
- b -number - -
- c -number - -
- d -number - -
- e -number - -
- f -number - -
or -
-Parameters
- svgMatrix -SVGMatrix - -
Returns: object Matrix
-Snap.ajax(…)⚓➭
Simple implementation of Ajax -
-Parameters
- url -string -URL -
- postData -object string -data for post request -
- callback -function -callback -
- scope -optional -object -scope of callback -
or -
-Parameters
- url -string -URL -
- callback -function -callback -
- scope -optional -object -scope of callback -
Returns: XMLHttpRequest the XMLHttpRequest object, just in case
-Snap.angle(x1, y1, x2, y2, [x3], [y3])⚓➭
Returns an angle between two or three points -
-Parameters
Parameters
- x1 -number -x coord of first point -
- y1 -number -y coord of first point -
- x2 -number -x coord of second point -
- y2 -number -y coord of second point -
- x3 -optional -number -x coord of third point -
- y3 -optional -number -y coord of third point -
Returns: number angle in degrees
-Snap.animate(from, to, setter, duration, [easing], [callback])⚓➭
Runs generic animation of one number into another with a caring function -
-Parameters
- from -number array -number or array of numbers -
- to -number array -number or array of numbers -
- setter -function -caring function that accepts one number argument -
- duration -number -duration, in milliseconds -
- easing -optional -function -easing function from mina or custom -
- callback -optional -function -callback function to execute when animation ends -
Returns: object animation object in mina format
-- {
- idstringanimation id, consider it read-only, -
- durationfunctiongets or sets the duration of the animation, -
- easingfunctioneasing, -
- speedfunctiongets or sets the speed of the animation, -
- statusfunctiongets or sets the status of the animation, -
- stopfunctionstops the animation -
- }
var rect = Snap().rect(0, 0, 10, 10);
-Snap.animate(0, 10, function (val) {
- rect.attr({
- x: val
- });
-}, 1000);
-// in given context is equivalent to
-rect.animate({x: 10}, 1000);
-Snap.animation(attr, duration, [easing], [callback])⚓➭
Creates an animation object -
-Parameters
- attr -object -attributes of final destination -
- duration -number -duration of the animation, in milliseconds -
- easing -optional -function -one of easing functions of mina or custom one -
- callback -optional -function -callback function that fires when animation ends -
Returns: object animation object
-Snap.color(clr)⚓➭
Parses the color string and returns an object featuring the color's component values -
-Parameters
- clr -string -color string in one of the supported formats (see Snap.getRGB) -
Returns: object Combined RGB/HSB object in the following format:
-- {
- rnumberred, -
- gnumbergreen, -
- bnumberblue, -
- hexstringcolor in HTML/CSS format: #••••••, -
- errorboolean
trueif string can't be parsed, - - hnumberhue, -
- snumbersaturation, -
- vnumbervalue (brightness), -
- lnumberlightness -
- }
Snap.deg(rad)⚓➭
Transform angle to degrees -
-Parameters
- rad -number -angle in radians -
Returns: number angle in degrees
-Snap.filter⚓
Snap.filter.blur(x, [y])⚓➭
Returns an SVG markup string for the blur filter -
-Parameters
- x -number -amount of horizontal blur, in pixels -
- y -optional -number -amount of vertical blur, in pixels -
Returns: string filter representation
-Usage
var f = paper.filter(Snap.filter.blur(5, 10)),
+
+
+
+
+
+
+
+
+
+
+
+
+ Usage
+
+
+
+
+
+
+
+
+
+
+
+ var f = paper.filter('
Snap.filter.brightness(amount)⚓➭
Returns an SVG markup string for the brightness filter + }); + + + + + +
Snap.filter.blur(x, [y])⚓➭
+
+
+
+
+
+
-
Returns an SVG markup string for the blur filter
-Parameters
- amount
-number
-amount of filter (
0..1)
-
Returns: string filter representation
-Snap.filter.contrast(amount)⚓➭
Returns an SVG markup string for the contrast filter -
-Parameters
- amount
-number
-amount of filter (
0..1)
-
Returns: string filter representation
-Snap.filter.grayscale(amount)⚓➭
Returns an SVG markup string for the grayscale filter -
-Parameters
- amount
-number
-amount of filter (
0..1)
-
Returns: string filter representation
-Snap.filter.hueRotate(angle)⚓➭
Returns an SVG markup string for the hue-rotate filter -
-Parameters
- angle -number -angle of rotation -
Returns: string filter representation
-Snap.filter.invert(amount)⚓➭
Returns an SVG markup string for the invert filter -
-Parameters
- amount
-number
-amount of filter (
0..1)
-
Returns: string filter representation
-Snap.filter.saturate(amount)⚓➭
Returns an SVG markup string for the saturate filter -
-Parameters
- amount
-number
-amount of filter (
0..1)
-
Returns: string filter representation
-Snap.filter.sepia(amount)⚓➭
Returns an SVG markup string for the sepia filter -
-Parameters
- amount
-number
-amount of filter (
0..1)
-
Returns: string filter representation
-Snap.filter.shadow(dx, dy, [blur], [color])⚓➭
Returns an SVG markup string for the shadow filter -
-Parameters
- dx -number -horizontal shift of the shadow, in pixels -
- dy -number -vertical shift of the shadow, in pixels -
- blur -optional -number -amount of blur -
- color -optional -string -color of the shadow -
Returns: string filter representation
-Usage
var f = paper.filter(Snap.filter.shadow(0, 2, 3)),
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+
+ - x
+ number
+ amount of horizontal blur, in pixels
+ - y
+ number
+ amount of vertical blur, in pixels
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns:
+
+ string
+
+ filter representation
+
+
+
+
+
+
+
+
+
+ Usage
+
+
+
+
+
+
+
+
+
+
+
+ var f = paper.filter(Snap.filter.blur(5, 10)),
c = paper.circle(10, 10, 10).attr({
filter: f
- });
-
Snap.format(token, json)⚓➭
Replaces construction of type {<name>} to the corresponding argument
+ });
+
+
+
+
+
+
Snap.filter.shadow(dx, dy, [blur], [color])⚓➭
+
+
+
+
+
+
-
Returns an SVG markup string for the shadow filter
-Parameters
- token -string -string to format -
- json -object -object which properties are used as a replacement -
Returns: string formatted string
-Usage
// this draws a rectangular shape equivalent to "M10,20h40v50h-40z"
-paper.path(Snap.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width']}z", {
- x: 10,
- y: 20,
- dim: {
- width: 40,
- height: 50,
- "negative width": -40
- }
-}));
-Snap.fragment(varargs)⚓➭
Creates a DOM fragment from a given list of elements or strings + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- dx + number + horizontal shift of the shadow, in pixels +
- dy + number + vertical shift of the shadow, in pixels +
- blur + number + amount of blur +
- color + string + color of the shadow + +
+ Returns: + + string + + filter representation +
+ + + + + + + + +Usage
+ + + + + + + + + + + +var f = paper.filter(Snap.filter.shadow(0, 2, 3)),
+ c = paper.circle(10, 10, 10).attr({
+ filter: f
+ });Snap.filter.grayscale(amount)⚓➭
+
+
+
+
+
+
-
Returns an SVG markup string for the grayscale filter
-Parameters
- varargs -… -SVG string -
Returns: Fragment the Fragment
-Snap.getRGB(color)⚓➭
Parses color string as RGB object + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- amount
+ number
+ amount of filter (
0..1)
+
+
+ Returns: + + string + + filter representation +
+ + + + +Snap.filter.sepia(amount)⚓➭
+
+
+
+
+
+
-
+ Returns an SVG markup string for the sepia filter
-Parameters
- color -string -color string in one of the following formats: -
-
-
- Color name (
red,green,cornflowerblue, etc)
- - #••• — shortened HTML color: (
#000,#fc0, etc.)
- - #•••••• — full length HTML color: (
#000000,#bd2300)
- - rgb(•••, •••, •••) — red, green and blue channels values: (
rgb(200, 100, 0))
- - rgba(•••, •••, •••, •••) — also with opacity -
- rgb(•••%, •••%, •••%) — same as above, but in %: (
rgb(100%, 175%, 0%))
- - rgba(•••%, •••%, •••%, •••%) — also with opacity -
- hsb(•••, •••, •••) — hue, saturation and brightness values: (
hsb(0.5, 0.25, 1))
- - hsba(•••, •••, •••, •••) — also with opacity -
- hsb(•••%, •••%, •••%) — same as above, but in % -
- hsba(•••%, •••%, •••%, •••%) — also with opacity -
- hsl(•••, •••, •••) — hue, saturation and luminosity values: (
hsb(0.5, 0.25, 0.5))
- - hsla(•••, •••, •••, •••) — also with opacity -
- hsl(•••%, •••%, •••%) — same as above, but in % -
- hsla(•••%, •••%, •••%, •••%) — also with opacity -
Note that % can be used any time: rgb(20%, 255, 50%).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- amount
+ number
+ amount of filter (
0..1)
+
+
+ Returns: + + string + + filter representation +
+ + + + +Snap.filter.saturate(amount)⚓➭
+
+
+
+
+
+
Returns an SVG markup string for the saturate filter
-Returns: object RGB object in the following format:
-- {
- rnumberred, -
- gnumbergreen, -
- bnumberblue, -
- hexstringcolor in HTML/CSS format: #••••••, -
- errorbooleantrue if string can't be parsed -
- }
Snap.hsb(h, s, b)⚓➭
Converts HSB values to a hex representation of the color + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- amount
+ number
+ amount of filter (
0..1)
+
+
+ Returns: + + string + + filter representation +
+ + + + +Snap.filter.hueRotate(angle)⚓➭
+
+
+
+
+
+
-
Returns an SVG markup string for the hue-rotate filter
-Parameters
- h -number -hue -
- s -number -saturation -
- b -number -value or brightness -
Returns: string hex representation of the color
-Snap.hsb2rgb(h, s, v)⚓➭
Converts HSB values to an RGB object + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- angle + number + angle of rotation + +
+ Returns: + + string + + filter representation +
+ + + + +Snap.filter.invert(amount)⚓➭
+
+
+
+
+
+
-
Returns an SVG markup string for the invert filter
-Parameters
- h -number -hue -
- s -number -saturation -
- v -number -value or brightness -
Returns: object RGB object in the following format:
-- {
- rnumberred, -
- gnumbergreen, -
- bnumberblue, -
- hexstringcolor in HTML/CSS format: #•••••• -
- }
Snap.hsl(h, s, l)⚓➭
Converts HSL values to a hex representation of the color + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- amount
+ number
+ amount of filter (
0..1)
+
+
+ Returns: + + string + + filter representation +
+ + + + +Snap.filter.brightness(amount)⚓➭
+
+
+
+
+
+
-
Returns an SVG markup string for the brightness filter
-Parameters
- h -number -hue -
- s -number -saturation -
- l -number -luminosity -
Returns: string hex representation of the color
-Snap.hsl2rgb(h, s, l)⚓➭
Converts HSL values to an RGB object + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- amount
+ number
+ amount of filter (
0..1)
+
+
+ Returns: + + string + + filter representation +
+ + + + +Snap.filter.contrast(amount)⚓➭
+
+
+
+
+
+
-
Returns an SVG markup string for the contrast filter
-Parameters
- h -number -hue -
- s -number -saturation -
- l -number -luminosity -
Returns: object RGB object in the following format:
-- {
- rnumberred, -
- gnumbergreen, -
- bnumberblue, -
- hexstringcolor in HTML/CSS format: #•••••• -
- }
Snap.is(o, type)⚓➭
Handy replacement for the typeof operator
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- amount
+ number
+ amount of filter (
0..1)
+
+
+ Returns: + + string + + filter representation +
+ + + + +Element.click(handler)⚓➭
+
+
+
+
+
+
-
Adds a click event handler to the element
-Parameters
- o -… -any object or primitive -
- type
-string
-name of the type, e.g.,
string,function,number, etc.
-
Returns: boolean true if given value is of given type
Snap.load(url, callback, [scope])⚓➭
Element.unclick(handler)⚓➭
+
+
+
+
+
+
-
Removes a click event handler from the element
-Parameters
- url -string -URL -
- callback -function -callback -
- scope -optional -object -scope of callback -
Snap.parse(svg)⚓➭
Element.dblclick(handler)⚓➭
+
+
+
+
+
+
-
Adds a double click event handler to the element
-Parameters
- svg -string -SVG string -
Returns: Fragment the Fragment
-Snap.parsePathString(pathString)⚓➭
Utility method -Parses given path string into an array of arrays of path segments + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- handler + function + handler for the event + +
+ Returns: + + object + + Element +
+ + + + +Element.undblclick(handler)⚓➭
+
+
+
+
+
+
-
Removes a double click event handler from the element
-Parameters
- pathString -string array -path string or array of segments (in the last case it is returned straight away) -
Returns: array array of segments
-Snap.parseTransformString(TString)⚓➭
Utility method -Parses given transform string into an array of transformations + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- handler + function + handler for the event + +
+ Returns: + + object + + Element +
+ + + + +Element.mousedown(handler)⚓➭
+
+
+
+
+
+
-
Adds a mousedown event handler to the element
-Parameters
- TString -string array -transform string or array of transformations (in the last case it is returned straight away) -
Returns: array array of transformations
-Snap.path⚓
Snap.path.bezierBBox(…)⚓➭
Utility method -Returns the bounding box of a given cubic beziér curve + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- handler + function + handler for the event + +
+ Returns: + + object + + Element +
+ + + + +Element.unmousedown(handler)⚓➭
+
+
+
+
+
+
-
+ Removes a mousedown event handler from the element
-Parameters
- p1x -number -x of the first point of the curve -
- p1y -number -y of the first point of the curve -
- c1x -number -x of the first anchor of the curve -
- c1y -number -y of the first anchor of the curve -
- c2x -number -x of the second anchor of the curve -
- c2y -number -y of the second anchor of the curve -
- p2x -number -x of the second point of the curve -
- p2y -number -y of the second point of the curve -
or + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- handler + function + handler for the event + +
+ Returns: + + object + + Element +
+ + + + +Element.mousemove(handler)⚓➭
+
+
+
+
+
+
-
Adds a mousemove event handler to the element
-Parameters
- bez -array -array of six points for beziér curve -
Returns: object bounding box
-- {
- x:numberx coordinate of the left top point of the box, -
- y:numbery coordinate of the left top point of the box, -
- x2:numberx coordinate of the right bottom point of the box, -
- y2:numbery coordinate of the right bottom point of the box, -
- width:numberwidth of the box, -
- height:numberheight of the box -
- }
Snap.path.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t)⚓➭
Utility method + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- handler + function + handler for the event + +
+ Returns: + + object + + Element +
+ + + + +Element.unmousemove(handler)⚓➭
+
+
+
+
+
+
+ Removes a mousemove event handler from the element +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- handler + function + handler for the event + +
+ Returns: + + object + + Element +
+ + + + +Element.mouseout(handler)⚓➭
+
+
+
+
+
+
+ Adds a mouseout event handler to the element +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- handler + function + handler for the event + +
+ Returns: + + object + + Element +
+ + + + +Element.unmouseout(handler)⚓➭
+
+
+
+
+
+
+ Removes a mouseout event handler from the element +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- handler + function + handler for the event + +
+ Returns: + + object + + Element +
+ + + + +Element.mouseover(handler)⚓➭
+
+
+
+
+
+
+ Adds a mouseover event handler to the element +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- handler + function + handler for the event + +
+ Returns: + + object + + Element +
+ + + + +Element.unmouseover(handler)⚓➭
+
+
+
+
+
+
+ Removes a mouseover event handler from the element +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- handler + function + handler for the event + +
+ Returns: + + object + + Element +
+ + + + +Element.mouseup(handler)⚓➭
+
+
+
+
+
+
+ Adds a mouseup event handler to the element +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- handler + function + handler for the event + +
+ Returns: + + object + + Element +
+ + + + +Element.unmouseup(handler)⚓➭
+
+
+
+
+
+
+ Removes a mouseup event handler from the element +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- handler + function + handler for the event + +
+ Returns: + + object + + Element +
+ + + + +Element.touchstart(handler)⚓➭
+
+
+
+
+
+
+ Adds a touchstart event handler to the element +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- handler + function + handler for the event + +
+ Returns: + + object + + Element +
+ + + + +Element.untouchstart(handler)⚓➭
+
+
+
+
+
+
+ Removes a touchstart event handler from the element +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- handler + function + handler for the event + +
+ Returns: + + object + + Element +
+ + + + +Element.touchmove(handler)⚓➭
+
+
+
+
+
+
+ Adds a touchmove event handler to the element +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- handler + function + handler for the event + +
+ Returns: + + object + + Element +
+ + + + +Element.untouchmove(handler)⚓➭
+
+
+
+
+
+
+ Removes a touchmove event handler from the element +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- handler + function + handler for the event + +
+ Returns: + + object + + Element +
+ + + + +Element.touchend(handler)⚓➭
+
+
+
+
+
+
+ Adds a touchend event handler to the element +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- handler + function + handler for the event + +
+ Returns: + + object + + Element +
+ + + + +Element.untouchend(handler)⚓➭
+
+
+
+
+
+
+ Removes a touchend event handler from the element +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- handler + function + handler for the event + +
+ Returns: + + object + + Element +
+ + + + +Element.touchcancel(handler)⚓➭
+
+
+
+
+
+
+ Adds a touchcancel event handler to the element +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- handler + function + handler for the event + +
+ Returns: + + object + + Element +
+ + + + +Element.untouchcancel(handler)⚓➭
+
+
+
+
+
+
+ Removes a touchcancel event handler from the element +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- handler + function + handler for the event + +
+ Returns: + + object + + Element +
+ + + + +Element.hover(f_in, f_out, [icontext], [ocontext])⚓➭
+
+
+
+
+
+
+ Adds hover event handlers to the element +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- f_in + function + handler for hover in +
- f_out + function + handler for hover out +
- icontext + object + context for hover in handler +
- ocontext + object + context for hover out handler + +
+ Returns: + + object + + Element +
+ + + + +Element.unhover(f_in, f_out)⚓➭
+
+
+
+
+
+
+ Removes hover event handlers from the element +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- f_in + function + handler for hover in +
- f_out + function + handler for hover out + +
+ Returns: + + object + + Element +
+ + + + +Element.drag(onmove, onstart, onend, [mcontext], [scontext], [econtext])⚓➭
+
+
+
+
+
+
+ Adds event handlers for an element's drag gesture +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- onmove + function + handler for moving +
- onstart + function + handler for drag start +
- onend + function + handler for drag end +
- mcontext + object + context for moving handler +
- scontext + object + context for drag start handler +
- econtext + object + context for drag end handler + +
Additionaly following drag events are triggered: drag.start.<id> on start,
+drag.end.<id> on end and drag.move.<id> on every move. When element is dragged over another element
+drag.over.<id> fires as well.
+
Start event and start handler are called in specified context or in context of the element with following parameters: +
+ + + + + + + + + + + + + + + +-
+
+
+
- + x + number + x position of the mouse + + + + +
- + y + number + y position of the mouse + + + + +
- + event + object + DOM event object + + + +
Move event and move handler are called in specified context or in context of the element with following parameters: +
+ + + + + + + + + + + + + + + +-
+
+
+
- + dx + number + shift by x from the start point + + + + +
- + dy + number + shift by y from the start point + + + + +
- + x + number + x position of the mouse + + + + +
- + y + number + y position of the mouse + + + + +
- + event + object + DOM event object + + + +
End event and end handler are called in specified context or in context of the element with following parameters: +
+ + + + + + + + + + + + + + + +-
+
+
+
- + event + object + DOM event object + + + +
+ Returns: + + object + + Element +
+ + + + +Element.undrag()⚓➭
+
+
+
+
+
+
+ Removes all drag event handlers from the given element +
+ + + + + + + + +Snap.path.getTotalLength(path)⚓➭
+
+
+
+
+
+
+ Returns the length of the given path in pixels +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- path + string + SVG path string + +
+ Returns: + + number + + length +
+ + + + +Snap.path.getPointAtLength(path, length)⚓➭
+
+
+
+
+
+
+ Returns the coordinates of the point located at the given length along the given path +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- path + string + SVG path string +
- length + number + length, in pixels, from the start of the path, excluding non-rendering jumps + +
+ Returns: + + object + + representation of the point: +
+ + + + + + + + + + + +-
+
+
+
- {
-
+
+
+
+
- + x: + number + x coordinate, + + + + +
- + y: + number + y coordinate, + + + + +
- + alpha: + number + angle of derivative + + + + +
- } + + +
Snap.path.getSubpath(path, from, to)⚓➭
+
+
+
+
+
+
+ Returns the subpath of a given path between given start and end lengths +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- path + string + SVG path string +
- from + number + length, in pixels, from the start of the path to the start of the segment +
- to + number + length, in pixels, from the start of the path to the end of the segment + +
+ Returns: + + string + + path string definition for the segment +
+ + + + +Element.getTotalLength()⚓➭
+
+
+
+
+
+
+ Returns the length of the path in pixels (only works for path elements)
+
+ Returns: + + number + + length +
+ + + + +Element.getPointAtLength(length)⚓➭
+
+
+
+
+
+
+ Returns coordinates of the point located at the given length on the given path (only works for path elements)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- length + number + length, in pixels, from the start of the path, excluding non-rendering jumps + +
+ Returns: + + object + + representation of the point: +
+ + + + + + + + + + + +-
+
+
+
- {
-
+
+
+
+
- + x: + number + x coordinate, + + + + +
- + y: + number + y coordinate, + + + + +
- + alpha: + number + angle of derivative + + + + +
- } + + +
Element.getSubpath(from, to)⚓➭
+
+
+
+
+
+
+ Returns subpath of a given element from given start and end lengths (only works for path elements)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- from + number + length, in pixels, from the start of the path to the start of the segment +
- to + number + length, in pixels, from the start of the path to the end of the segment + +
+ Returns: + + string + + path string definition for the segment +
+ + + + +Snap.path.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t)⚓➭
+
+
+
+
+
+
-
Utility method Finds dot coordinates on the given cubic beziér curve at the given t
-Parameters
- p1x -number -x of the first point of the curve -
- p1y -number -y of the first point of the curve -
- c1x -number -x of the first anchor of the curve -
- c1y -number -y of the first anchor of the curve -
- c2x -number -x of the second anchor of the curve -
- c2y -number -y of the second anchor of the curve -
- p2x -number -x of the second point of the curve -
- p2y -number -y of the second point of the curve -
- t -number -position on the curve (0..1) -
Returns: object point information in format:
-- {
- x:numberx coordinate of the point, -
- y:numbery coordinate of the point, -
- m: {
- x:numberx coordinate of the left anchor, -
- y:numbery coordinate of the left anchor -
- },
- n: {
- x:numberx coordinate of the right anchor, -
- y:numbery coordinate of the right anchor -
- },
- start: {
- x:numberx coordinate of the start of the curve, -
- y:numbery coordinate of the start of the curve -
- },
- end: {
- x:numberx coordinate of the end of the curve, -
- y:numbery coordinate of the end of the curve -
- },
- alpha:numberangle of the curve derivative at the point -
- }
Snap.path.getBBox(path)⚓➭
Utility method -Returns the bounding box of a given path + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- p1x + number + x of the first point of the curve +
- p1y + number + y of the first point of the curve +
- c1x + number + x of the first anchor of the curve +
- c1y + number + y of the first anchor of the curve +
- c2x + number + x of the second anchor of the curve +
- c2y + number + y of the second anchor of the curve +
- p2x + number + x of the second point of the curve +
- p2y + number + y of the second point of the curve +
- t + number + position on the curve (0..1) + +
+ Returns: + + object + + point information in format: +
+ + + + + + + + + + + +-
+
+
+
- {
-
+
+
+
+
- + x: + number + x coordinate of the point, + + + + +
- + y: + number + y coordinate of the point, + + + + +
- m: {
-
+
+
+
+
- + x: + number + x coordinate of the left anchor, + + + + +
- + y: + number + y coordinate of the left anchor + + + + +
- }, + + + +
- n: {
-
+
+
+
+
- + x: + number + x coordinate of the right anchor, + + + + +
- + y: + number + y coordinate of the right anchor + + + + +
- }, + + + +
- start: {
-
+
+
+
+
- + x: + number + x coordinate of the start of the curve, + + + + +
- + y: + number + y coordinate of the start of the curve + + + + +
- }, + + + +
- end: {
-
+
+
+
+
- + x: + number + x coordinate of the end of the curve, + + + + +
- + y: + number + y coordinate of the end of the curve + + + + +
- }, + + + +
- + alpha: + number + angle of the curve derivative at the point + + + + +
- } + + +
Snap.path.bezierBBox(…)⚓➭
+
+
+
+
+
+
-
Utility method +Returns the bounding box of a given cubic beziér curve
-Parameters
- path -string -path string -
Returns: object bounding box
-- {
- x:numberx coordinate of the left top point of the box, -
- y:numbery coordinate of the left top point of the box, -
- x2:numberx coordinate of the right bottom point of the box, -
- y2:numbery coordinate of the right bottom point of the box, -
- width:numberwidth of the box, -
- height:numberheight of the box -
- }
Snap.path.getPointAtLength(path, length)⚓➭
Returns the coordinates of the point located at the given length along the given path + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- p1x + number + x of the first point of the curve +
- p1y + number + y of the first point of the curve +
- c1x + number + x of the first anchor of the curve +
- c1y + number + y of the first anchor of the curve +
- c2x + number + x of the second anchor of the curve +
- c2y + number + y of the second anchor of the curve +
- p2x + number + x of the second point of the curve +
- p2y + number + y of the second point of the curve + +
or
-Parameters
- path -string -SVG path string -
- length -number -length, in pixels, from the start of the path, excluding non-rendering jumps -
Returns: object representation of the point:
-- {
- x:numberx coordinate, -
- y:numbery coordinate, -
- alpha:numberangle of derivative -
- }
Snap.path.getSubpath(path, from, to)⚓➭
Returns the subpath of a given path between given start and end lengths -
-Parameters
- path -string -SVG path string -
- from -number -length, in pixels, from the start of the path to the start of the segment -
- to -number -length, in pixels, from the start of the path to the end of the segment -
Returns: string path string definition for the segment
-Snap.path.getTotalLength(path)⚓➭
Returns the length of the given path in pixels -
-Parameters
- path -string -SVG path string -
Returns: number length
-Snap.path.intersection(path1, path2)⚓➭
Utility method -Finds intersections of two paths -
-Parameters
- path1 -string -path string -
- path2 -string -path string -
Returns: array dots of intersection
-- [
- {
- x:numberx coordinate of the point, -
- y:numbery coordinate of the point, -
- t1:numbert value for segment of path1, -
- t2:numbert value for segment of path2, -
- segment1:numberorder number for segment of path1, -
- segment2:numberorder number for segment of path2, -
- bez1:arrayeight coordinates representing beziér curve for the segment of path1, -
- bez2:arrayeight coordinates representing beziér curve for the segment of path2 -
- }
- ]
Snap.path.isBBoxIntersect(bbox1, bbox2)⚓➭
Utility method
-Returns true if two bounding boxes intersect
-
Parameters
- bbox1 -string -first bounding box -
- bbox2 -string -second bounding box -
Returns: boolean true if bounding boxes intersect
Snap.path.isPointInside(path, x, y)⚓➭
Utility method
-Returns true if given point is inside a given closed path.
-
Note: fill mode doesn’t affect the result of this method. -
-Parameters
- path -string -path string -
- x -number -x of the point -
- y -number -y of the point -
Returns: boolean true if point is inside the path
Snap.path.isPointInsideBBox(bbox, x, y)⚓➭
Utility method + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- bez + array + array of six points for beziér curve + +
+ Returns: + + object + + bounding box +
+ + + + + + + + + + + +-
+
+
+
- {
-
+
+
+
+
- + x: + number + x coordinate of the left top point of the box, + + + + +
- + y: + number + y coordinate of the left top point of the box, + + + + +
- + x2: + number + x coordinate of the right bottom point of the box, + + + + +
- + y2: + number + y coordinate of the right bottom point of the box, + + + + +
- + width: + number + width of the box, + + + + +
- + height: + number + height of the box + + + + +
- } + + +
Snap.path.isPointInsideBBox(bbox, x, y)⚓➭
+
+
+
+
+
+
-
Utility method
Returns true if given point is inside bounding box
Parameters
- bbox -string -bounding box -
- x -string -x coordinate of the point -
- y -string -y coordinate of the point -
Returns: boolean true if point is inside
Snap.path.map(path, matrix)⚓➭
Transform the path string with the given matrix + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- bbox + string + bounding box +
- x + string + x coordinate of the point +
- y + string + y coordinate of the point + +
+ Returns:
+
+ boolean
+
+ true if point is inside
+
Snap.path.isBBoxIntersect(bbox1, bbox2)⚓➭
+
+
+
+
+
+
-
Utility method
+Returns true if two bounding boxes intersect
Parameters
- path -string -path string -
- matrix -object -see Matrix -
Returns: string transformed path string
-Snap.path.toAbsolute(path)⚓➭
Utility method -Converts path coordinates into absolute values + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- bbox1 + string + first bounding box +
- bbox2 + string + second bounding box + +
+ Returns:
+
+ boolean
+
+ true if bounding boxes intersect
+
Snap.path.intersection(path1, path2)⚓➭
+
+
+
+
+
+
-
Utility method +Finds intersections of two paths
-Parameters
- path -string -path string -
Returns: array path string
-Snap.path.toCubic(pathString)⚓➭
Utility method -Converts path to a new path where all segments are cubic beziér curves + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- path1 + string + path string +
- path2 + string + path string + +
+ Returns: + + array + + dots of intersection +
+ + + + + + + + + + + +-
+
+
+
- [ + + + +
- {
-
+
+
+
+
- + x: + number + x coordinate of the point, + + + + +
- + y: + number + y coordinate of the point, + + + + +
- + t1: + number + t value for segment of path1, + + + + +
- + t2: + number + t value for segment of path2, + + + + +
- + segment1: + number + order number for segment of path1, + + + + +
- + segment2: + number + order number for segment of path2, + + + + +
- + bez1: + array + eight coordinates representing beziér curve for the segment of path1, + + + + +
- + bez2: + array + eight coordinates representing beziér curve for the segment of path2 + + + + +
- } + + + +
- ] + + +
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
- pathString -string array -path string or array of segments -
Returns: array array of segments
-Snap.path.toRelative(path)⚓➭
Utility method + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- path + string + path string +
- x + number + x of the point +
- y + number + y of the point + +
+ Returns:
+
+ boolean
+
+ true if point is inside the path
+
Snap.path.getBBox(path)⚓➭
+
+
+
+
+
+
+ Utility method +Returns the bounding box of a given path +
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- path + string + path string + +
+ Returns: + + object + + bounding box +
+ + + + + + + + + + + +-
+
+
+
- {
-
+
+
+
+
- + x: + number + x coordinate of the left top point of the box, + + + + +
- + y: + number + y coordinate of the left top point of the box, + + + + +
- + x2: + number + x coordinate of the right bottom point of the box, + + + + +
- + y2: + number + y coordinate of the right bottom point of the box, + + + + +
- + width: + number + width of the box, + + + + +
- + height: + number + height of the box + + + + +
- } + + +
Snap.path.toRelative(path)⚓➭
+
+
+
+
+
+
-
Utility method Converts path coordinates into relative values
-Parameters
- path -string -path string -
Returns: array path string
-Snap.rad(deg)⚓➭
Transform angle to radians + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- path + string + path string + +
+ Returns: + + array + + path string +
+ + + + +Snap.path.toAbsolute(path)⚓➭
+
+
+
+
+
+
-
Utility method +Converts path coordinates into absolute values
-Parameters
- deg -number -angle in degrees -
Returns: number angle in radians
-Snap.rgb(r, g, b)⚓➭
Converts RGB values to a hex representation of the color + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- path + string + path string + +
+ Returns: + + array + + path string +
+ + + + +Snap.path.toCubic(pathString)⚓➭
+
+
+
+
+
+
-
Utility method +Converts path to a new path where all segments are cubic beziér curves
-Parameters
- r -number -red -
- g -number -green -
- b -number -blue -
Returns: string hex representation of the color
-Snap.rgb2hsb(r, g, b)⚓➭
Converts RGB values to an HSB object + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- pathString + string array + path string or array of segments + +
+ Returns: + + array + + array of segments +
+ + + + +Snap.path.map(path, matrix)⚓➭
+
+
+
+
+
+
-
Transform the path string with the given matrix
-Parameters
- r -number -red -
- g -number -green -
- b -number -blue -
Returns: object HSB object in the following format:
-- {
- hnumberhue, -
- snumbersaturation, -
- bnumberbrightness -
- }
Snap.rgb2hsl(r, g, b)⚓➭
Converts RGB values to an HSL object + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- path + string + path string +
- matrix + object + see Matrix + +
+ Returns: + + string + + transformed path string +
+ + + + +Set.push()⚓➭
+
+
+
+
+
+
-
Adds each argument to the current set
-Parameters
- r -number -red -
- g -number -green -
- b -number -blue -
Returns: object HSL object in the following format:
-- {
- hnumberhue, -
- snumbersaturation, -
- lnumberluminosity -
- }
Snap.select(query)⚓➭
Wraps a DOM element specified by CSS selector as Element + + + + + + + + + + + + + + +
+ Returns: + + object + + original element +
+ + + + +Set.pop()⚓➭
+
+
+
+
+
+
-
Removes last element and returns it
-Parameters
- query -string -CSS selector of the element -
Returns: Element the current element
-Snap.selectAll(query)⚓➭
Wraps DOM elements specified by CSS selector as set or array of Element + + + + + + + + + + + + + + +
+ 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
- query -string -CSS selector of the element -
Returns: Element the current element
-Snap.snapTo(values, value, [tolerance])⚓➭
Snaps given value to given grid + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- callback + function + function to run +
- thisArg + object + context object for the callback + +
+ Returns: + + object + + Set object +
+ + + + +Set.clear()⚓➭
+
+
+
+
+
+
-
Removes all elements from the set
-Parameters
- values -array number -given array of values or step of the grid -
- value -number -value to adjust -
- tolerance
-optional
-number
-maximum distance to the target value that would trigger the snap. Default is
10.
-
Returns: number adjusted value
-mina(a, A, b, B, get, set, [easing])⚓➭
Generic animation of numbers + + + + + + + + +
Set.splice(index, count, [insertion…])⚓➭
+
+
+
+
+
+
-
Removes range of elements from the set
-Parameters
- a -number -start slave number -
- A -number -end slave number -
- b -number -start master number (start time in gereal case) -
- B -number -end master number (end time in gereal case) -
- get -function -getter of master number (see mina.time) -
- set -function -setter of slave number -
- easing -optional -function -easing function, default is mina.linear -
Returns: object animation descriptor
-- {
- idstringanimation id, -
- startnumberstart slave number, -
- endnumberend slave number, -
- bnumberstart master number, -
- snumberanimation status (0..1), -
- durnumberanimation duration, -
- spdnumberanimation speed, -
- getfunctiongetter of master number (see mina.time), -
- setfunctionsetter of slave number, -
- easingfunctioneasing function, default is mina.linear, -
- statusfunctionstatus getter/setter, -
- speedfunctionspeed getter/setter, -
- durationfunctionduration getter/setter, -
- stopfunctionanimation stopper -
- }
mina.backin(n)⚓➭
Backin easing + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- index + number + position of the deletion +
- count + number + number of element to remove +
- insertion… + object + elements to insert + +
+ Returns: + + object + + set elements that were deleted +
+ + + + +Set.exclude(element)⚓➭
+
+
+
+
+
+
-
Removes given element from the set
-Parameters
- n -number -input 0..1 -
Returns: number output 0..1
-mina.backout(n)⚓➭
Backout easing -
-Parameters
- n -number -input 0..1 -
Returns: number output 0..1
-mina.bounce(n)⚓➭
Bounce easing -
-Parameters
- n -number -input 0..1 -
Returns: number output 0..1
-mina.easein(n)⚓➭
Easein easing -
-Parameters
- n -number -input 0..1 -
Returns: number output 0..1
-mina.easeinout(n)⚓➭
Easeinout easing -
-Parameters
- n -number -input 0..1 -
Returns: number output 0..1
-mina.easeout(n)⚓➭
Easeout easing -
-Parameters
- n -number -input 0..1 -
Returns: number output 0..1
-mina.elastic(n)⚓➭
Elastic easing -
-Parameters
- n -number -input 0..1 -
Returns: number output 0..1
-mina.getById(id)⚓➭
Returns an animation by its id -
-Parameters
- id -string -animation's id -
Returns: object See mina
-mina.linear(n)⚓➭
Default linear easing -
-Parameters
- n -number -input 0..1 -
Returns: number output 0..1
-mina.time()⚓➭
Returns the current time. Equivalent to: -
-function () {
- return (new Date).getTime();
-}
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Parameters
+-
+
- element + object + element to remove + +
+ Returns:
+
+ boolean
+
+ true if object was found and removed from the set
+