Creates a drawing surface or wraps existing SVG element.
or
or
or
Returns: object Element
Wraps path into "url('<path>')".
Returns: string wrapped path
Replaces construction of type {<name>} to the corresponding argument
Returns: string formatted string
// 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
}
}));Transform angle to radians
Returns: number angle in radians
Transform angle to degrees
Returns: number angle in degrees
Equivalent to Math.sin() only works
with degrees, not radians.
Returns: number sin
Equivalent to Math.tan() only works
with degrees, not radians.
Returns: number tan
Equivalent to Math.cos() only works
with degrees, not radians.
Returns: number cos
Equivalent to Math.asin() only works
with degrees, not radians.
Returns: number asin in degrees
Equivalent to Math.acos() only works
with degrees, not radians.
Returns: number acos in degrees
Equivalent to Math.atan() only works
with degrees, not radians.
Returns: number atan in degrees
Equivalent to Math.atan2() only works
with degrees, not radians.
Returns: number atan2 in degrees
Returns an angle between two or three points
Returns: number angle in degrees
Returns distance between two points
Returns: number distance
Returns squared distance between two points
Returns: number distance
Returns closest point to a given one on a given path.
Returns: object in format
Handy replacement for the typeof operator
string,
function, number,
etc.
Returns:
boolean
true if given value is of given
type
Snaps given value to given grid
10.
Returns: number adjusted value
Parses color string as RGB object
red, green,
cornflowerblue, etc)#000,
#fc0, etc.)#000000,
#bd2300)rgb(200, 100, 0))rgb(100%, 175%, 0%))hsb(0.5, 0.25, 1))hsb(0.5, 0.25, 0.5))Note that % can be used any time: rgb(20%, 255, 50%).
Returns: object RGB object in the following format:
Converts HSB values to a hex representation of the color
Returns: string hex representation of the color
Converts HSL values to a hex representation of the color
Returns: string hex representation of the color
Converts RGB values to a hex representation of the color
Returns: string hex representation of the color
Parses the color string and returns an object featuring the color's component values
Returns: object Combined RGB/HSB object in the following format:
true if string can't
be parsed,
Converts HSB values to an RGB object
Returns: object RGB object in the following format:
Converts HSL values to an RGB object
Returns: object RGB object in the following format:
Converts RGB values to an HSB object
Returns: object HSB object in the following format:
Converts RGB values to an HSL object
Returns: object HSL object in the following format:
Utility method Parses given path string into an array of arrays of path segments
Returns: array array of segments
Utility method Parses given transform string into an array of transformations
Returns: array array of transformations
Wraps a DOM element specified by CSS selector as Element
Returns: Element the current element
Wraps DOM elements specified by CSS selector as set or array of Element
Returns: Element the current element
Gives you a reference to the DOM object, so you can assign event handlers or just mess around.
// draw a circle at coordinate 10,10 with radius of 10
var c = paper.circle(10, 10, 10);
c.node.onclick = function () {
c.attr("fill", "red");
};SVG tag name of the given element.
Gets or sets given attributes of the element.
or
Returns: Element the current element
or
Returns: string value of attribute
el.attr({
fill: "#fc0",
stroke: "#000",
strokeWidth: 2, // CamelCase...
"fill-opacity": 0.5, // or dash-separated names
width: "*=2" // prefixed values
});
console.log(el.attr("fill")); // #fc0Prefixed values in format "+=10" supported. All four operations (
+, -, * and /) could be used. Optionally
you can use units for + and -:
"+=2em".
Creates a DOM fragment from a given list of elements or strings
Returns: Fragment the Fragment
Creates an element on paper with a given name and no attributes
Returns: Element the current element
var c = paper.circle(10, 10, 10); // is the same as...
var c = paper.el("circle").attr({
cx: 10,
cy: 10,
r: 10
});
// and the same as
var c = paper.el("circle", {
cx: 10,
cy: 10,
r: 10
});Returns array of all the children of the element.
Returns: array array of Elements
Returns object representation of the given element and all its children.
Returns: object in format
Simple implementation of Ajax
or
Returns: XMLHttpRequest the XMLHttpRequest object, just in case
Returns you topmost element under given point.
Returns: object Snap element object
Snap.getElementByPoint(mouseX, mouseY).attr({stroke: "#f00"});Let you write plugins. You pass in a function with five arguments, like this:
Snap.plugin(function (Snap, Element, Paper, global, Fragment) {
Snap.newmethod = function () {};
Element.prototype.newmethod = function () {};
Paper.prototype.newmethod = function () {};
});Inside the function you have access to all main objects (and their prototypes). This allow you to extend anything you want.
Returns the bounding box descriptor for the given element
Returns: object bounding box descriptor:
Gets or sets transformation of the element
Returns: Element the current element
or
Returns: object transformation descriptor:
string property
Returns the element's parent
Returns: Element the parent element
Appends the given element to current one
Returns: Element the parent element
See Element.append
Appends the current element to the given one
Returns: Element the child element
Prepends the given element to the current one
Returns: Element the parent element
Prepends the current element to the given one
Returns: Element the child element
Inserts given element before the current one
Returns: Element the parent element
Inserts given element after the current one
Returns: Element the parent element
Inserts the element after the given one
Returns: Element the parent element
Inserts the element after the given one
Returns: Element the parent element
Removes element from the DOM
Returns: Element the detached element
Gathers the nested Element matching the given set of CSS selectors
Returns: Element result of query selection
Gathers nested Element objects matching the given set of CSS selectors
Returns: Set array result of query selection
Returns given attribute of the element as a px value (not %, em, etc.)
Returns: Element result of query selection
Creates a <use> element linked
to the current element
Returns:
Element
the <use> element
Creates a clone of the element and inserts it after the element
Returns: Element the clone
Moves element to the shared <defs> area
Returns: Element the element
Creates a <pattern> element from
the current element To create a pattern you have
to specify the pattern rect:
Returns:
Element
the <pattern> element
You can use pattern later on as an argument for fill attribute:
var p = paper.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({
fill: "none",
stroke: "#bada55",
strokeWidth: 5
}).pattern(0, 0, 10, 10),
c = paper.circle(200, 200, 100);
c.attr({
fill: p
});Creates a <marker> element from
the current element To create a marker you have
to specify the bounding rect and reference point:
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.
Adds or retrieves given value associated with given
key. (Don’t confuse with data- attributes)
See also Element.removeData
Returns: object Element
or, if value is not specified:
Returns: any value
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"));
});
}Removes value associated with an element by given key. If key is not provided, removes all the data of the element.
Returns: object Element
Returns SVG code for the element, equivalent to HTML's
outerHTML.
See also Element.innerSVG
Returns: string SVG code for the element
See Element.outerSVG
Returns SVG code for the element's contents,
equivalent to HTML's innerHTML
Returns: string SVG code for the element
See Element.select
Unwraps path from "url(<path>)".
Returns: string unwrapped path
Creates an animation object
Returns: object animation object
Returns a set of animations that may be able to manipulate the current element
Returns: object in format:
Runs generic animation of one number into another with a caring function
Returns: object animation object in mina format
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);Stops all the animations for the current element
Returns: Element the current element
Animates the given attributes of the element
Returns: Element the current element
Adds the given matrix to existing one
or
Multiplies a passed affine transform to the left: M * this.
or
Returns an inverted version of the matrix
Returns: object Matrix
Returns a copy of the matrix
Returns: object Matrix
Translate the matrix
Scales the matrix
1 resulting in no change
x applies
to both axes.)
Default cx, cy is the middle point of the element.
Rotates the matrix
Skews the matrix along the x-axis
Skews the matrix along the y-axis
Skews the matrix
Returns x coordinate for given point after transformation described by the matrix. See also Matrix.y
Returns: number x
Returns y coordinate for given point after transformation described by the matrix. See also Matrix.x
Returns: number y
Finds determinant of the given matrix.
Returns: number determinant
Splits matrix into primitive transformations
Returns: object in format:
Returns transform string that represents given matrix
Returns: string transform string
Matrix constructor, extend on your own risk. To create matrices use Snap.matrix.
Utility method Returns a matrix based on the given parameters
or
Returns: object Matrix
Draws a rectangle
Returns:
object
the rect element
// regular rectangle
var c = paper.rect(10, 10, 50, 50);
// rectangle with rounded corners
var c = paper.rect(40, 40, 50, 50, 10);Draws a circle
Returns:
object
the circle element
var c = paper.circle(50, 50, 40);Places an image on the surface
Returns:
object
the image element
or
Returns:
object
Snap element object with type image
var c = paper.image("apple.png", 10, 10, 80, 80);Draws an ellipse
Returns:
object
the ellipse element
var c = paper.ellipse(50, 50, 40, 20);Creates a <path> element using
the given string as the path's definition
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.
var c = paper.path("M10 10L90 90");
// draw a diagonal line:
// move to 10,10, line to 90,90Creates a group element
Returns:
object
the g element
var c1 = paper.circle(),
c2 = paper.rect(),
g = paper.g(c2, c1); // note that the order of elements is differentor
var c1 = paper.circle(),
c2 = paper.rect(),
g = paper.g();
g.add(c2, c1);See Paper.g
Creates a nested SVG element.
Returns:
object
the svg element
Equivalent in behaviour to Paper.g, except it’s a mask.
Returns:
object
the mask element
Equivalent in behaviour to Paper.g, except it’s a pattern.
Returns:
object
the pattern element
Draws a text string
<tspan> elements
Returns:
object
the text element
var t1 = paper.text(50, 50, "Snap");
var t2 = paper.text(50, 50, ["S","n","a","p"]);
// Text path usage
t1.attr({textpath: "M10,10L100,100"});
// or
var pth = paper.path("M10,10L100,100");
t1.attr({textpath: pth});Draws a line
Returns:
object
the line element
var t1 = paper.line(50, 50, 100, 100);Draws a polyline
or
Returns:
object
the polyline element
var p1 = paper.polyline([10, 10, 100, 100]);
var p2 = paper.polyline(10, 10, 100, 100);Draws a polygon. See Paper.polyline
Only for gradients! Returns array of gradient stops elements.
Returns: array the stops array.
Only for gradients! Adds another stop to the gradient.
Returns: object gradient element
Only for gradients! Updates stops of the gradient based on passed gradient descriptor. See Ppaer.gradient
().
Returns: object gradient element
var g = paper.gradient("l(0, 0, 1, 1)#000-#f00-#fff");
g.setStops("#fff-#000-#f00-#fc0");Creates a gradient element
The gradient descriptor is an expression formatted
as follows: <type>(<coords>)<colors>.
The <type> can be either linear
or radial. The uppercase L or R letters indicate absolute coordinates offset
from the SVG surface. Lowercase l or r letters indicate coordinates
calculated relative to the element to which the
gradient is applied. Coordinates specify a linear
gradient vector as
x1, y1, x2,
y2, or a radial gradient as cx,
cy,
r and optional fx,
fy specifying a focal point away
from the center of the circle. Specify <colors> as a list of dash-separated CSS color values.
Each color may be followed by a custom offset
value, separated with a colon character.
Linear gradient, relative from top-left corner to bottom-right corner, from black through red to white:
var g = paper.gradient("l(0, 0, 1, 1)#000-#f00-#fff");Linear gradient, absolute from (0, 0) to (100, 100), from black through red at 25% to white:
var g = paper.gradient("L(0, 0, 100, 100)#000-#f00:25-#fff");Radial gradient, relative from the center of the element with radius half the width, from black to white:
var g = paper.gradient("r(0.5, 0.5, 0.5)#000-#fff");To apply the gradient:
paper.circle(50, 50, 40).attr({
fill: g
});
Returns:
object
the gradient element
Returns SVG code for the Paper as Data URI string.
Returns: string Data URI string
Removes all child nodes of the paper, except <defs>.
Adds given class name or list of class names to the element.
Returns: Element original element.
Removes given class name or list of class names from the element.
Returns: Element original element.
Checks if the element has a given class name in the list of class names applied to it.
Returns:
boolean
true if the element has given class
Add or remove one or more classes from the element,
depending on either the class’s presence or the
value of the flag argument.
Returns: Element original element.
Generic animation of numbers
Returns: object animation descriptor
Returns the current time. Equivalent to:
function () {
return (new Date).getTime();
}Default linear easing
Returns: number output 0..1
Easeout easing
Returns: number output 0..1
Easein easing
Returns: number output 0..1
Easeinout easing
Returns: number output 0..1
Backin easing
Returns: number output 0..1
Backout easing
Returns: number output 0..1
Elastic easing
Returns: number output 0..1
Bounce easing
Returns: number output 0..1
Creates a <filter> element
Returns: object Element
Note: It is recommended to use filters embedded into the page inside an empty SVG element.
var f = paper.filter('Returns an SVG markup string for the blur filter
Returns: string filter representation
var f = paper.filter(Snap.filter.blur(5, 10)),
c = paper.circle(10, 10, 10).attr({
filter: f
});Returns an SVG markup string for the shadow filter
0..1 opacity of the shadow
or
0..1 opacity of the shadow
which makes blur default to 4. Or
0..1 opacity of the shadow
Returns: string filter representation
var f = paper.filter(Snap.filter.shadow(0, 2, .3)),
c = paper.circle(10, 10, 10).attr({
filter: f
});Returns an SVG markup string for the grayscale filter
0..1)
Returns: string filter representation
Returns an SVG markup string for the sepia filter
0..1)
Returns: string filter representation
Returns an SVG markup string for the saturate filter
0..1)
Returns: string filter representation
Returns an SVG markup string for the hue-rotate filter
Returns: string filter representation
Returns an SVG markup string for the invert filter
0..1)
Returns: string filter representation
Returns an SVG markup string for the brightness filter
0..1)
Returns: string filter representation
Returns an SVG markup string for the contrast filter
0..1)
Returns: string filter representation
Adds a click event handler to the element
Returns: object Element
Removes a click event handler from the element
Returns: object Element
Adds a double click event handler to the element
Returns: object Element
Removes a double click event handler from the element
Returns: object Element
Adds a mousedown event handler to the element
Returns: object Element
Removes a mousedown event handler from the element
Returns: object Element
Adds a mousemove event handler to the element
Returns: object Element
Removes a mousemove event handler from the element
Returns: object Element
Adds a mouseout event handler to the element
Returns: object Element
Removes a mouseout event handler from the element
Returns: object Element
Adds a mouseover event handler to the element
Returns: object Element
Removes a mouseover event handler from the element
Returns: object Element
Adds a mouseup event handler to the element
Returns: object Element
Removes a mouseup event handler from the element
Returns: object Element
Adds a touchstart event handler to the element
Returns: object Element
Removes a touchstart event handler from the element
Returns: object Element
Adds a touchmove event handler to the element
Returns: object Element
Removes a touchmove event handler from the element
Returns: object Element
Adds a touchend event handler to the element
Returns: object Element
Removes a touchend event handler from the element
Returns: object Element
Adds a touchcancel event handler to the element
Returns: object Element
Removes a touchcancel event handler from the element
Returns: object Element
Adds hover event handlers to the element
Returns: object Element
Removes hover event handlers from the element
Returns: object Element
Adds event handlers for an element's drag gesture
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:
Move event and move handler are called in specified context or in context of the element with following parameters:
End event and end handler are called in specified context or in context of the element with following parameters:
Returns: object Element
Removes all drag event handlers from the given element
Returns the length of the given path in pixels
Returns: number length
Returns the coordinates of the point located at the given length along the given path
Returns: object representation of the point:
Returns the subpath of a given path between given start and end lengths
Returns: string path string definition for the segment
Returns the length of the path in pixels (only works
for path elements)
Returns: number length
Returns coordinates of the point located at the given
length on the given path (only works for path elements)
Returns: object representation of the point:
Returns subpath of a given element from given start
and end lengths (only works for path elements)
Returns: string path string definition for the segment
Utility method Finds dot coordinates on the given cubic beziér curve at the given t
Returns: object point information in format:
Utility method Returns the bounding box of a given cubic beziér curve
or
Returns: object bounding box
Utility method Returns true if given
point is inside bounding box
Returns:
boolean
true if point is inside
Utility method Returns true if two bounding
boxes intersect
Returns:
boolean
true if bounding boxes intersect
Utility method Finds intersections of two paths
Returns: array dots of intersection
Utility method Returns true if given
point is inside a given closed path.
Note: fill mode doesn’t affect the result of this method.
Returns:
boolean
true if point is inside the path
Utility method Returns the bounding box of a given path
Returns: object bounding box
Utility method Converts path coordinates into relative values
Returns: array path string
Utility method Converts path coordinates into absolute values
Returns: array path string
Utility method Converts path to a new path where all segments are cubic beziér curves
Returns: array array of segments
Transform the path string with the given matrix
Returns: string transformed path string
Adds each argument to the current set
Returns: object original element
Removes last element and returns it
Returns: object element
Executes given function for each element in the set
If the function returns false, the loop
stops running.
Returns: object Set object
Animates each element in set in sync.
or
[attrs, duration, easing, callback]
// animate all elements in set to radius 10
set.animate({r: 10}, 500, mina.easein);
// or
// animate first element to radius 10, but second to radius 20 and in different time
set.animate([{r: 10}, 500, mina.easein], [{r: 20}, 1500, mina.easein]);Returns: Element the current element
Removes all children of the set.
Returns: object Set object
Specifies how to handle a specific attribute when applied to a set.
or
or
Returns: object Set object
Equivalent of Element.attr.
Returns: object Set object
Removes all elements from the set
Removes range of elements from the set
Returns: object set elements that were deleted
Removes given element from the set
Returns:
boolean
true if object was found and removed
from the set
Inserts set elements after given element.
Returns: object Set object
Union of all bboxes of the set. See Element.getBBox.
Returns: object bounding box descriptor. See Element.getBBox.
Creates a clone of the set.
Returns: object New Set object
Set constructor.
Creates a set and fills it with list of arguments.
Returns: object New Set object
var r = paper.rect(0, 0, 10, 10),
s1 = Snap.set(), // empty set
s2 = Snap.set(r, paper.circle(100, 100, 20)); // prefilled setContain Material UI colours.
Snap().rect(0, 0, 10, 10).attr({fill: Snap.mui.deeppurple, stroke: Snap.mui.amber[600]});Contain Flat UI colours.
Snap().rect(0, 0, 10, 10).attr({fill: Snap.flat.carrot, stroke: Snap.flat.wetasphalt});Imports Material UI colours into global object.
Snap.importMUIColors();
Snap().rect(0, 0, 10, 10).attr({fill: deeppurple, stroke: amber[600]});