zcy
/
snap.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
snap.js/dist/reference.html

2044 lines
236 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Snap.svg API Reference</title>
<meta name="viewport" content="user-scalable=no,initial-scale = 1.0,maximum-scale = 1.0">
<link rel="stylesheet" href="fonts/stylesheet.css"><link rel="stylesheet" href="css/topcoat-desktop-light.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/dr.css">
<link rel="stylesheet" href="css/prism.css"><!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body class="light">
<div id="wrapper">
<div class="max-width">
<div id="sideNav">
<div class="combo">
<input type="search" id="dr-filter" value="" placeholder="search" class="topcoat-search-input">
</div>
<div id="pageNav"><ol id="dr-toc"><li class="dr-lvl0"><a href="#Element" class="{clas}"><span>Element</span></a></li><li class="dr-lvl1"><a href="#Element.add" class="dr-method"><span>Element.add()</span></a></li><li class="dr-lvl1"><a href="#Element.after" class="dr-method"><span>Element.after()</span></a></li><li class="dr-lvl1"><a href="#Element.animate" class="dr-method"><span>Element.animate()</span></a></li><li class="dr-lvl1"><a href="#Element.append" class="dr-method"><span>Element.append()</span></a></li><li class="dr-lvl1"><a href="#Element.asPX" class="dr-method"><span>Element.asPX()</span></a></li><li class="dr-lvl1"><a href="#Element.attr" class="dr-method"><span>Element.attr()</span></a></li><li class="dr-lvl1"><a href="#Element.before" class="dr-method"><span>Element.before()</span></a></li><li class="dr-lvl1"><a href="#Element.click" class="dr-method"><span>Element.click()</span></a></li><li class="dr-lvl1"><a href="#Element.clone" class="dr-method"><span>Element.clone()</span></a></li><li class="dr-lvl1"><a href="#Element.data" class="dr-method"><span>Element.data()</span></a></li><li class="dr-lvl1"><a href="#Element.dblclick" class="dr-method"><span>Element.dblclick()</span></a></li><li class="dr-lvl1"><a href="#Element.drag" class="dr-method"><span>Element.drag()</span></a></li><li class="dr-lvl1"><a href="#Element.getBBox" class="dr-method"><span>Element.getBBox()</span></a></li><li class="dr-lvl1"><a href="#Element.getPointAtLength" class="dr-method"><span>Element.getPointAtLength()</span></a></li><li class="dr-lvl1"><a href="#Element.getSubpath" class="dr-method"><span>Element.getSubpath()</span></a></li><li class="dr-lvl1"><a href="#Element.getTotalLength" class="dr-method"><span>Element.getTotalLength()</span></a></li><li class="dr-lvl1"><a href="#Element.hover" class="dr-method"><span>Element.hover()</span></a></li><li class="dr-lvl1"><a href="#Element.inAnim" class="dr-method"><span>Element.inAnim()</span></a></li><li class="dr-lvl1"><a href="#Element.innerSVG" class="dr-method"><span>Element.innerSVG()</span></a></li><li class="dr-lvl1"><a href="#Element.insertAfter" class="dr-method"><span>Element.insertAfter()</span></a></li><li class="dr-lvl1"><a href="#Element.insertBefore" class="dr-method"><span>Element.insertBefore()</span></a></li><li class="dr-lvl1"><a href="#Element.marker" class="dr-method"><span>Element.marker()</span></a></li><li class="dr-lvl1"><a href="#Element.mousedown" class="dr-method"><span>Element.mousedown()</span></a></li><li class="dr-lvl1"><a href="#Element.mousemove" class="dr-method"><span>Element.mousemove()</span></a></li><li class="dr-lvl1"><a href="#Element.mouseout" class="dr-method"><span>Element.mouseout()</span></a></li><li class="dr-lvl1"><a href="#Element.mouseover" class="dr-method"><span>Element.mouseover()</span></a></li><li class="dr-lvl1"><a href="#Element.mouseup" class="dr-method"><span>Element.mouseup()</span></a></li><li class="dr-lvl1"><a href="#Element.parent" class="dr-method"><span>Element.parent()</span></a></li><li class="dr-lvl1"><a href="#Element.pattern" class="dr-method"><span>Element.pattern()</span></a></li><li class="dr-lvl1"><a href="#Element.prepend" class="dr-method"><span>Element.prepend()</span></a></li><li class="dr-lvl1"><a href="#Element.remove" class="dr-method"><span>Element.remove()</span></a></li><li class="dr-lvl1"><a href="#Element.removeData" class="dr-method"><span>Element.removeData()</span></a></li><li class="dr-lvl1"><a href="#Element.select" class="dr-method"><span>Element.select()</span></a></li><li class="dr-lvl1"><a href="#Element.selectAll" class="dr-method"><span>Element.selectAll()</span></a></li><li class="dr-lvl1"><a href="#Element.stop" class="dr-method"><span>Element.stop()</span></a></li><li class="dr-lvl1"><a href="#Element.toDefs" class="dr-method"><span>Element.toDefs()</span></a></li><li class="dr-lvl1"><a href="#Element.toString" class="dr-method"><span>Element.toString()</span></a></li><li class="dr-lvl1"><a href="#Element.touchcancel" class="dr-method"><span>Element.touchcancel()</span></a></li><li class="dr-lvl1"><a href="#Element.touchend" class="dr-method"><span>Element.touchend()</span></a></li><li class="dr-lvl1"><a href="#Element.touchmove" class="dr-method"><span>Element.touchmove()</span></a></li><li class="dr-lvl1"><a href="#Element.touchstart" class="dr-method"><span>Element.touchstart()</span></a></li><li class="dr-lvl1"><a href="#Element.transform" class="dr-method"><span>Element.transform()</span></a></li><li class="dr-lvl1"><a href="#Element.unclick" class="dr-method"><span>Element.unclick()</span></a></li><li class="dr-lvl1"><a href="#Element.undblclick" class="dr-method"><span>Element.undblclick()</span></a></li><li class="dr-lvl1"><a href="#Element.undrag" class="dr-method"><span>Element.undrag()</span></a></li><li class="dr-lvl1"><a href="#Element.unhover" class="dr-method"><span>Element.unhover()</span></a></li><li class="dr-lvl1"><a href="#Element.unmousedown" class="dr-method"><span>Element.unmousedown()</span></a></li><li class="dr-lvl1"><a href="#Element.unmousemove" class="dr-method"><span>Element.unmousemove()</span></a></li><li class="dr-lvl1"><a href="#Element.unmouseout" class="dr-method"><span>Element.unmouseout()</span></a></li><li class="dr-lvl1"><a href="#Element.unmouseover" class="dr-method"><span>Element.unmouseover()</span></a></li><li class="dr-lvl1"><a href="#Element.unmouseup" class="dr-method"><span>Element.unmouseup()</span></a></li><li class="dr-lvl1"><a href="#Element.untouchcancel" class="dr-method"><span>Element.untouchcancel()</span></a></li><li class="dr-lvl1"><a href="#Element.untouchend" class="dr-method"><span>Element.untouchend()</span></a></li><li class="dr-lvl1"><a href="#Element.untouchmove" class="dr-method"><span>Element.untouchmove()</span></a></li><li class="dr-lvl1"><a href="#Element.untouchstart" class="dr-method"><span>Element.untouchstart()</span></a></li><li class="dr-lvl1"><a href="#Element.use" class="dr-method"><span>Element.use()</span></a></li><li class="dr-lvl0"><a href="#Fragment" class="{clas}"><span>Fragment</span></a></li><li class="dr-lvl1"><a href="#Fragment.select" class="dr-method"><span>Fragment.select()</span></a></li><li class="dr-lvl1"><a href="#Fragment.selectAll" class="dr-method"><span>Fragment.selectAll()</span></a></li><li class="dr-lvl0"><a href="#Matrix" class="{clas}"><span>Matrix</span></a></li><li class="dr-lvl1"><a href="#Matrix.add" class="dr-method"><span>Matrix.add()</span></a></li><li class="dr-lvl1"><a href="#Matrix.clone" class="dr-method"><span>Matrix.clone()</span></a></li><li class="dr-lvl1"><a href="#Matrix.invert" class="dr-method"><span>Matrix.invert()</span></a></li><li class="dr-lvl1"><a href="#Matrix.rotate" class="dr-method"><span>Matrix.rotate()</span></a></li><li class="dr-lvl1"><a href="#Matrix.scale" class="dr-method"><span>Matrix.scale()</span></a></li><li class="dr-lvl1"><a href="#Matrix.split" class="dr-method"><span>Matrix.split()</span></a></li><li class="dr-lvl1"><a href="#Matrix.toTransformString" class="dr-method"><span>Matrix.toTransformString()</span></a></li><li class="dr-lvl1"><a href="#Matrix.translate" class="dr-method"><span>Matrix.translate()</span></a></li><li class="dr-lvl1"><a href="#Matrix.x" class="dr-method"><span>Matrix.x()</span></a></li><li class="dr-lvl1"><a href="#Matrix.y" class="dr-method"><span>Matrix.y()</span></a></li><li class="dr-lvl0"><a href="#Paper" class="{clas}"><span>Paper</span></a></li><li class="dr-lvl1"><a href="#Paper.circle" class="dr-method"><span>Paper.circle()</span></a></li><li class="dr-lvl1"><a href="#Paper.el" class="dr-method"><span>Paper.el()</span></a></li><li class="dr-lvl1"><a href="#Paper.ellipse" class="dr-method"><span>Paper.ellipse()</span></a></li><li class="dr-lvl1"><a href="#Paper.filter" class="dr-method"><span>Paper.filter()</span></a></li><li class="dr-lvl1"><a href="#Paper.g" class="dr-method"><span>Paper.g()</span></a></li><li class="dr-lvl1"><a href="#Paper.gradient" class="dr-method"><span>Paper.gradient()</span></a></li><li class="dr-lvl1"><a href="#Paper.group" class="dr-method"><span>Paper.group()</span></a></li><li class="dr-lvl1"><a href="#Paper.image" class="dr-method"><span>Paper.image()</span></a></li><li class="dr-lvl1"><a href="#Paper.line" class="dr-method"><span>Paper.line()</span></a></li><li class="dr-lvl1"><a href="#Paper.path" class="dr-method"><span>Paper.path()</span></a></li><li class="dr-lvl1"><a href="#Paper.polygon" class="dr-method"><span>Paper.polygon()</span></a></li><li class="dr-lvl1"><a href="#Paper.polyline" class="dr-method"><span>Paper.polyline()</span></a></li><li class="dr-lvl1"><a href="#Paper.rect" class="dr-method"><span>Paper.rect()</span></a></li><li class="dr-lvl1"><a href="#Paper.text" class="dr-method"><span>Paper.text()</span></a></li><li class="dr-lvl1"><a href="#Paper.toString" class="dr-method"><span>Paper.toString()</span></a></li><li class="dr-lvl0"><a href="#Set" class="{clas}"><span>Set</span></a></li><li class="dr-lvl1"><a href="#Set.clear" class="dr-method"><span>Set.clear()</span></a></li><li class="dr-lvl1"><a href="#Set.exclude" class="dr-method"><span>Set.exclude()</span></a></li><li class="dr-lvl1"><a href="#Set.forEach" class="dr-method"><span>Set.forEach()</span></a></li><li class="dr-lvl1"><a href="#Set.pop" class="dr-method"><span>Set.pop()</span></a></li><li class="dr-lvl1"><a href="#Set.push" class="dr-method"><span>Set.push()</span></a></li><li class="dr-lvl1"><a href="#Set.splice" class="dr-method"><span>Set.splice()</span></a></li><li class="dr-lvl0"><a href="#Snap" class="{clas}"><span>Snap</span></a></li><li class="dr-lvl1"><a href="#Snap.Matrix" class="dr-method"><span>Snap.Matrix()</span></a></li><li class="dr-lvl1"><a href="#Snap.ajax" class="dr-method"><span>Snap.ajax()</span></a></li><li class="dr-lvl1"><a href="#Snap.angle" class="dr-method"><span>Snap.angle()</span></a></li><li class="dr-lvl1"><a href="#Snap.animate" class="dr-method"><span>Snap.animate()</span></a></li><li class="dr-lvl1"><a href="#Snap.animation" class="dr-method"><span>Snap.animation()</span></a></li><li class="dr-lvl1"><a href="#Snap.color" class="dr-method"><span>Snap.color()</span></a></li><li class="dr-lvl1"><a href="#Snap.deg" class="dr-method"><span>Snap.deg()</span></a></li><li class="dr-lvl1"><a href="#Snap.filter" class="{clas}"><span>Snap.filter</span></a></li><li class="dr-lvl2"><a href="#Snap.filter.blur" class="dr-method"><span>Snap.filter.blur()</span></a></li><li class="dr-lvl2"><a href="#Snap.filter.brightness" class="dr-method"><span>Snap.filter.brightness()</span></a></li><li class="dr-lvl2"><a href="#Snap.filter.contrast" class="dr-method"><span>Snap.filter.contrast()</span></a></li><li class="dr-lvl2"><a href="#Snap.filter.grayscale" class="dr-method"><span>Snap.filter.grayscale()</span></a></li><li class="dr-lvl2"><a href="#Snap.filter.hueRotate" class="dr-method"><span>Snap.filter.hueRotate()</span></a></li><li class="dr-lvl2"><a href="#Snap.filter.invert" class="dr-method"><span>Snap.filter.invert()</span></a></li><li class="dr-lvl2"><a href="#Snap.filter.saturate" class="dr-method"><span>Snap.filter.saturate()</span></a></li><li class="dr-lvl2"><a href="#Snap.filter.sepia" class="dr-method"><span>Snap.filter.sepia()</span></a></li><li class="dr-lvl2"><a href="#Snap.filter.shadow" class="dr-method"><span>Snap.filter.shadow()</span></a></li><li class="dr-lvl1"><a href="#Snap.format" class="dr-method"><span>Snap.format()</span></a></li><li class="dr-lvl1"><a href="#Snap.fragment" class="dr-method"><span>Snap.fragment()</span></a></li><li class="dr-lvl1"><a href="#Snap.getRGB" class="dr-method"><span>Snap.getRGB()</span></a></li><li class="dr-lvl1"><a href="#Snap.hsb" class="dr-method"><span>Snap.hsb()</span></a></li><li class="dr-lvl1"><a href="#Snap.hsb2rgb" class="dr-method"><span>Snap.hsb2rgb()</span></a></li><li class="dr-lvl1"><a href="#Snap.hsl" class="dr-method"><span>Snap.hsl()</span></a></li><li class="dr-lvl1"><a href="#Snap.hsl2rgb" class="dr-method"><span>Snap.hsl2rgb()</span></a></li><li class="dr-lvl1"><a href="#Snap.is" class="dr-method"><span>Snap.is()</span></a></li><li class="dr-lvl1"><a href="#Snap.load" class="dr-method"><span>Snap.load()</span></a></li><li class="dr-lvl1"><a href="#Snap.parse" class="dr-method"><span>Snap.parse()</span></a></li><li class="dr-lvl1"><a href="#Snap.parsePathString" class="dr-method"><span>Snap.parsePathString()</span></a></li><li class="dr-lvl1"><a href="#Snap.parseTransformString" class="dr-method"><span>Snap.parseTransformString()</span></a></li><li class="dr-lvl1"><a href="#Snap.path" class="{clas}"><span>Snap.path</span></a></li><li class="dr-lvl2"><a href="#Snap.path.bezierBBox" class="dr-method"><span>Snap.path.bezierBBox()</span></a></li><li class="dr-lvl2"><a href="#Snap.path.findDotsAtSegment" class="dr-method"><span>Snap.path.findDotsAtSegment()</span></a></li><li class="dr-lvl2"><a href="#Snap.path.getBBox" class="dr-method"><span>Snap.path.getBBox()</span></a></li><li class="dr-lvl2"><a href="#Snap.path.getPointAtLength" class="dr-method"><span>Snap.path.getPointAtLength()</span></a></li><li class="dr-lvl2"><a href="#Snap.path.getSubpath" class="dr-method"><span>Snap.path.getSubpath()</span></a></li><li class="dr-lvl2"><a href="#Snap.path.getTotalLength" class="dr-method"><span>Snap.path.getTotalLength()</span></a></li><li class="dr-lvl2"><a href="#Snap.path.intersection" class="dr-method"><span>Snap.path.intersection()</span></a></li><li class="dr-lvl2"><a href="#Snap.path.isBBoxIntersect" class="dr-method"><span>Snap.path.isBBoxIntersect()</span></a></li><li class="dr-lvl2"><a href="#Snap.path.isPointInside" class="dr-method"><span>Snap.path.isPointInside()</span></a></li><li class="dr-lvl2"><a href="#Snap.path.isPointInsideBBox" class="dr-method"><span>Snap.path.isPointInsideBBox()</span></a></li><li class="dr-lvl2"><a href="#Snap.path.map" class="dr-method"><span>Snap.path.map()</span></a></li><li class="dr-lvl2"><a href="#Snap.path.toAbsolute" class="dr-method"><span>Snap.path.toAbsolute()</span></a></li><li class="dr-lvl2"><a href="#Snap.path.toCubic" class="dr-method"><span>Snap.path.toCubic()</span></a></li><li class="dr-lvl2"><a href="#Snap.path.toRelative" class="dr-method"><span>Snap.path.toRelative()</span></a></li><li class="dr-lvl1"><a href="#Snap.rad" class="dr-method"><span>Snap.rad()</span></a></li><li class="dr-lvl1"><a href="#Snap.rgb" class="dr-method"><span>Snap.rgb()</span></a></li><li class="dr-lvl1"><a href="#Snap.rgb2hsb" class="dr-method"><span>Snap.rgb2hsb()</span></a></li><li class="dr-lvl1"><a href="#Snap.rgb2hsl" class="dr-method"><span>Snap.rgb2hsl()</span></a></li><li class="dr-lvl1"><a href="#Snap.select" class="dr-method"><span>Snap.select()</span></a></li><li class="dr-lvl1"><a href="#Snap.selectAll" class="dr-method"><span>Snap.selectAll()</span></a></li><li class="dr-lvl1"><a href="#Snap.snapTo" class="dr-method"><span>Snap.snapTo()</span></a></li><li class="dr-lvl0"><a href="#mina" class="dr-method"><span>mina()</span></a></li><li class="dr-lvl1"><a href="#mina.backin" class="dr-method"><span>mina.backin()</span></a></li><li class="dr-lvl1"><a href="#mina.backout" class="dr-method"><span>mina.backout()</span></a></li><li class="dr-lvl1"><a href="#mina.bounce" class="dr-method"><span>mina.bounce()</span></a></li><li class="dr-lvl1"><a href="#mina.easein" class="dr-method"><span>mina.easein()</span></a></li><li class="dr-lvl1"><a href="#mina.easeinout" class="dr-method"><span>mina.easeinout()</span></a></li><li class="dr-lvl1"><a href="#mina.easeout" class="dr-method"><span>mina.easeout()</span></a></li><li class="dr-lvl1"><a href="#mina.elastic" class="dr-method"><span>mina.elastic()</span></a></li><li class="dr-lvl1"><a href="#mina.getById" class="dr-method"><span>mina.getById()</span></a></li><li class="dr-lvl1"><a href="#mina.linear" class="dr-method"><span>mina.linear()</span></a></li><li class="dr-lvl1"><a href="#mina.time" class="dr-method"><span>mina.time()</span></a></li></ol></div>
</div>
</div>
<div id="site">
<header id="main-header">
<div class="max-width">
<hgroup>
<h1>Snap.svg</h1>
<p>API Reference</p>
</hgroup>
</div>
</header>
<div id="content" class="max-width"><article id="Element" class="Element-section"><header><h2 id="Element" class="undefined">Element<a href="#Element" title="Link to this section" class="dr-hash">&#x2693;</a></h2></header>
<section><div class="extra" id="Element-extra"></div></section></article><article id="Element.add" class="Element-add-section"><header><h3 id="Element.add" class="dr-method">Element.add()<a href="#Element.add" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1643 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1643">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.add-extra"></div><div class="dr-method"><p>See <a href="#Element.append" class="dr-link">Element.append</a>
</p>
</div></section></article><article id="Element.after" class="Element-after-section"><header><h3 id="Element.after" class="dr-method">Element.after(el)<a href="#Element.after" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1696 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1696">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.after-extra"></div><div class="dr-method"><p>Inserts given element after the current one
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">el</span>
<span class="dr-type"><em class="dr-type-Element">Element</em></span>
<span class="dr-description">element to insert</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the parent element</span></p>
</div></section></article><article id="Element.animate" class="Element-animate-section"><header><h3 id="Element.animate" class="dr-method">Element.animate(attrs, duration, [easing], [callback])<a href="#Element.animate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2140 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2140">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.animate-extra"></div><div class="dr-method"><p>Animates the given attributes of the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">attrs</span>
<span class="dr-type"><em class="dr-type-object">object</em></span>
<span class="dr-description">key-value pairs of destination attributes</span></li>
<li class="topcoat-list__item"><span class="dr-param">duration</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">duration of the animation in milliseconds</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">easing</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">easing function from <a href="#mina" class="dr-link">mina</a> or custom</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">callback</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">callback function that executes when the animation ends</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the current element</span></p>
</div></section></article><article id="Element.append" class="Element-append-section"><header><h3 id="Element.append" class="dr-method">Element.append(el)<a href="#Element.append" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1637 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1637">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.append-extra"></div><div class="dr-method"><p>Appends the given element to current one
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">el</span>
<span class="dr-type"><em class="dr-type-Element">Element</em> <em class="dr-type-Set">Set</em></span>
<span class="dr-description">element to append</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the parent element</span></p>
</div></section></article><article id="Element.asPX" class="Element-asPX-section"><header><h3 id="Element.asPX" class="dr-method">Element.asPX(attr, [value])<a href="#Element.asPX" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1784 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1784">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.asPX-extra"></div><div class="dr-method"><p>Returns given attribute of the element as a <code>px</code> value (not %, em, etc.)
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">attr</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">attribute name</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">value</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">attribute value</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">result of query selection</span></p>
</div></section></article><article id="Element.attr" class="Element-attr-section"><header><h3 id="Element.attr" class="dr-method">Element.attr(…)<a href="#Element.attr" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1479 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1479">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.attr-extra"></div><div class="dr-method"><p>Gets or sets given attributes of the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">params</span>
<span class="dr-type"><em class="dr-type-object">object</em></span>
<span class="dr-description">contains key-value pairs of attributes you want to set</span></li>
</ol></div>
<p>or
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">param</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">name of the attribute</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the current element</span></p>
<p>or
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">value of attribute</span></p>
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">el.attr({
fill: "#fc0",
stroke: "#000",
strokeWidth: 2, // CamelCase...
"fill-opacity": 0.5 // or dash-separated names
});
console.log(el.attr("fill")); // #fc0
</code></pre></section>
</div></section></article><article id="Element.before" class="Element-before-section"><header><h3 id="Element.before" class="dr-method">Element.before(el)<a href="#Element.before" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1680 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1680">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.before-extra"></div><div class="dr-method"><p>Inserts given element before the current one
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">el</span>
<span class="dr-type"><em class="dr-type-Element">Element</em></span>
<span class="dr-description">element to insert</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the parent element</span></p>
</div></section></article><article id="Element.click" class="Element-click-section"><header><h3 id="Element.click" class="dr-method">Element.click(handler)<a href="#Element.click" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 155 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L155">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.click-extra"></div><div class="dr-method"><p>Adds a click event handler to the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.clone" class="Element-clone-section"><header><h3 id="Element.clone" class="dr-method">Element.clone()<a href="#Element.clone" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1828 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1828">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.clone-extra"></div><div class="dr-method"><p>Creates a clone of the element and inserts it after the element
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the clone</span></p>
</div></section></article><article id="Element.data" class="Element-data-section"><header><h3 id="Element.data" class="dr-method">Element.data(key, [value])<a href="#Element.data" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2212 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2212">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.data-extra"></div><div class="dr-method"><p>Adds or retrieves given value associated with given key. (Don’t confuse
with <code>data-</code> attributes)
</p>
<p>See also <a href="#Element.removeData" class="dr-link">Element.removeData</a>
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">key</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">key to store data</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">value</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-any">any</em></span>
<span class="dr-description">value to store</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
<p>or, if value is not specified:
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-any">any</em> <span class="dr-description">value</span></p>
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">for (var i = 0, i &lt; 5, i++) {
paper.circle(10 + 15 * i, 10, 10)
.attr({fill: "#000"})
.data("i", i)
.click(function () {
alert(this.data("i"));
});
}
</code></pre></section>
</div></section></article><article id="Element.dblclick" class="Element-dblclick-section"><header><h3 id="Element.dblclick" class="dr-method">Element.dblclick(handler)<a href="#Element.dblclick" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 172 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L172">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.dblclick-extra"></div><div class="dr-method"><p>Adds a double click event handler to the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.drag" class="Element-drag-section"><header><h3 id="Element.drag" class="dr-method">Element.drag(onmove, onstart, onend, [mcontext], [scontext], [econtext])<a href="#Element.drag" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 459 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L459">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.drag-extra"></div><div class="dr-method"><p>Adds event handlers for an element&#39;s drag gesture
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">onmove</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for moving</span></li>
<li class="topcoat-list__item"><span class="dr-param">onstart</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for drag start</span></li>
<li class="topcoat-list__item"><span class="dr-param">onend</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for drag end</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">mcontext</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-object">object</em></span>
<span class="dr-description">context for moving handler</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">scontext</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-object">object</em></span>
<span class="dr-description">context for drag start handler</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">econtext</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-object">object</em></span>
<span class="dr-description">context for drag end handler</span></li>
</ol></div>
<p>Additionaly following <code>drag</code> events are triggered: <code>drag.start.&lt;id&gt;</code> on start,
<code>drag.end.&lt;id&gt;</code> on end and <code>drag.move.&lt;id&gt;</code> on every move. When element is dragged over another element
<code>drag.over.&lt;id&gt;</code> fires as well.
</p>
<p>Start event and start handler are called in specified context or in context of the element with following parameters:
</p>
<ol class="dr-json"><li><span class="dr-json-key">x</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x position of the mouse</span>
<li><span class="dr-json-key">y</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y position of the mouse</span>
<li><span class="dr-json-key">event</span><span class="dr-type"><em class="dr-type-object">object</em></span><span class="dr-json-description">DOM event object</span>
</ol>
<p>Move event and move handler are called in specified context or in context of the element with following parameters:
</p>
<ol class="dr-json"><li><span class="dr-json-key">dx</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">shift by x from the start point</span>
<li><span class="dr-json-key">dy</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">shift by y from the start point</span>
<li><span class="dr-json-key">x</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x position of the mouse</span>
<li><span class="dr-json-key">y</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y position of the mouse</span>
<li><span class="dr-json-key">event</span><span class="dr-type"><em class="dr-type-object">object</em></span><span class="dr-json-description">DOM event object</span>
</ol>
<p>End event and end handler are called in specified context or in context of the element with following parameters:
</p>
<ol class="dr-json"><li><span class="dr-json-key">event</span><span class="dr-type"><em class="dr-type-object">object</em></span><span class="dr-json-description">DOM event object</span>
</ol>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div><div class="dr-method"><p>Adds event handlers for an element&#39;s drag gesture
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">onmove</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for moving</span></li>
<li class="topcoat-list__item"><span class="dr-param">onstart</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for drag start</span></li>
<li class="topcoat-list__item"><span class="dr-param">onend</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for drag end</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">mcontext</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-object">object</em></span>
<span class="dr-description">context for moving handler</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">scontext</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-object">object</em></span>
<span class="dr-description">context for drag start handler</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">econtext</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-object">object</em></span>
<span class="dr-description">context for drag end handler</span></li>
</ol></div>
<p>Additionaly following <code>drag</code> events are triggered: <code>drag.start.&lt;id&gt;</code> on start,
<code>drag.end.&lt;id&gt;</code> on end and <code>drag.move.&lt;id&gt;</code> on every move. When element is dragged over another element
<code>drag.over.&lt;id&gt;</code> fires as well.
</p>
<p>Start event and start handler are called in specified context or in context of the element with following parameters:
</p>
<ol class="dr-json"><li><span class="dr-json-key">x</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x position of the mouse</span>
<li><span class="dr-json-key">y</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y position of the mouse</span>
<li><span class="dr-json-key">event</span><span class="dr-type"><em class="dr-type-object">object</em></span><span class="dr-json-description">DOM event object</span>
</ol>
<p>Move event and move handler are called in specified context or in context of the element with following parameters:
</p>
<ol class="dr-json"><li><span class="dr-json-key">dx</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">shift by x from the start point</span>
<li><span class="dr-json-key">dy</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">shift by y from the start point</span>
<li><span class="dr-json-key">x</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x position of the mouse</span>
<li><span class="dr-json-key">y</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y position of the mouse</span>
<li><span class="dr-json-key">event</span><span class="dr-type"><em class="dr-type-object">object</em></span><span class="dr-json-description">DOM event object</span>
</ol>
<p>End event and end handler are called in specified context or in context of the element with following parameters:
</p>
<ol class="dr-json"><li><span class="dr-json-key">event</span><span class="dr-type"><em class="dr-type-object">object</em></span><span class="dr-json-description">DOM event object</span>
</ol>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.getBBox" class="Element-getBBox-section"><header><h3 id="Element.getBBox" class="dr-method">Element.getBBox()<a href="#Element.getBBox" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1528 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1528">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.getBBox-extra"></div><div class="dr-method"><p>Returns the bounding box descriptor for the given element
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">bounding box descriptor:</span></p>
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">cx:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x of the center,</span>
<li><span class="dr-json-key">cy:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x of the center,</span>
<li><span class="dr-json-key">h:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">height,</span>
<li><span class="dr-json-key">height:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">height,</span>
<li><span class="dr-json-key">path:</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">path command for the box,</span>
<li><span class="dr-json-key">r0:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">radius of a circle that fully encloses the box,</span>
<li><span class="dr-json-key">r1:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">radius of the smallest circle that can be enclosed,</span>
<li><span class="dr-json-key">r2:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">radius of the largest circle that can be enclosed,</span>
<li><span class="dr-json-key">vb:</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">box as a viewbox command,</span>
<li><span class="dr-json-key">w:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">width,</span>
<li><span class="dr-json-key">width:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">width,</span>
<li><span class="dr-json-key">x2:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x of the right side,</span>
<li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x of the left side,</span>
<li><span class="dr-json-key">y2:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y of the bottom edge,</span>
<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y of the top edge</span>
</ol></li><li>}</li></ol>
</div></section></article><article id="Element.getPointAtLength" class="Element-getPointAtLength-section"><header><h3 id="Element.getPointAtLength" class="dr-method">Element.getPointAtLength(length)<a href="#Element.getPointAtLength" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1126 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1126">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.getPointAtLength-extra"></div><div class="dr-method"><p>Returns coordinates of the point located at the given length on the given path (only works for <code>path</code> elements)
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">length</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">length, in pixels, from the start of the path, excluding non-rendering jumps</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">representation of the point:</span></p>
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate,</span>
<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate,</span>
<li><span class="dr-json-key">alpha:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">angle of derivative</span>
</ol></li><li>}</li></ol>
</div></section></article><article id="Element.getSubpath" class="Element-getSubpath-section"><header><h3 id="Element.getSubpath" class="dr-method">Element.getSubpath(from, to)<a href="#Element.getSubpath" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1141 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1141">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.getSubpath-extra"></div><div class="dr-method"><p>Returns subpath of a given element from given start and end lengths (only works for <code>path</code> elements)
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">from</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">length, in pixels, from the start of the path to the start of the segment</span></li>
<li class="topcoat-list__item"><span class="dr-param">to</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">length, in pixels, from the start of the path to the end of the segment</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">path string definition for the segment</span></p>
</div></section></article><article id="Element.getTotalLength" class="Element-getTotalLength-section"><header><h3 id="Element.getTotalLength" class="dr-method">Element.getTotalLength()<a href="#Element.getTotalLength" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1105 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1105">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.getTotalLength-extra"></div><div class="dr-method"><p>Returns the length of the path in pixels (only works for <code>path</code> elements)
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">length</span></p>
</div></section></article><article id="Element.hover" class="Element-hover-section"><header><h3 id="Element.hover" class="dr-method">Element.hover(f_in, f_out, [icontext], [ocontext])<a href="#Element.hover" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 372 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L372">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.hover-extra"></div><div class="dr-method"><p>Adds hover event handlers to the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">f_in</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for hover in</span></li>
<li class="topcoat-list__item"><span class="dr-param">f_out</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for hover out</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">icontext</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-object">object</em></span>
<span class="dr-description">context for hover in handler</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">ocontext</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-object">object</em></span>
<span class="dr-description">context for hover out handler</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.inAnim" class="Element-inAnim-section"><header><h3 id="Element.inAnim" class="dr-method">Element.inAnim()<a href="#Element.inAnim" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2055 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2055">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.inAnim-extra"></div><div class="dr-method"><p>Returns a set of animations that may be able to manipulate the current element
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">in format:</span></p>
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">anim</span><span class="dr-type"><em class="dr-type-object">object</em></span><span class="dr-json-description">animation object,</span>
<li><span class="dr-json-key">curStatus</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">0..1 — status of the animation: 0 — just started, 1 — just finished,</span>
<li><span class="dr-json-key">status</span><span class="dr-type"><em class="dr-type-function">function</em></span><span class="dr-json-description">gets or sets the status of the animation,</span>
<li><span class="dr-json-key">stop</span><span class="dr-type"><em class="dr-type-function">function</em></span><span class="dr-json-description">stops the animation</span>
</ol></li><li>}</li></ol>
</div></section></article><article id="Element.innerSVG" class="Element-innerSVG-section"><header><h3 id="Element.innerSVG" class="dr-method">Element.innerSVG()<a href="#Element.innerSVG" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2261 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2261">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.innerSVG-extra"></div><div class="dr-method"><p>Returns SVG code for the element&#39;s contents, equivalent to HTML&#39;s <code>innerHTML</code>
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">SVG code for the element</span></p>
</div></section></article><article id="Element.insertAfter" class="Element-insertAfter-section"><header><h3 id="Element.insertAfter" class="dr-method">Element.insertAfter(el)<a href="#Element.insertAfter" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1726 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1726">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.insertAfter-extra"></div><div class="dr-method"><p>Inserts the element after the given one
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">el</span>
<span class="dr-type"><em class="dr-type-Element">Element</em></span>
<span class="dr-description">element next to whom insert to</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the parent element</span></p>
</div></section></article><article id="Element.insertBefore" class="Element-insertBefore-section"><header><h3 id="Element.insertBefore" class="dr-method">Element.insertBefore(el)<a href="#Element.insertBefore" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1711 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1711">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.insertBefore-extra"></div><div class="dr-method"><p>Inserts the element after the given one
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">el</span>
<span class="dr-type"><em class="dr-type-Element">Element</em></span>
<span class="dr-description">element next to whom insert to</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the parent element</span></p>
</div></section></article><article id="Element.marker" class="Element-marker-section"><header><h3 id="Element.marker" class="dr-method">Element.marker(x, y, width, height, refX, refY)<a href="#Element.marker" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1979 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1979">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.marker-extra"></div><div class="dr-method"><p>Creates a <code>&lt;marker&gt;</code> element from the current element
To create a marker you have to specify the bounding rect and reference point:
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">&#160;</span></li>
<li class="topcoat-list__item"><span class="dr-param">y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">&#160;</span></li>
<li class="topcoat-list__item"><span class="dr-param">width</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">&#160;</span></li>
<li class="topcoat-list__item"><span class="dr-param">height</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">&#160;</span></li>
<li class="topcoat-list__item"><span class="dr-param">refX</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">&#160;</span></li>
<li class="topcoat-list__item"><span class="dr-param">refY</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">&#160;</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the <code>&lt;marker&gt;</code> element</span></p>
<p>You can specify the marker later as an argument for <code>marker-start</code>, <code>marker-end</code>, <code>marker-mid</code>, and <code>marker</code> attributes. The <code>marker</code> attribute places the marker at every point along the path, and <code>marker-mid</code> places them at every point except the start and end.
</p>
</div></section></article><article id="Element.mousedown" class="Element-mousedown-section"><header><h3 id="Element.mousedown" class="dr-method">Element.mousedown(handler)<a href="#Element.mousedown" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 189 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L189">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.mousedown-extra"></div><div class="dr-method"><p>Adds a mousedown event handler to the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.mousemove" class="Element-mousemove-section"><header><h3 id="Element.mousemove" class="dr-method">Element.mousemove(handler)<a href="#Element.mousemove" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 206 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L206">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.mousemove-extra"></div><div class="dr-method"><p>Adds a mousemove event handler to the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.mouseout" class="Element-mouseout-section"><header><h3 id="Element.mouseout" class="dr-method">Element.mouseout(handler)<a href="#Element.mouseout" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 223 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L223">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.mouseout-extra"></div><div class="dr-method"><p>Adds a mouseout event handler to the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.mouseover" class="Element-mouseover-section"><header><h3 id="Element.mouseover" class="dr-method">Element.mouseover(handler)<a href="#Element.mouseover" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 240 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L240">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.mouseover-extra"></div><div class="dr-method"><p>Adds a mouseover event handler to the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.mouseup" class="Element-mouseup-section"><header><h3 id="Element.mouseup" class="dr-method">Element.mouseup(handler)<a href="#Element.mouseup" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 257 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L257">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.mouseup-extra"></div><div class="dr-method"><p>Adds a mouseup event handler to the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.parent" class="Element-parent-section"><header><h3 id="Element.parent" class="dr-method">Element.parent()<a href="#Element.parent" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1625 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1625">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.parent-extra"></div><div class="dr-method"><p>Returns the element&#39;s parent
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the parent element</span></p>
</div></section></article><article id="Element.pattern" class="Element-pattern-section"><header><h3 id="Element.pattern" class="dr-method">Element.pattern(x, y, width, height)<a href="#Element.pattern" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1938 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1938">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.pattern-extra"></div><div class="dr-method"><p>Creates a <code>&lt;pattern&gt;</code> element from the current element
To create a pattern you have to specify the pattern rect:
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x</span>
<span class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-number">number</em></span>
<span class="dr-description">&#160;</span></li>
<li class="topcoat-list__item"><span class="dr-param">y</span>
<span class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-number">number</em></span>
<span class="dr-description">&#160;</span></li>
<li class="topcoat-list__item"><span class="dr-param">width</span>
<span class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-number">number</em></span>
<span class="dr-description">&#160;</span></li>
<li class="topcoat-list__item"><span class="dr-param">height</span>
<span class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-number">number</em></span>
<span class="dr-description">&#160;</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the <code>&lt;pattern&gt;</code> element</span></p>
<p>You can use pattern later on as an argument for <code>fill</code> attribute:
</p>
<section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">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
});
</code></pre></section>
</div></section></article><article id="Element.prepend" class="Element-prepend-section"><header><h3 id="Element.prepend" class="dr-method">Element.prepend(el)<a href="#Element.prepend" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1665 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1665">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.prepend-extra"></div><div class="dr-method"><p>Prepends the given element to the current one
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">el</span>
<span class="dr-type"><em class="dr-type-Element">Element</em></span>
<span class="dr-description">element to prepend</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the parent element</span></p>
</div></section></article><article id="Element.remove" class="Element-remove-section"><header><h3 id="Element.remove" class="dr-method">Element.remove()<a href="#Element.remove" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1739 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1739">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.remove-extra"></div><div class="dr-method"><p>Removes element from the DOM
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the detached element</span></p>
</div></section></article><article id="Element.removeData" class="Element-removeData-section"><header><h3 id="Element.removeData" class="dr-method">Element.removeData([key])<a href="#Element.removeData" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2237 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2237">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.removeData-extra"></div><div class="dr-method"><p>Removes value associated with an element by given key.
If key is not provided, removes all the data of the element.
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param optional">key</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">key</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.select" class="Element-select-section"><header><h3 id="Element.select" class="dr-method">Element.select(query)<a href="#Element.select" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1754 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1754">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.select-extra"></div><div class="dr-method"><p>Gathers the nested <a href="#Element" class="dr-link">Element</a> matching the given set of CSS selectors
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">query</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">CSS selector</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">result of query selection</span></p>
</div></section></article><article id="Element.selectAll" class="Element-selectAll-section"><header><h3 id="Element.selectAll" class="dr-method">Element.selectAll(query)<a href="#Element.selectAll" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1766 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1766">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.selectAll-extra"></div><div class="dr-method"><p>Gathers nested <a href="#Element" class="dr-link">Element</a> objects matching the given set of CSS selectors
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">query</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">CSS selector</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Set">Set</em> <em class="dr-type-array">array</em> <span class="dr-description">result of query selection</span></p>
</div></section></article><article id="Element.stop" class="Element-stop-section"><header><h3 id="Element.stop" class="dr-method">Element.stop()<a href="#Element.stop" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2119 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2119">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.stop-extra"></div><div class="dr-method"><p>Stops all the animations for the current element
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the current element</span></p>
</div></section></article><article id="Element.toDefs" class="Element-toDefs-section"><header><h3 id="Element.toDefs" class="dr-method">Element.toDefs()<a href="#Element.toDefs" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1908 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1908">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.toDefs-extra"></div><div class="dr-method"><p>Moves element to the shared <code>&lt;defs&gt;</code> area
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the clone</span></p>
</div></section></article><article id="Element.toString" class="Element-toString-section"><header><h3 id="Element.toString" class="dr-method">Element.toString()<a href="#Element.toString" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2942 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2942">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.toString-extra"></div><div class="dr-method"><p>Returns SVG code for the element, equivalent to HTML&#39;s <code>outerHTML</code>
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">SVG code for the element</span></p>
</div><div class="dr-method"><p>Returns SVG code for the <a href="#Paper" class="dr-link">Paper</a>
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">SVG code for the <a href="#Paper" class="dr-link">Paper</a></span></p>
</div></section></article><article id="Element.touchcancel" class="Element-touchcancel-section"><header><h3 id="Element.touchcancel" class="dr-method">Element.touchcancel(handler)<a href="#Element.touchcancel" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 325 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L325">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.touchcancel-extra"></div><div class="dr-method"><p>Adds a touchcancel event handler to the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.touchend" class="Element-touchend-section"><header><h3 id="Element.touchend" class="dr-method">Element.touchend(handler)<a href="#Element.touchend" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 308 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L308">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.touchend-extra"></div><div class="dr-method"><p>Adds a touchend event handler to the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.touchmove" class="Element-touchmove-section"><header><h3 id="Element.touchmove" class="dr-method">Element.touchmove(handler)<a href="#Element.touchmove" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 291 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L291">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.touchmove-extra"></div><div class="dr-method"><p>Adds a touchmove event handler to the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.touchstart" class="Element-touchstart-section"><header><h3 id="Element.touchstart" class="dr-method">Element.touchstart(handler)<a href="#Element.touchstart" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 274 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L274">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.touchstart-extra"></div><div class="dr-method"><p>Adds a touchstart event handler to the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.transform" class="Element-transform-section"><header><h3 id="Element.transform" class="dr-method">Element.transform(tstr)<a href="#Element.transform" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1583 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1583">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.transform-extra"></div><div class="dr-method"><p>Gets or sets transformation of the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">tstr</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">transform string in Snap or SVG format</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the current element</span></p>
<p>or
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">transformation descriptor:</span></p>
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">string</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">transform string,</span>
<li><span class="dr-json-key">globalMatrix</span><span class="dr-type"><em class="dr-type-Matrix">Matrix</em></span><span class="dr-json-description">matrix of all transformations applied to element or its parents,</span>
<li><span class="dr-json-key">localMatrix</span><span class="dr-type"><em class="dr-type-Matrix">Matrix</em></span><span class="dr-json-description">matrix of transformations applied only to the element,</span>
<li><span class="dr-json-key">diffMatrix</span><span class="dr-type"><em class="dr-type-Matrix">Matrix</em></span><span class="dr-json-description">matrix of difference between global and local transformations,</span>
<li><span class="dr-json-key">global</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">global transformation as string,</span>
<li><span class="dr-json-key">local</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">local transformation as string,</span>
<li><span class="dr-json-key">toString</span><span class="dr-type"><em class="dr-type-function">function</em></span><span class="dr-json-description">returns <code>string</code> property</span>
</ol></li><li>}</li></ol>
</div></section></article><article id="Element.unclick" class="Element-unclick-section"><header><h3 id="Element.unclick" class="dr-method">Element.unclick(handler)<a href="#Element.unclick" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 163 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L163">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.unclick-extra"></div><div class="dr-method"><p>Removes a click event handler from the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.undblclick" class="Element-undblclick-section"><header><h3 id="Element.undblclick" class="dr-method">Element.undblclick(handler)<a href="#Element.undblclick" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 180 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L180">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.undblclick-extra"></div><div class="dr-method"><p>Removes a double click event handler from the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.undrag" class="Element-undrag-section"><header><h3 id="Element.undrag" class="dr-method">Element.undrag()<a href="#Element.undrag" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 468 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L468">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.undrag-extra"></div><div class="dr-method"><p>Removes all drag event handlers from the given element
</p>
</div></section></article><article id="Element.unhover" class="Element-unhover-section"><header><h3 id="Element.unhover" class="dr-method">Element.unhover(f_in, f_out)<a href="#Element.unhover" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 384 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L384">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.unhover-extra"></div><div class="dr-method"><p>Removes hover event handlers from the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">f_in</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for hover in</span></li>
<li class="topcoat-list__item"><span class="dr-param">f_out</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for hover out</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.unmousedown" class="Element-unmousedown-section"><header><h3 id="Element.unmousedown" class="dr-method">Element.unmousedown(handler)<a href="#Element.unmousedown" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 197 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L197">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.unmousedown-extra"></div><div class="dr-method"><p>Removes a mousedown event handler from the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.unmousemove" class="Element-unmousemove-section"><header><h3 id="Element.unmousemove" class="dr-method">Element.unmousemove(handler)<a href="#Element.unmousemove" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 214 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L214">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.unmousemove-extra"></div><div class="dr-method"><p>Removes a mousemove event handler from the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.unmouseout" class="Element-unmouseout-section"><header><h3 id="Element.unmouseout" class="dr-method">Element.unmouseout(handler)<a href="#Element.unmouseout" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 231 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L231">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.unmouseout-extra"></div><div class="dr-method"><p>Removes a mouseout event handler from the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.unmouseover" class="Element-unmouseover-section"><header><h3 id="Element.unmouseover" class="dr-method">Element.unmouseover(handler)<a href="#Element.unmouseover" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 248 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L248">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.unmouseover-extra"></div><div class="dr-method"><p>Removes a mouseover event handler from the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.unmouseup" class="Element-unmouseup-section"><header><h3 id="Element.unmouseup" class="dr-method">Element.unmouseup(handler)<a href="#Element.unmouseup" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 265 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L265">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.unmouseup-extra"></div><div class="dr-method"><p>Removes a mouseup event handler from the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.untouchcancel" class="Element-untouchcancel-section"><header><h3 id="Element.untouchcancel" class="dr-method">Element.untouchcancel(handler)<a href="#Element.untouchcancel" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 333 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L333">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.untouchcancel-extra"></div><div class="dr-method"><p>Removes a touchcancel event handler from the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.untouchend" class="Element-untouchend-section"><header><h3 id="Element.untouchend" class="dr-method">Element.untouchend(handler)<a href="#Element.untouchend" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 316 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L316">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.untouchend-extra"></div><div class="dr-method"><p>Removes a touchend event handler from the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.untouchmove" class="Element-untouchmove-section"><header><h3 id="Element.untouchmove" class="dr-method">Element.untouchmove(handler)<a href="#Element.untouchmove" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 299 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L299">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.untouchmove-extra"></div><div class="dr-method"><p>Removes a touchmove event handler from the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.untouchstart" class="Element-untouchstart-section"><header><h3 id="Element.untouchstart" class="dr-method">Element.untouchstart(handler)<a href="#Element.untouchstart" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 282 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L282">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.untouchstart-extra"></div><div class="dr-method"><p>Removes a touchstart event handler from the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.use" class="Element-use-section"><header><h3 id="Element.use" class="dr-method">Element.use()<a href="#Element.use" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1799 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1799">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.use-extra"></div><div class="dr-method"><p>Creates a <code>&lt;use&gt;</code> element linked to the current element
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the <code>&lt;use&gt;</code> element</span></p>
</div></section></article><article id="Fragment" class="Fragment-section"><header><h2 id="Fragment" class="undefined">Fragment<a href="#Fragment" title="Link to this section" class="dr-hash">&#x2693;</a></h2></header>
<section><div class="extra" id="Fragment-extra"></div></section></article><article id="Fragment.select" class="Fragment-select-section"><header><h3 id="Fragment.select" class="dr-method">Fragment.select()<a href="#Fragment.select" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2331 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2331">&#x27ad;</a></h3></header>
<section><div class="extra" id="Fragment.select-extra"></div><div class="dr-method"><p>See <a href="#Element.select" class="dr-link">Element.select</a>
</p>
</div></section></article><article id="Fragment.selectAll" class="Fragment-selectAll-section"><header><h3 id="Fragment.selectAll" class="dr-method">Fragment.selectAll()<a href="#Fragment.selectAll" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2338 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2338">&#x27ad;</a></h3></header>
<section><div class="extra" id="Fragment.selectAll-extra"></div><div class="dr-method"><p>See <a href="#Element.selectAll" class="dr-link">Element.selectAll</a>
</p>
</div></section></article><article id="Matrix" class="Matrix-section"><header><h2 id="Matrix" class="undefined">Matrix<a href="#Matrix" title="Link to this section" class="dr-hash">&#x2693;</a></h2></header>
<section><div class="extra" id="Matrix-extra"></div></section></article><article id="Matrix.add" class="Matrix-add-section"><header><h3 id="Matrix.add" class="dr-method">Matrix.add(…)<a href="#Matrix.add" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 390 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L390">&#x27ad;</a></h3></header>
<section><div class="extra" id="Matrix.add-extra"></div><div class="dr-method"><p>Adds the given matrix to existing one
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">a</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">&#160;</span></li>
<li class="topcoat-list__item"><span class="dr-param">b</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">&#160;</span></li>
<li class="topcoat-list__item"><span class="dr-param">c</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">&#160;</span></li>
<li class="topcoat-list__item"><span class="dr-param">d</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">&#160;</span></li>
<li class="topcoat-list__item"><span class="dr-param">e</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">&#160;</span></li>
<li class="topcoat-list__item"><span class="dr-param">f</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">&#160;</span></li>
</ol></div>
<p>or
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">matrix</span>
<span class="dr-type"><em class="dr-type-object">object</em></span>
<span class="dr-description"><a href="#Matrix" class="dr-link">Matrix</a></span></li>
</ol></div>
</div></section></article><article id="Matrix.clone" class="Matrix-clone-section"><header><h3 id="Matrix.clone" class="dr-method">Matrix.clone()<a href="#Matrix.clone" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 437 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L437">&#x27ad;</a></h3></header>
<section><div class="extra" id="Matrix.clone-extra"></div><div class="dr-method"><p>Returns a copy of the matrix
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Matrix" class="dr-link">Matrix</a></span></p>
</div></section></article><article id="Matrix.invert" class="Matrix-invert-section"><header><h3 id="Matrix.invert" class="dr-method">Matrix.invert()<a href="#Matrix.invert" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 425 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L425">&#x27ad;</a></h3></header>
<section><div class="extra" id="Matrix.invert-extra"></div><div class="dr-method"><p>Returns an inverted version of the matrix
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Matrix" class="dr-link">Matrix</a></span></p>
</div></section></article><article id="Matrix.rotate" class="Matrix-rotate-section"><header><h3 id="Matrix.rotate" class="dr-method">Matrix.rotate(a, x, y)<a href="#Matrix.rotate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 478 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L478">&#x27ad;</a></h3></header>
<section><div class="extra" id="Matrix.rotate-extra"></div><div class="dr-method"><p>Rotates the matrix
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">a</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">angle of rotation, in degrees</span></li>
<li class="topcoat-list__item"><span class="dr-param">x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">horizontal origin point from which to rotate</span></li>
<li class="topcoat-list__item"><span class="dr-param">y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">vertical origin point from which to rotate</span></li>
</ol></div>
</div></section></article><article id="Matrix.scale" class="Matrix-scale-section"><header><h3 id="Matrix.scale" class="dr-method">Matrix.scale(x, [y], [cx], [cy])<a href="#Matrix.scale" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 462 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L462">&#x27ad;</a></h3></header>
<section><div class="extra" id="Matrix.scale-extra"></div><div class="dr-method"><p>Scales the matrix
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">amount to be scaled, with <code>1</code> resulting in no change</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">y</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">amount to scale along the vertical axis. (Otherwise <code>x</code> applies to both axes.)</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">cx</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">horizontal origin point from which to scale</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">cy</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">vertical origin point from which to scale</span></li>
</ol></div>
</div></section></article><article id="Matrix.split" class="Matrix-split-section"><header><h3 id="Matrix.split" class="dr-method">Matrix.split()<a href="#Matrix.split" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 545 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L545">&#x27ad;</a></h3></header>
<section><div class="extra" id="Matrix.split-extra"></div><div class="dr-method"><p>Splits matrix into primitive transformations
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">in format:</span></p>
<ol class="dr-json"><li><span class="dr-json-key">dx</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">translation by x</span>
<li><span class="dr-json-key">dy</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">translation by y</span>
<li><span class="dr-json-key">scalex</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">scale by x</span>
<li><span class="dr-json-key">scaley</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">scale by y</span>
<li><span class="dr-json-key">shear</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">shear</span>
<li><span class="dr-json-key">rotate</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">rotation in deg</span>
<li><span class="dr-json-key">isSimple</span><span class="dr-type"><em class="dr-type-boolean">boolean</em></span><span class="dr-json-description">could it be represented via simple transformations</span>
</ol>
</div></section></article><article id="Matrix.toTransformString" class="Matrix-toTransformString-section"><header><h3 id="Matrix.toTransformString" class="dr-method">Matrix.toTransformString()<a href="#Matrix.toTransformString" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 588 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L588">&#x27ad;</a></h3></header>
<section><div class="extra" id="Matrix.toTransformString-extra"></div><div class="dr-method"><p>Returns transform string that represents given matrix
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">transform string</span></p>
</div></section></article><article id="Matrix.translate" class="Matrix-translate-section"><header><h3 id="Matrix.translate" class="dr-method">Matrix.translate(x, y)<a href="#Matrix.translate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 448 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L448">&#x27ad;</a></h3></header>
<section><div class="extra" id="Matrix.translate-extra"></div><div class="dr-method"><p>Translate the matrix
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">horizontal offset distance</span></li>
<li class="topcoat-list__item"><span class="dr-param">y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">vertical offset distance</span></li>
</ol></div>
</div></section></article><article id="Matrix.x" class="Matrix-x-section"><header><h3 id="Matrix.x" class="dr-method">Matrix.x(x, y)<a href="#Matrix.x" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 496 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L496">&#x27ad;</a></h3></header>
<section><div class="extra" id="Matrix.x-extra"></div><div class="dr-method"><p>Returns x coordinate for given point after transformation described by the matrix. See also <a href="#Matrix.y" class="dr-link">Matrix.y</a>
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">&#160;</span></li>
<li class="topcoat-list__item"><span class="dr-param">y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">&#160;</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">x</span></p>
</div></section></article><article id="Matrix.y" class="Matrix-y-section"><header><h3 id="Matrix.y" class="dr-method">Matrix.y(x, y)<a href="#Matrix.y" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 508 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L508">&#x27ad;</a></h3></header>
<section><div class="extra" id="Matrix.y-extra"></div><div class="dr-method"><p>Returns y coordinate for given point after transformation described by the matrix. See also <a href="#Matrix.x" class="dr-link">Matrix.x</a>
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">&#160;</span></li>
<li class="topcoat-list__item"><span class="dr-param">y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">&#160;</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">y</span></p>
</div></section></article><article id="Paper" class="Paper-section"><header><h2 id="Paper" class="undefined">Paper<a href="#Paper" title="Link to this section" class="dr-hash">&#x2693;</a></h2></header>
<section><div class="extra" id="Paper-extra"></div></section></article><article id="Paper.circle" class="Paper-circle-section"><header><h3 id="Paper.circle" class="dr-method">Paper.circle(x, y, r)<a href="#Paper.circle" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2611 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2611">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.circle-extra"></div><div class="dr-method"><p>Draws a circle
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">x coordinate of the centre</span></li>
<li class="topcoat-list__item"><span class="dr-param">y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">y coordinate of the centre</span></li>
<li class="topcoat-list__item"><span class="dr-param">r</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">radius</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">the <code>circle</code> element</span></p>
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var c = paper.circle(50, 50, 40);
</code></pre></section>
</div></section></article><article id="Paper.el" class="Paper-el-section"><header><h3 id="Paper.el" class="dr-method">Paper.el(name, attr)<a href="#Paper.el" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2551 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2551">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.el-extra"></div><div class="dr-method"><p>Creates an element on paper with a given name and no attributes
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">name</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">tag name</span></li>
<li class="topcoat-list__item"><span class="dr-param">attr</span>
<span class="dr-type"><em class="dr-type-object">object</em></span>
<span class="dr-description">attributes</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the current element</span></p>
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var c = paper.circle(10, 10, 10); // is the same as...
var c = paper.el("circle").attr({
cx: 10,
cy: 10,
r: 10
});
</code></pre></section>
</div></section></article><article id="Paper.ellipse" class="Paper-ellipse-section"><header><h3 id="Paper.ellipse" class="dr-method">Paper.ellipse(x, y, rx, ry)<a href="#Paper.ellipse" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2686 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2686">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.ellipse-extra"></div><div class="dr-method"><p>Draws an ellipse
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">x coordinate of the centre</span></li>
<li class="topcoat-list__item"><span class="dr-param">y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">y coordinate of the centre</span></li>
<li class="topcoat-list__item"><span class="dr-param">rx</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">horizontal radius</span></li>
<li class="topcoat-list__item"><span class="dr-param">ry</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">vertical radius</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">the <code>ellipse</code> element</span></p>
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var c = paper.ellipse(50, 50, 40, 20);
</code></pre></section>
</div></section></article><article id="Paper.filter" class="Paper-filter-section"><header><h3 id="Paper.filter" class="dr-method">Paper.filter(filstr)<a href="#Paper.filter" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 37 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L37">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.filter-extra"></div><div class="dr-method"><p>Creates a <code>&lt;filter&gt;</code> element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">filstr</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">SVG fragment of filter provided as a string</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
<p>Note: It is recommended to use filters embedded into the page inside an empty SVG element.
</p>
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var f = paper.filter('&lt;feGaussianBlur stdDeviation="2"/>'),
c = paper.circle(10, 10, 10).attr({
filter: f
});
</code></pre></section>
</div></section></article><article id="Paper.g" class="Paper-g-section"><header><h3 id="Paper.g" class="dr-method">Paper.g([varargs])<a href="#Paper.g" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2762 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2762">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.g-extra"></div><div class="dr-method"><p>Creates a group element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param optional">varargs</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-…">…</em></span>
<span class="dr-description">elements to nest within the group</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">the <code>g</code> element</span></p>
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var c1 = paper.circle(),
c2 = paper.rect(),
g = paper.g(c2, c1); // note that the order of elements is different
</code></pre></section>
<p>or
</p>
<section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var c1 = paper.circle(),
c2 = paper.rect(),
g = paper.g();
g.add(c2, c1);
</code></pre></section>
</div></section></article><article id="Paper.gradient" class="Paper-gradient-section"><header><h3 id="Paper.gradient" class="dr-method">Paper.gradient(gradient)<a href="#Paper.gradient" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2926 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2926">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.gradient-extra"></div><div class="dr-method"><p>Creates a gradient element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">gradient</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">gradient descriptor</span></li>
</ol></div>
<h3>Gradient Descriptor</h3><p>The gradient descriptor is an expression formatted as
follows: <code>&lt;type&gt;(&lt;coords&gt;)&lt;colors&gt;</code>. The <code>&lt;type&gt;</code> can be
either linear or radial. The uppercase <code>L</code> or <code>R</code> letters
indicate absolute coordinates offset from the SVG surface.
Lowercase <code>l</code> or <code>r</code> letters indicate coordinates
calculated relative to the element to which the gradient is
applied. Coordinates specify a linear gradient vector as
<code>x1</code>, <code>y1</code>, <code>x2</code>, <code>y2</code>, or a radial gradient as <code>cx</code>, <code>cy</code>,
<code>r</code> and optional <code>fx</code>, <code>fy</code> specifying a focal point away
from the center of the circle. Specify <code>&lt;colors&gt;</code> as a list
of dash-separated CSS color values. Each color may be
followed by a custom offset value, separated with a colon
character.
</p>
<h3>Examples</h3><p>Linear gradient, relative from top-left corner to bottom-right
corner, from black through red to white:
</p>
<section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var g = paper.gradient("l(0, 0, 1, 1)#000-#f00-#fff");
</code></pre></section>
<p>Linear gradient, absolute from (0, 0) to (100, 100), from black
through red at 25% to white:
</p>
<section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var g = paper.gradient("L(0, 0, 100, 100)#000-#f00:25%-#fff");
</code></pre></section>
<p>Radial gradient, relative from the center of the element with radius
half the width, from black to white:
</p>
<section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var g = paper.gradient("r(0.5, 0.5, 0.5)#000-#fff");
</code></pre></section>
<p>To apply the gradient:
</p>
<section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">paper.circle(50, 50, 40).attr({
fill: g
});
</code></pre></section>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">the <code>gradient</code> element</span></p>
</div></section></article><article id="Paper.group" class="Paper-group-section"><header><h3 id="Paper.group" class="dr-method">Paper.group()<a href="#Paper.group" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2768 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2768">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.group-extra"></div><div class="dr-method"><p>See <a href="#Paper.g" class="dr-link">Paper.g</a>
</p>
</div></section></article><article id="Paper.image" class="Paper-image-section"><header><h3 id="Paper.image" class="dr-method">Paper.image(src, x, y, width, height)<a href="#Paper.image" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2643 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2643">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.image-extra"></div><div class="dr-method"><p>Places an image on the surface
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">src</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">URI of the source image</span></li>
<li class="topcoat-list__item"><span class="dr-param">x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">x offset position</span></li>
<li class="topcoat-list__item"><span class="dr-param">y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">y offset position</span></li>
<li class="topcoat-list__item"><span class="dr-param">width</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">width of the image</span></li>
<li class="topcoat-list__item"><span class="dr-param">height</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">height of the image</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">the <code>image</code> element</span></p>
<p>or
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object with type <code>image</code></span></p>
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var c = paper.image("apple.png", 10, 10, 80, 80);
</code></pre></section>
</div></section></article><article id="Paper.line" class="Paper-line-section"><header><h3 id="Paper.line" class="dr-method">Paper.line(x1, y1, x2, y2)<a href="#Paper.line" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2824 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2824">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.line-extra"></div><div class="dr-method"><p>Draws a line
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x1</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">x coordinate position of the start</span></li>
<li class="topcoat-list__item"><span class="dr-param">y1</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">y coordinate position of the start</span></li>
<li class="topcoat-list__item"><span class="dr-param">x2</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">x coordinate position of the end</span></li>
<li class="topcoat-list__item"><span class="dr-param">y2</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">y coordinate position of the end</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">the <code>line</code> element</span></p>
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var t1 = paper.line(50, 50, 100, 100);
</code></pre></section>
</div></section></article><article id="Paper.path" class="Paper-path-section"><header><h3 id="Paper.path" class="dr-method">Paper.path([pathString])<a href="#Paper.path" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2731 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2731">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.path-extra"></div><div class="dr-method"><p>Creates a <code>&lt;path&gt;</code> element using the given string as the path&#39;s definition
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param optional">pathString</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">path string in SVG format</span></li>
</ol></div>
<p>Path string consists of one-letter commands, followed by comma seprarated arguments in numerical form. Example:
</p>
<section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">"M10,20L30,40"
</code></pre></section>
<p>This example features two commands: <code>M</code>, with arguments <code>(10, 20)</code> and <code>L</code> with arguments <code>(30, 40)</code>. Uppercase letter commands express coordinates in absolute terms, while lowercase commands express them in relative terms from the most recently declared coordinates.
</p>
<p></p>
<p>Here is short list of commands available, for more details see <a href="http://www.w3.org/TR/SVG/paths.html#PathData" title="Details of a path's data attribute's format are described in the SVG specification.">SVG path string format</a> or <a href="https://developer.mozilla.org/en/SVG/Tutorial/Paths">article about path strings at MDN</a>.</p>
<table><thead><tr><th>Command</th><th>Name</th><th>Parameters</th></tr></thead><tbody>
<tr><td>M</td><td>moveto</td><td>(x y)+</td></tr>
<tr><td>Z</td><td>closepath</td><td>(none)</td></tr>
<tr><td>L</td><td>lineto</td><td>(x y)+</td></tr>
<tr><td>H</td><td>horizontal lineto</td><td>x+</td></tr>
<tr><td>V</td><td>vertical lineto</td><td>y+</td></tr>
<tr><td>C</td><td>curveto</td><td>(x1 y1 x2 y2 x y)+</td></tr>
<tr><td>S</td><td>smooth curveto</td><td>(x2 y2 x y)+</td></tr>
<tr><td>Q</td><td>quadratic Bézier curveto</td><td>(x1 y1 x y)+</td></tr>
<tr><td>T</td><td>smooth quadratic Bézier curveto</td><td>(x y)+</td></tr>
<tr><td>A</td><td>elliptical arc</td><td>(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+</td></tr>
<tr><td>R</td><td><a href="http://en.wikipedia.org/wiki/Catmull–Rom_spline#Catmull.E2.80.93Rom_spline">Catmull-Rom curveto</a>*</td><td>x1 y1 (x y)+</td></tr></tbody></table>
<p><li><em>Catmull-Rom curveto</em> is a not standard SVG command and added to make life easier.</li>
Note: there is a special case when a path consists of only three commands: <code>M10,10R…z</code>. In this case the path connects back to its starting point.
</p>
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var c = paper.path("M10 10L90 90");
// draw a diagonal line:
// move to 10,10, line to 90,90
</code></pre></section>
</div></section></article><article id="Paper.polygon" class="Paper-polygon-section"><header><h3 id="Paper.polygon" class="dr-method">Paper.polygon()<a href="#Paper.polygon" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2873 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2873">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.polygon-extra"></div><div class="dr-method"><p>Draws a polygon. See <a href="#Paper.polyline" class="dr-link">Paper.polyline</a>
</p>
</div></section></article><article id="Paper.polyline" class="Paper-polyline-section"><header><h3 id="Paper.polyline" class="dr-method">Paper.polyline(…)<a href="#Paper.polyline" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2853 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2853">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.polyline-extra"></div><div class="dr-method"><p>Draws a polyline
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">points</span>
<span class="dr-type"><em class="dr-type-array">array</em></span>
<span class="dr-description">array of points</span></li>
</ol></div>
<p>or
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">varargs</span>
<span class="dr-type"><em class="dr-type-…">…</em></span>
<span class="dr-description">points</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">the <code>polyline</code> element</span></p>
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var p1 = paper.polyline([10, 10, 100, 100]);
var p2 = paper.polyline(10, 10, 100, 100);
</code></pre></section>
</div></section></article><article id="Paper.rect" class="Paper-rect-section"><header><h3 id="Paper.rect" class="dr-method">Paper.rect(x, y, width, height, [rx], [ry])<a href="#Paper.rect" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2574 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2574">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.rect-extra"></div><div class="dr-method"><p></p>
<p>Draws a rectangle
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">x coordinate of the top left corner</span></li>
<li class="topcoat-list__item"><span class="dr-param">y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">y coordinate of the top left corner</span></li>
<li class="topcoat-list__item"><span class="dr-param">width</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">width</span></li>
<li class="topcoat-list__item"><span class="dr-param">height</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">height</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">rx</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">horizontal radius for rounded corners, default is 0</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">ry</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">vertical radius for rounded corners, default is rx or 0</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">the <code>rect</code> element</span></p>
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">// regular rectangle
var c = paper.rect(10, 10, 50, 50);
// rectangle with rounded corners
var c = paper.rect(40, 40, 50, 50, 10);
</code></pre></section>
</div></section></article><article id="Paper.text" class="Paper-text-section"><header><h3 id="Paper.text" class="dr-method">Paper.text(x, y, text)<a href="#Paper.text" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2796 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2796">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.text-extra"></div><div class="dr-method"><p>Draws a text string
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">x coordinate position</span></li>
<li class="topcoat-list__item"><span class="dr-param">y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">y coordinate position</span></li>
<li class="topcoat-list__item"><span class="dr-param">text</span>
<span class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-array">array</em></span>
<span class="dr-description">The text string to draw or array of strings to nest within separate <code>&lt;tspan&gt;</code> elements</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">the <code>text</code> element</span></p>
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var t1 = paper.text(50, 50, "Snap");
var t2 = paper.text(50, 50, ["S","n","a","p"]);
</code></pre></section>
</div></section></article><article id="Paper.toString" class="Paper-toString-section"><header><h3 id="Paper.toString" class="dr-method">Paper.toString()<a href="#Paper.toString" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2942 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2942">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.toString-extra"></div><div class="dr-method"><p>Returns SVG code for the element, equivalent to HTML&#39;s <code>outerHTML</code>
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">SVG code for the element</span></p>
</div><div class="dr-method"><p>Returns SVG code for the <a href="#Paper" class="dr-link">Paper</a>
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">SVG code for the <a href="#Paper" class="dr-link">Paper</a></span></p>
</div></section></article><article id="Set" class="Set-section"><header><h2 id="Set" class="undefined">Set<a href="#Set" title="Link to this section" class="dr-hash">&#x2693;</a></h2></header>
<section><div class="extra" id="Set-extra"></div></section></article><article id="Set.clear" class="Set-clear-section"><header><h3 id="Set.clear" class="dr-method">Set.clear()<a href="#Set.clear" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 96 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/set.js#L96">&#x27ad;</a></h3></header>
<section><div class="extra" id="Set.clear-extra"></div><div class="dr-method"><p>Removes all elements from the set
</p>
</div></section></article><article id="Set.exclude" class="Set-exclude-section"><header><h3 id="Set.exclude" class="dr-method">Set.exclude(element)<a href="#Set.exclude" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 147 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/set.js#L147">&#x27ad;</a></h3></header>
<section><div class="extra" id="Set.exclude-extra"></div><div class="dr-method"><p>Removes given element from the set
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">element</span>
<span class="dr-type"><em class="dr-type-object">object</em></span>
<span class="dr-description">element to remove</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-boolean">boolean</em> <span class="dr-description"><code>true</code> if object was found and removed from the set</span></p>
</div></section></article><article id="Set.forEach" class="Set-forEach-section"><header><h3 id="Set.forEach" class="dr-method">Set.forEach(callback, thisArg)<a href="#Set.forEach" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 76 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/set.js#L76">&#x27ad;</a></h3></header>
<section><div class="extra" id="Set.forEach-extra"></div><div class="dr-method"><p>Executes given function for each element in the set
</p>
<p>If the function returns <code>false</code>, the loop stops running.
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">callback</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">function to run</span></li>
<li class="topcoat-list__item"><span class="dr-param">thisArg</span>
<span class="dr-type"><em class="dr-type-object">object</em></span>
<span class="dr-description">context object for the callback</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Set object</span></p>
</div></section></article><article id="Set.pop" class="Set-pop-section"><header><h3 id="Set.pop" class="dr-method">Set.pop()<a href="#Set.pop" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 60 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/set.js#L60">&#x27ad;</a></h3></header>
<section><div class="extra" id="Set.pop-extra"></div><div class="dr-method"><p>Removes last element and returns it
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">element</span></p>
</div></section></article><article id="Set.push" class="Set-push-section"><header><h3 id="Set.push" class="dr-method">Set.push()<a href="#Set.push" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 40 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/set.js#L40">&#x27ad;</a></h3></header>
<section><div class="extra" id="Set.push-extra"></div><div class="dr-method"><p>Adds each argument to the current set
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element</span></p>
</div></section></article><article id="Set.splice" class="Set-splice-section"><header><h3 id="Set.splice" class="dr-method">Set.splice(index, count, [insertion…])<a href="#Set.splice" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 112 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/set.js#L112">&#x27ad;</a></h3></header>
<section><div class="extra" id="Set.splice-extra"></div><div class="dr-method"><p>Removes range of elements from the set
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">index</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">position of the deletion</span></li>
<li class="topcoat-list__item"><span class="dr-param">count</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">number of element to remove</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">insertion…</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-object">object</em></span>
<span class="dr-description">elements to insert</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">set elements that were deleted</span></p>
</div></section></article><article id="Snap" class="Snap-section"><header><h2 id="Snap" class="undefined">Snap<a href="#Snap" title="Link to this section" class="dr-hash">&#x2693;</a></h2></header>
<section><div class="extra" id="Snap-extra"></div></section></article><article id="Snap.Matrix" class="Snap-Matrix-section"><header><h3 id="Snap.Matrix" class="dr-method">Snap.Matrix(…)<a href="#Snap.Matrix" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 620 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L620">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.Matrix-extra"></div><div class="dr-method"><p>Utility method
Returns a matrix based on the given parameters
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">a</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">&#160;</span></li>
<li class="topcoat-list__item"><span class="dr-param">b</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">&#160;</span></li>
<li class="topcoat-list__item"><span class="dr-param">c</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">&#160;</span></li>
<li class="topcoat-list__item"><span class="dr-param">d</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">&#160;</span></li>
<li class="topcoat-list__item"><span class="dr-param">e</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">&#160;</span></li>
<li class="topcoat-list__item"><span class="dr-param">f</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">&#160;</span></li>
</ol></div>
<p>or
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">svgMatrix</span>
<span class="dr-type"><em class="dr-type-SVGMatrix">SVGMatrix</em></span>
<span class="dr-description">&#160;</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Matrix" class="dr-link">Matrix</a></span></p>
</div></section></article><article id="Snap.ajax" class="Snap-ajax-section"><header><h3 id="Snap.ajax" class="dr-method">Snap.ajax(…)<a href="#Snap.ajax" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2974 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2974">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.ajax-extra"></div><div class="dr-method"><p>Simple implementation of Ajax
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">url</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">URL</span></li>
<li class="topcoat-list__item"><span class="dr-param">postData</span>
<span class="dr-type"><em class="dr-type-object">object</em> <em class="dr-type-string">string</em></span>
<span class="dr-description">data for post request</span></li>
<li class="topcoat-list__item"><span class="dr-param">callback</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">callback</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">scope</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-object">object</em></span>
<span class="dr-description">scope of callback</span></li>
</ol></div>
<p>or
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">url</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">URL</span></li>
<li class="topcoat-list__item"><span class="dr-param">callback</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">callback</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">scope</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-object">object</em></span>
<span class="dr-description">scope of callback</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-XMLHttpRequest">XMLHttpRequest</em> <span class="dr-description">the XMLHttpRequest object, just in case</span></p>
</div></section></article><article id="Snap.angle" class="Snap-angle-section"><header><h3 id="Snap.angle" class="dr-method">Snap.angle(x1, y1, x2, y2, [x3], [y3])<a href="#Snap.angle" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 307 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L307">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.angle-extra"></div><div class="dr-method"><p>Returns an angle between two or three points
</p>
<h3>Parameters</h3><div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x1</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">x coord of first point</span></li>
<li class="topcoat-list__item"><span class="dr-param">y1</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">y coord of first point</span></li>
<li class="topcoat-list__item"><span class="dr-param">x2</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">x coord of second point</span></li>
<li class="topcoat-list__item"><span class="dr-param">y2</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">y coord of second point</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">x3</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">x coord of third point</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">y3</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">y coord of third point</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">angle in degrees</span></p>
</div></section></article><article id="Snap.animate" class="Snap-animate-section"><header><h3 id="Snap.animate" class="dr-method">Snap.animate(from, to, setter, duration, [easing], [callback])<a href="#Snap.animate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2100 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2100">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.animate-extra"></div><div class="dr-method"><p>Runs generic animation of one number into another with a caring function
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">from</span>
<span class="dr-type"><em class="dr-type-number">number</em> <em class="dr-type-array">array</em></span>
<span class="dr-description">number or array of numbers</span></li>
<li class="topcoat-list__item"><span class="dr-param">to</span>
<span class="dr-type"><em class="dr-type-number">number</em> <em class="dr-type-array">array</em></span>
<span class="dr-description">number or array of numbers</span></li>
<li class="topcoat-list__item"><span class="dr-param">setter</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">caring function that accepts one number argument</span></li>
<li class="topcoat-list__item"><span class="dr-param">duration</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">duration, in milliseconds</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">easing</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">easing function from <a href="#mina" class="dr-link">mina</a> or custom</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">callback</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">callback function to execute when animation ends</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">animation object in <a href="#mina" class="dr-link">mina</a> format</span></p>
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">id</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">animation id, consider it read-only,</span>
<li><span class="dr-json-key">duration</span><span class="dr-type"><em class="dr-type-function">function</em></span><span class="dr-json-description">gets or sets the duration of the animation,</span>
<li><span class="dr-json-key">easing</span><span class="dr-type"><em class="dr-type-function">function</em></span><span class="dr-json-description">easing,</span>
<li><span class="dr-json-key">speed</span><span class="dr-type"><em class="dr-type-function">function</em></span><span class="dr-json-description">gets or sets the speed of the animation,</span>
<li><span class="dr-json-key">status</span><span class="dr-type"><em class="dr-type-function">function</em></span><span class="dr-json-description">gets or sets the status of the animation,</span>
<li><span class="dr-json-key">stop</span><span class="dr-type"><em class="dr-type-function">function</em></span><span class="dr-json-description">stops the animation</span>
</ol></li><li>}</li></ol>
</div></section></article><article id="Snap.animation" class="Snap-animation-section"><header><h3 id="Snap.animation" class="dr-method">Snap.animation(attr, duration, [easing], [callback])<a href="#Snap.animation" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2038 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2038">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.animation-extra"></div><div class="dr-method"><p>Creates an animation object
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">attr</span>
<span class="dr-type"><em class="dr-type-object">object</em></span>
<span class="dr-description">attributes of final destination</span></li>
<li class="topcoat-list__item"><span class="dr-param">duration</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">duration of the animation, in milliseconds</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">easing</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">one of easing functions of <a href="#mina" class="dr-link">mina</a> or custom one</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">callback</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">callback function that fires when animation ends</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">animation object</span></p>
</div></section></article><article id="Snap.color" class="Snap-color-section"><header><h3 id="Snap.color" class="dr-method">Snap.color(clr)<a href="#Snap.color" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 857 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L857">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.color-extra"></div><div class="dr-method"><p>Parses the color string and returns an object featuring the color&#39;s component values
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">clr</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">color string in one of the supported formats (see <a href="#Snap.getRGB" class="dr-link">Snap.getRGB</a>)</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Combined RGB/HSB object in the following format:</span></p>
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">r</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">red,</span>
<li><span class="dr-json-key">g</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">green,</span>
<li><span class="dr-json-key">b</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">blue,</span>
<li><span class="dr-json-key">hex</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">color in HTML/CSS format: #••••••,</span>
<li><span class="dr-json-key">error</span><span class="dr-type"><em class="dr-type-boolean">boolean</em></span><span class="dr-json-description"><code>true</code> if string can&#39;t be parsed,</span>
<li><span class="dr-json-key">h</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">hue,</span>
<li><span class="dr-json-key">s</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">saturation,</span>
<li><span class="dr-json-key">v</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">value (brightness),</span>
<li><span class="dr-json-key">l</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">lightness</span>
</ol></li><li>}</li></ol>
</div></section></article><article id="Snap.deg" class="Snap-deg-section"><header><h3 id="Snap.deg" class="dr-method">Snap.deg(rad)<a href="#Snap.deg" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 291 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L291">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.deg-extra"></div><div class="dr-method"><p>Transform angle to degrees
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">rad</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">angle in radians</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">angle in degrees</span></p>
</div></section></article><article id="Snap.filter" class="Snap-filter-section"><header><h3 id="Snap.filter" class="undefined">Snap.filter<a href="#Snap.filter" title="Link to this section" class="dr-hash">&#x2693;</a></h3></header>
<section><div class="extra" id="Snap.filter-extra"></div></section></article><article id="Snap.filter.blur" class="Snap-filter-blur-section"><header><h4 id="Snap.filter.blur" class="dr-method">Snap.filter.blur(x, [y])<a href="#Snap.filter.blur" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 102 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L102">&#x27ad;</a></h4></header>
<section><div class="extra" id="Snap.filter.blur-extra"></div><div class="dr-method"><p>Returns an SVG markup string for the blur filter
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">amount of horizontal blur, in pixels</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">y</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">amount of vertical blur, in pixels</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">filter representation</span></p>
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var f = paper.filter(Snap.filter.blur(5, 10)),
c = paper.circle(10, 10, 10).attr({
filter: f
});
</code></pre></section>
</div></section></article><article id="Snap.filter.brightness" class="Snap-filter-brightness-section"><header><h4 id="Snap.filter.brightness" class="dr-method">Snap.filter.brightness(amount)<a href="#Snap.filter.brightness" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 281 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L281">&#x27ad;</a></h4></header>
<section><div class="extra" id="Snap.filter.brightness-extra"></div><div class="dr-method"><p>Returns an SVG markup string for the brightness filter
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">amount</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">amount of filter (<code>0..1</code>)</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">filter representation</span></p>
</div></section></article><article id="Snap.filter.contrast" class="Snap-filter-contrast-section"><header><h4 id="Snap.filter.contrast" class="dr-method">Snap.filter.contrast(amount)<a href="#Snap.filter.contrast" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 301 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L301">&#x27ad;</a></h4></header>
<section><div class="extra" id="Snap.filter.contrast-extra"></div><div class="dr-method"><p>Returns an SVG markup string for the contrast filter
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">amount</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">amount of filter (<code>0..1</code>)</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">filter representation</span></p>
</div></section></article><article id="Snap.filter.grayscale" class="Snap-filter-grayscale-section"><header><h4 id="Snap.filter.grayscale" class="dr-method">Snap.filter.grayscale(amount)<a href="#Snap.filter.grayscale" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 167 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L167">&#x27ad;</a></h4></header>
<section><div class="extra" id="Snap.filter.grayscale-extra"></div><div class="dr-method"><p>Returns an SVG markup string for the grayscale filter
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">amount</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">amount of filter (<code>0..1</code>)</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">filter representation</span></p>
</div></section></article><article id="Snap.filter.hueRotate" class="Snap-filter-hueRotate-section"><header><h4 id="Snap.filter.hueRotate" class="dr-method">Snap.filter.hueRotate(angle)<a href="#Snap.filter.hueRotate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 242 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L242">&#x27ad;</a></h4></header>
<section><div class="extra" id="Snap.filter.hueRotate-extra"></div><div class="dr-method"><p>Returns an SVG markup string for the hue-rotate filter
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">angle</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">angle of rotation</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">filter representation</span></p>
</div></section></article><article id="Snap.filter.invert" class="Snap-filter-invert-section"><header><h4 id="Snap.filter.invert" class="dr-method">Snap.filter.invert(amount)<a href="#Snap.filter.invert" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 260 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L260">&#x27ad;</a></h4></header>
<section><div class="extra" id="Snap.filter.invert-extra"></div><div class="dr-method"><p>Returns an SVG markup string for the invert filter
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">amount</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">amount of filter (<code>0..1</code>)</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">filter representation</span></p>
</div></section></article><article id="Snap.filter.saturate" class="Snap-filter-saturate-section"><header><h4 id="Snap.filter.saturate" class="dr-method">Snap.filter.saturate(amount)<a href="#Snap.filter.saturate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 222 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L222">&#x27ad;</a></h4></header>
<section><div class="extra" id="Snap.filter.saturate-extra"></div><div class="dr-method"><p>Returns an SVG markup string for the saturate filter
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">amount</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">amount of filter (<code>0..1</code>)</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">filter representation</span></p>
</div></section></article><article id="Snap.filter.sepia" class="Snap-filter-sepia-section"><header><h4 id="Snap.filter.sepia" class="dr-method">Snap.filter.sepia(amount)<a href="#Snap.filter.sepia" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 194 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L194">&#x27ad;</a></h4></header>
<section><div class="extra" id="Snap.filter.sepia-extra"></div><div class="dr-method"><p>Returns an SVG markup string for the sepia filter
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">amount</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">amount of filter (<code>0..1</code>)</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">filter representation</span></p>
</div></section></article><article id="Snap.filter.shadow" class="Snap-filter-shadow-section"><header><h4 id="Snap.filter.shadow" class="dr-method">Snap.filter.shadow(dx, dy, [blur], [color])<a href="#Snap.filter.shadow" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 131 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L131">&#x27ad;</a></h4></header>
<section><div class="extra" id="Snap.filter.shadow-extra"></div><div class="dr-method"><p>Returns an SVG markup string for the shadow filter
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">dx</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">horizontal shift of the shadow, in pixels</span></li>
<li class="topcoat-list__item"><span class="dr-param">dy</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">vertical shift of the shadow, in pixels</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">blur</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">amount of blur</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">color</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">color of the shadow</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">filter representation</span></p>
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var f = paper.filter(Snap.filter.shadow(0, 2, 3)),
c = paper.circle(10, 10, 10).attr({
filter: f
});
</code></pre></section>
</div></section></article><article id="Snap.format" class="Snap-format-section"><header><h3 id="Snap.format" class="dr-method">Snap.format(token, json)<a href="#Snap.format" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 174 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L174">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.format-extra"></div><div class="dr-method"><p>Replaces construction of type <code>{&lt;name&gt;}</code> to the corresponding argument
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">token</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">string to format</span></li>
<li class="topcoat-list__item"><span class="dr-param">json</span>
<span class="dr-type"><em class="dr-type-object">object</em></span>
<span class="dr-description">object which properties are used as a replacement</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">formatted string</span></p>
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">// 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
}
}));
</code></pre></section>
</div></section></article><article id="Snap.fragment" class="Snap-fragment-section"><header><h3 id="Snap.fragment" class="dr-method">Snap.fragment(varargs)<a href="#Snap.fragment" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2349 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2349">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.fragment-extra"></div><div class="dr-method"><p>Creates a DOM fragment from a given list of elements or strings
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">varargs</span>
<span class="dr-type"><em class="dr-type-…">…</em></span>
<span class="dr-description">SVG string</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Fragment">Fragment</em> <span class="dr-description">the <a href="#Fragment" class="dr-link">Fragment</a></span></p>
</div></section></article><article id="Snap.getRGB" class="Snap-getRGB-section"><header><h3 id="Snap.getRGB" class="dr-method">Snap.getRGB(color)<a href="#Snap.getRGB" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 655 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L655">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.getRGB-extra"></div><div class="dr-method"><p>Parses color string as RGB object
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">color</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">color string in one of the following formats:</span></li>
</ol></div>
<ul>
<li>Color name (<code>red</code>, <code>green</code>, <code>cornflowerblue</code>, etc)</li>
<li>#••• — shortened HTML color: (<code>#000</code>, <code>#fc0</code>, etc.)</li>
<li>#•••••• — full length HTML color: (<code>#000000</code>, <code>#bd2300</code>)</li>
<li>rgb(•••, •••, •••) — red, green and blue channels values: (<code>rgb(200,&nbsp;100,&nbsp;0)</code>)</li>
<li>rgba(•••, •••, •••, •••) — also with opacity</li>
<li>rgb(•••%, •••%, •••%) — same as above, but in %: (<code>rgb(100%,&nbsp;175%,&nbsp;0%)</code>)</li>
<li>rgba(•••%, •••%, •••%, •••%) — also with opacity</li>
<li>hsb(•••, •••, •••) — hue, saturation and brightness values: (<code>hsb(0.5,&nbsp;0.25,&nbsp;1)</code>)</li>
<li>hsba(•••, •••, •••, •••) — also with opacity</li>
<li>hsb(•••%, •••%, •••%) — same as above, but in %</li>
<li>hsba(•••%, •••%, •••%, •••%) — also with opacity</li>
<li>hsl(•••, •••, •••) — hue, saturation and luminosity values: (<code>hsb(0.5,&nbsp;0.25,&nbsp;0.5)</code>)</li>
<li>hsla(•••, •••, •••, •••) — also with opacity</li>
<li>hsl(•••%, •••%, •••%) — same as above, but in %</li>
<li>hsla(•••%, •••%, •••%, •••%) — also with opacity</li>
</ul>
<p>Note that <code>%</code> can be used any time: <code>rgb(20%, 255, 50%)</code>.
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">RGB object in the following format:</span></p>
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">r</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">red,</span>
<li><span class="dr-json-key">g</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">green,</span>
<li><span class="dr-json-key">b</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">blue,</span>
<li><span class="dr-json-key">hex</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">color in HTML/CSS format: #••••••,</span>
<li><span class="dr-json-key">error</span><span class="dr-type"><em class="dr-type-boolean">boolean</em></span><span class="dr-json-description">true if string can&#39;t be parsed</span>
</ol></li><li>}</li></ol>
</div></section></article><article id="Snap.hsb" class="Snap-hsb-section"><header><h3 id="Snap.hsb" class="dr-method">Snap.hsb(h, s, b)<a href="#Snap.hsb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 744 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L744">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.hsb-extra"></div><div class="dr-method"><p>Converts HSB values to a hex representation of the color
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">h</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">hue</span></li>
<li class="topcoat-list__item"><span class="dr-param">s</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">saturation</span></li>
<li class="topcoat-list__item"><span class="dr-param">b</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">value or brightness</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">hex representation of the color</span></p>
</div></section></article><article id="Snap.hsb2rgb" class="Snap-hsb2rgb-section"><header><h3 id="Snap.hsb2rgb" class="dr-method">Snap.hsb2rgb(h, s, v)<a href="#Snap.hsb2rgb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 909 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L909">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.hsb2rgb-extra"></div><div class="dr-method"><p>Converts HSB values to an RGB object
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">h</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">hue</span></li>
<li class="topcoat-list__item"><span class="dr-param">s</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">saturation</span></li>
<li class="topcoat-list__item"><span class="dr-param">v</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">value or brightness</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">RGB object in the following format:</span></p>
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">r</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">red,</span>
<li><span class="dr-json-key">g</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">green,</span>
<li><span class="dr-json-key">b</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">blue,</span>
<li><span class="dr-json-key">hex</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">color in HTML/CSS format: #••••••</span>
</ol></li><li>}</li></ol>
</div></section></article><article id="Snap.hsl" class="Snap-hsl-section"><header><h3 id="Snap.hsl" class="dr-method">Snap.hsl(h, s, l)<a href="#Snap.hsl" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 757 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L757">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.hsl-extra"></div><div class="dr-method"><p>Converts HSL values to a hex representation of the color
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">h</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">hue</span></li>
<li class="topcoat-list__item"><span class="dr-param">s</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">saturation</span></li>
<li class="topcoat-list__item"><span class="dr-param">l</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">luminosity</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">hex representation of the color</span></p>
</div></section></article><article id="Snap.hsl2rgb" class="Snap-hsl2rgb-section"><header><h3 id="Snap.hsl2rgb" class="dr-method">Snap.hsl2rgb(h, s, l)<a href="#Snap.hsl2rgb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 945 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L945">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.hsl2rgb-extra"></div><div class="dr-method"><p>Converts HSL values to an RGB object
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">h</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">hue</span></li>
<li class="topcoat-list__item"><span class="dr-param">s</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">saturation</span></li>
<li class="topcoat-list__item"><span class="dr-param">l</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">luminosity</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">RGB object in the following format:</span></p>
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">r</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">red,</span>
<li><span class="dr-json-key">g</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">green,</span>
<li><span class="dr-json-key">b</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">blue,</span>
<li><span class="dr-json-key">hex</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">color in HTML/CSS format: #••••••</span>
</ol></li><li>}</li></ol>
</div></section></article><article id="Snap.is" class="Snap-is-section"><header><h3 id="Snap.is" class="dr-method">Snap.is(o, type)<a href="#Snap.is" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 317 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L317">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.is-extra"></div><div class="dr-method"><p>Handy replacement for the <code>typeof</code> operator
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">o</span>
<span class="dr-type"><em class="dr-type-…">…</em></span>
<span class="dr-description">any object or primitive</span></li>
<li class="topcoat-list__item"><span class="dr-param">type</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">name of the type, e.g., <code>string</code>, <code>function</code>, <code>number</code>, etc.</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-boolean">boolean</em> <span class="dr-description"><code>true</code> if given value is of given type</span></p>
</div></section></article><article id="Snap.load" class="Snap-load-section"><header><h3 id="Snap.load" class="dr-method">Snap.load(url, callback, [scope])<a href="#Snap.load" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 3020 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L3020">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.load-extra"></div><div class="dr-method"><p>Loads external SVG file as a <a href="#Fragment" class="dr-link">Fragment</a> (see <a href="#Snap.ajax" class="dr-link">Snap.ajax</a> for more advanced AJAX)
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">url</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">URL</span></li>
<li class="topcoat-list__item"><span class="dr-param">callback</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">callback</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">scope</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-object">object</em></span>
<span class="dr-description">scope of callback</span></li>
</ol></div>
</div></section></article><article id="Snap.parse" class="Snap-parse-section"><header><h3 id="Snap.parse" class="dr-method">Snap.parse(svg)<a href="#Snap.parse" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2300 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2300">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.parse-extra"></div><div class="dr-method"><p>Parses SVG fragment and converts it into a <a href="#Fragment" class="dr-link">Fragment</a>
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">svg</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">SVG string</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Fragment">Fragment</em> <span class="dr-description">the <a href="#Fragment" class="dr-link">Fragment</a></span></p>
</div></section></article><article id="Snap.parsePathString" class="Snap-parsePathString-section"><header><h3 id="Snap.parsePathString" class="dr-method">Snap.parsePathString(pathString)<a href="#Snap.parsePathString" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1051 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1051">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.parsePathString-extra"></div><div class="dr-method"><p>Utility method
Parses given path string into an array of arrays of path segments
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">pathString</span>
<span class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-array">array</em></span>
<span class="dr-description">path string or array of segments (in the last case it is returned straight away)</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of segments</span></p>
</div></section></article><article id="Snap.parseTransformString" class="Snap-parseTransformString-section"><header><h3 id="Snap.parseTransformString" class="dr-method">Snap.parseTransformString(TString)<a href="#Snap.parseTransformString" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1105 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1105">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.parseTransformString-extra"></div><div class="dr-method"><p>Utility method
Parses given transform string into an array of transformations
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">TString</span>
<span class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-array">array</em></span>
<span class="dr-description">transform string or array of transformations (in the last case it is returned straight away)</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of transformations</span></p>
</div></section></article><article id="Snap.path" class="Snap-path-section"><header><h3 id="Snap.path" class="undefined">Snap.path<a href="#Snap.path" title="Link to this section" class="dr-hash">&#x2693;</a></h3></header>
<section><div class="extra" id="Snap.path-extra"></div></section></article><article id="Snap.path.bezierBBox" class="Snap-path-bezierBBox-section"><header><h4 id="Snap.path.bezierBBox" class="dr-method">Snap.path.bezierBBox(…)<a href="#Snap.path.bezierBBox" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1212 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1212">&#x27ad;</a></h4></header>
<section><div class="extra" id="Snap.path.bezierBBox-extra"></div><div class="dr-method"><p>Utility method
Returns the bounding box of a given cubic beziér curve
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">p1x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">x of the first point of the curve</span></li>
<li class="topcoat-list__item"><span class="dr-param">p1y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">y of the first point of the curve</span></li>
<li class="topcoat-list__item"><span class="dr-param">c1x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">x of the first anchor of the curve</span></li>
<li class="topcoat-list__item"><span class="dr-param">c1y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">y of the first anchor of the curve</span></li>
<li class="topcoat-list__item"><span class="dr-param">c2x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">x of the second anchor of the curve</span></li>
<li class="topcoat-list__item"><span class="dr-param">c2y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">y of the second anchor of the curve</span></li>
<li class="topcoat-list__item"><span class="dr-param">p2x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">x of the second point of the curve</span></li>
<li class="topcoat-list__item"><span class="dr-param">p2y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">y of the second point of the curve</span></li>
</ol></div>
<p>or
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">bez</span>
<span class="dr-type"><em class="dr-type-array">array</em></span>
<span class="dr-description">array of six points for beziér curve</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">bounding box</span></p>
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate of the left top point of the box,</span>
<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate of the left top point of the box,</span>
<li><span class="dr-json-key">x2:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate of the right bottom point of the box,</span>
<li><span class="dr-json-key">y2:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate of the right bottom point of the box,</span>
<li><span class="dr-json-key">width:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">width of the box,</span>
<li><span class="dr-json-key">height:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">height of the box</span>
</ol></li><li>}</li></ol>
</div></section></article><article id="Snap.path.findDotsAtSegment" class="Snap-path-findDotsAtSegment-section"><header><h4 id="Snap.path.findDotsAtSegment" class="dr-method">Snap.path.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t)<a href="#Snap.path.findDotsAtSegment" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1184 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1184">&#x27ad;</a></h4></header>
<section><div class="extra" id="Snap.path.findDotsAtSegment-extra"></div><div class="dr-method"><p>Utility method
Finds dot coordinates on the given cubic beziér curve at the given t
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">p1x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">x of the first point of the curve</span></li>
<li class="topcoat-list__item"><span class="dr-param">p1y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">y of the first point of the curve</span></li>
<li class="topcoat-list__item"><span class="dr-param">c1x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">x of the first anchor of the curve</span></li>
<li class="topcoat-list__item"><span class="dr-param">c1y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">y of the first anchor of the curve</span></li>
<li class="topcoat-list__item"><span class="dr-param">c2x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">x of the second anchor of the curve</span></li>
<li class="topcoat-list__item"><span class="dr-param">c2y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">y of the second anchor of the curve</span></li>
<li class="topcoat-list__item"><span class="dr-param">p2x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">x of the second point of the curve</span></li>
<li class="topcoat-list__item"><span class="dr-param">p2y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">y of the second point of the curve</span></li>
<li class="topcoat-list__item"><span class="dr-param">t</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">position on the curve (0..1)</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">point information in format:</span></p>
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate of the point,</span>
<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate of the point,</span>
<li> m: {<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate of the left anchor,</span>
<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate of the left anchor</span>
</ol></li><li> },</li><li> n: {<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate of the right anchor,</span>
<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate of the right anchor</span>
</ol></li><li> },</li><li> start: {<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate of the start of the curve,</span>
<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate of the start of the curve</span>
</ol></li><li> },</li><li> end: {<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate of the end of the curve,</span>
<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate of the end of the curve</span>
</ol></li><li> },</li><li><span class="dr-json-key">alpha:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">angle of the curve derivative at the point</span>
</ol></li><li>}</li></ol>
</div></section></article><article id="Snap.path.getBBox" class="Snap-path-getBBox-section"><header><h4 id="Snap.path.getBBox" class="dr-method">Snap.path.getBBox(path)<a href="#Snap.path.getBBox" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1296 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1296">&#x27ad;</a></h4></header>
<section><div class="extra" id="Snap.path.getBBox-extra"></div><div class="dr-method"><p>Utility method
Returns the bounding box of a given path
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">path</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">path string</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">bounding box</span></p>
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate of the left top point of the box,</span>
<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate of the left top point of the box,</span>
<li><span class="dr-json-key">x2:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate of the right bottom point of the box,</span>
<li><span class="dr-json-key">y2:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate of the right bottom point of the box,</span>
<li><span class="dr-json-key">width:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">width of the box,</span>
<li><span class="dr-json-key">height:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">height of the box</span>
</ol></li><li>}</li></ol>
</div></section></article><article id="Snap.path.getPointAtLength" class="Snap-path-getPointAtLength-section"><header><h4 id="Snap.path.getPointAtLength" class="dr-method">Snap.path.getPointAtLength(path, length)<a href="#Snap.path.getPointAtLength" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1078 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1078">&#x27ad;</a></h4></header>
<section><div class="extra" id="Snap.path.getPointAtLength-extra"></div><div class="dr-method"><p>Returns the coordinates of the point located at the given length along the given path
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">path</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">SVG path string</span></li>
<li class="topcoat-list__item"><span class="dr-param">length</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">length, in pixels, from the start of the path, excluding non-rendering jumps</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">representation of the point:</span></p>
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate,</span>
<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate,</span>
<li><span class="dr-json-key">alpha:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">angle of derivative</span>
</ol></li><li>}</li></ol>
</div></section></article><article id="Snap.path.getSubpath" class="Snap-path-getSubpath-section"><header><h4 id="Snap.path.getSubpath" class="dr-method">Snap.path.getSubpath(path, from, to)<a href="#Snap.path.getSubpath" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1091 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1091">&#x27ad;</a></h4></header>
<section><div class="extra" id="Snap.path.getSubpath-extra"></div><div class="dr-method"><p>Returns the subpath of a given path between given start and end lengths
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">path</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">SVG path string</span></li>
<li class="topcoat-list__item"><span class="dr-param">from</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">length, in pixels, from the start of the path to the start of the segment</span></li>
<li class="topcoat-list__item"><span class="dr-param">to</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">length, in pixels, from the start of the path to the end of the segment</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">path string definition for the segment</span></p>
</div></section></article><article id="Snap.path.getTotalLength" class="Snap-path-getTotalLength-section"><header><h4 id="Snap.path.getTotalLength" class="dr-method">Snap.path.getTotalLength(path)<a href="#Snap.path.getTotalLength" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1061 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1061">&#x27ad;</a></h4></header>
<section><div class="extra" id="Snap.path.getTotalLength-extra"></div><div class="dr-method"><p>Returns the length of the given path in pixels
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">path</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">SVG path string</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">length</span></p>
</div></section></article><article id="Snap.path.intersection" class="Snap-path-intersection-section"><header><h4 id="Snap.path.intersection" class="dr-method">Snap.path.intersection(path1, path2)<a href="#Snap.path.intersection" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1261 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1261">&#x27ad;</a></h4></header>
<section><div class="extra" id="Snap.path.intersection-extra"></div><div class="dr-method"><p>Utility method
Finds intersections of two paths
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">path1</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">path string</span></li>
<li class="topcoat-list__item"><span class="dr-param">path2</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">path string</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">dots of intersection</span></p>
<ol class="dr-json"><li>[<li> {<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate of the point,</span>
<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate of the point,</span>
<li><span class="dr-json-key">t1:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">t value for segment of path1,</span>
<li><span class="dr-json-key">t2:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">t value for segment of path2,</span>
<li><span class="dr-json-key">segment1:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">order number for segment of path1,</span>
<li><span class="dr-json-key">segment2:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">order number for segment of path2,</span>
<li><span class="dr-json-key">bez1:</span><span class="dr-type"><em class="dr-type-array">array</em></span><span class="dr-json-description">eight coordinates representing beziér curve for the segment of path1,</span>
<li><span class="dr-json-key">bez2:</span><span class="dr-type"><em class="dr-type-array">array</em></span><span class="dr-json-description">eight coordinates representing beziér curve for the segment of path2</span>
</ol></li><li> }</li><li>]</ol>
</div></section></article><article id="Snap.path.isBBoxIntersect" class="Snap-path-isBBoxIntersect-section"><header><h4 id="Snap.path.isBBoxIntersect" class="dr-method">Snap.path.isBBoxIntersect(bbox1, bbox2)<a href="#Snap.path.isBBoxIntersect" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1237 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1237">&#x27ad;</a></h4></header>
<section><div class="extra" id="Snap.path.isBBoxIntersect-extra"></div><div class="dr-method"><p>Utility method
Returns <code>true</code> if two bounding boxes intersect
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">bbox1</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">first bounding box</span></li>
<li class="topcoat-list__item"><span class="dr-param">bbox2</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">second bounding box</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-boolean">boolean</em> <span class="dr-description"><code>true</code> if bounding boxes intersect</span></p>
</div></section></article><article id="Snap.path.isPointInside" class="Snap-path-isPointInside-section"><header><h4 id="Snap.path.isPointInside" class="dr-method">Snap.path.isPointInside(path, x, y)<a href="#Snap.path.isPointInside" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1277 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1277">&#x27ad;</a></h4></header>
<section><div class="extra" id="Snap.path.isPointInside-extra"></div><div class="dr-method"><p>Utility method
Returns <code>true</code> if given point is inside a given closed path.
</p>
<p>Note: fill mode doesn’t affect the result of this method.
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">path</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">path string</span></li>
<li class="topcoat-list__item"><span class="dr-param">x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">x of the point</span></li>
<li class="topcoat-list__item"><span class="dr-param">y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">y of the point</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-boolean">boolean</em> <span class="dr-description"><code>true</code> if point is inside the path</span></p>
</div></section></article><article id="Snap.path.isPointInsideBBox" class="Snap-path-isPointInsideBBox-section"><header><h4 id="Snap.path.isPointInsideBBox" class="dr-method">Snap.path.isPointInsideBBox(bbox, x, y)<a href="#Snap.path.isPointInsideBBox" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1225 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1225">&#x27ad;</a></h4></header>
<section><div class="extra" id="Snap.path.isPointInsideBBox-extra"></div><div class="dr-method"><p>Utility method
Returns <code>true</code> if given point is inside bounding box
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">bbox</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">bounding box</span></li>
<li class="topcoat-list__item"><span class="dr-param">x</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">x coordinate of the point</span></li>
<li class="topcoat-list__item"><span class="dr-param">y</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">y coordinate of the point</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-boolean">boolean</em> <span class="dr-description"><code>true</code> if point is inside</span></p>
</div></section></article><article id="Snap.path.map" class="Snap-path-map-section"><header><h4 id="Snap.path.map" class="dr-method">Snap.path.map(path, matrix)<a href="#Snap.path.map" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1340 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1340">&#x27ad;</a></h4></header>
<section><div class="extra" id="Snap.path.map-extra"></div><div class="dr-method"><p>Transform the path string with the given matrix
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">path</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">path string</span></li>
<li class="topcoat-list__item"><span class="dr-param">matrix</span>
<span class="dr-type"><em class="dr-type-object">object</em></span>
<span class="dr-description">see <a href="#Matrix" class="dr-link">Matrix</a></span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">transformed path string</span></p>
</div></section></article><article id="Snap.path.toAbsolute" class="Snap-path-toAbsolute-section"><header><h4 id="Snap.path.toAbsolute" class="dr-method">Snap.path.toAbsolute(path)<a href="#Snap.path.toAbsolute" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1319 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1319">&#x27ad;</a></h4></header>
<section><div class="extra" id="Snap.path.toAbsolute-extra"></div><div class="dr-method"><p>Utility method
Converts path coordinates into absolute values
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">path</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">path string</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">path string</span></p>
</div></section></article><article id="Snap.path.toCubic" class="Snap-path-toCubic-section"><header><h4 id="Snap.path.toCubic" class="dr-method">Snap.path.toCubic(pathString)<a href="#Snap.path.toCubic" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1330 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1330">&#x27ad;</a></h4></header>
<section><div class="extra" id="Snap.path.toCubic-extra"></div><div class="dr-method"><p>Utility method
Converts path to a new path where all segments are cubic beziér curves
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">pathString</span>
<span class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-array">array</em></span>
<span class="dr-description">path string or array of segments</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of segments</span></p>
</div></section></article><article id="Snap.path.toRelative" class="Snap-path-toRelative-section"><header><h4 id="Snap.path.toRelative" class="dr-method">Snap.path.toRelative(path)<a href="#Snap.path.toRelative" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1308 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1308">&#x27ad;</a></h4></header>
<section><div class="extra" id="Snap.path.toRelative-extra"></div><div class="dr-method"><p>Utility method
Converts path coordinates into relative values
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">path</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">path string</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">path string</span></p>
</div></section></article><article id="Snap.rad" class="Snap-rad-section"><header><h3 id="Snap.rad" class="dr-method">Snap.rad(deg)<a href="#Snap.rad" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 282 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L282">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.rad-extra"></div><div class="dr-method"><p>Transform angle to radians
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">deg</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">angle in degrees</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">angle in radians</span></p>
</div></section></article><article id="Snap.rgb" class="Snap-rgb-section"><header><h3 id="Snap.rgb" class="dr-method">Snap.rgb(r, g, b)<a href="#Snap.rgb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 770 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L770">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.rgb-extra"></div><div class="dr-method"><p>Converts RGB values to a hex representation of the color
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">r</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">red</span></li>
<li class="topcoat-list__item"><span class="dr-param">g</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">green</span></li>
<li class="topcoat-list__item"><span class="dr-param">b</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">blue</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">hex representation of the color</span></p>
</div></section></article><article id="Snap.rgb2hsb" class="Snap-rgb2hsb-section"><header><h3 id="Snap.rgb2hsb" class="dr-method">Snap.rgb2hsb(r, g, b)<a href="#Snap.rgb2hsb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 984 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L984">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.rgb2hsb-extra"></div><div class="dr-method"><p>Converts RGB values to an HSB object
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">r</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">red</span></li>
<li class="topcoat-list__item"><span class="dr-param">g</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">green</span></li>
<li class="topcoat-list__item"><span class="dr-param">b</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">blue</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">HSB object in the following format:</span></p>
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">h</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">hue,</span>
<li><span class="dr-json-key">s</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">saturation,</span>
<li><span class="dr-json-key">b</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">brightness</span>
</ol></li><li>}</li></ol>
</div></section></article><article id="Snap.rgb2hsl" class="Snap-rgb2hsl-section"><header><h3 id="Snap.rgb2hsl" class="dr-method">Snap.rgb2hsl(r, g, b)<a href="#Snap.rgb2hsl" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1017 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1017">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.rgb2hsl-extra"></div><div class="dr-method"><p>Converts RGB values to an HSL object
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">r</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">red</span></li>
<li class="topcoat-list__item"><span class="dr-param">g</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">green</span></li>
<li class="topcoat-list__item"><span class="dr-param">b</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">blue</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">HSL object in the following format:</span></p>
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">h</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">hue,</span>
<li><span class="dr-json-key">s</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">saturation,</span>
<li><span class="dr-json-key">l</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">luminosity</span>
</ol></li><li>}</li></ol>
</div></section></article><article id="Snap.select" class="Snap-select-section"><header><h3 id="Snap.select" class="dr-method">Snap.select(query)<a href="#Snap.select" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1372 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1372">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.select-extra"></div><div class="dr-method"><p>Wraps a DOM element specified by CSS selector as <a href="#Element" class="dr-link">Element</a>
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">query</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">CSS selector of the element</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the current element</span></p>
</div></section></article><article id="Snap.selectAll" class="Snap-selectAll-section"><header><h3 id="Snap.selectAll" class="dr-method">Snap.selectAll(query)<a href="#Snap.selectAll" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1383 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1383">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.selectAll-extra"></div><div class="dr-method"><p>Wraps DOM elements specified by CSS selector as set or array of <a href="#Element" class="dr-link">Element</a>
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">query</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">CSS selector of the element</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the current element</span></p>
</div></section></article><article id="Snap.snapTo" class="Snap-snapTo-section"><header><h3 id="Snap.snapTo" class="dr-method">Snap.snapTo(values, value, [tolerance])<a href="#Snap.snapTo" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 328 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L328">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.snapTo-extra"></div><div class="dr-method"><p>Snaps given value to given grid
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">values</span>
<span class="dr-type"><em class="dr-type-array">array</em> <em class="dr-type-number">number</em></span>
<span class="dr-description">given array of values or step of the grid</span></li>
<li class="topcoat-list__item"><span class="dr-param">value</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">value to adjust</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">tolerance</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">maximum distance to the target value that would trigger the snap. Default is <code>10</code>.</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">adjusted value</span></p>
</div></section></article><article id="mina" class="mina-section"><header><h2 id="mina" class="dr-method">mina(a, A, b, B, get, set, [easing])<a href="#mina" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 157 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L157">&#x27ad;</a></h2></header>
<section><div class="extra" id="mina-extra"></div><div class="dr-method"><p>Generic animation of numbers
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">a</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">start <em>slave</em> number</span></li>
<li class="topcoat-list__item"><span class="dr-param">A</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">end <em>slave</em> number</span></li>
<li class="topcoat-list__item"><span class="dr-param">b</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">start <em>master</em> number (start time in gereal case)</span></li>
<li class="topcoat-list__item"><span class="dr-param">B</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">end <em>master</em> number (end time in gereal case)</span></li>
<li class="topcoat-list__item"><span class="dr-param">get</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">getter of <em>master</em> number (see <a href="#mina.time" class="dr-link">mina.time</a>)</span></li>
<li class="topcoat-list__item"><span class="dr-param">set</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">setter of <em>slave</em> number</span></li>
<li class="topcoat-list__item"><span class="dr-param optional">easing</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">easing function, default is <a href="#mina.linear" class="dr-link">mina.linear</a></span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">animation descriptor</span></p>
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">id</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">animation id,</span>
<li><span class="dr-json-key">start</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">start <em>slave</em> number,</span>
<li><span class="dr-json-key">end</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">end <em>slave</em> number,</span>
<li><span class="dr-json-key">b</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">start <em>master</em> number,</span>
<li><span class="dr-json-key">s</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">animation status (0..1),</span>
<li><span class="dr-json-key">dur</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">animation duration,</span>
<li><span class="dr-json-key">spd</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">animation speed,</span>
<li><span class="dr-json-key">get</span><span class="dr-type"><em class="dr-type-function">function</em></span><span class="dr-json-description">getter of <em>master</em> number (see <a href="#mina.time" class="dr-link">mina.time</a>),</span>
<li><span class="dr-json-key">set</span><span class="dr-type"><em class="dr-type-function">function</em></span><span class="dr-json-description">setter of <em>slave</em> number,</span>
<li><span class="dr-json-key">easing</span><span class="dr-type"><em class="dr-type-function">function</em></span><span class="dr-json-description">easing function, default is <a href="#mina.linear" class="dr-link">mina.linear</a>,</span>
<li><span class="dr-json-key">status</span><span class="dr-type"><em class="dr-type-function">function</em></span><span class="dr-json-description">status getter/setter,</span>
<li><span class="dr-json-key">speed</span><span class="dr-type"><em class="dr-type-function">function</em></span><span class="dr-json-description">speed getter/setter,</span>
<li><span class="dr-json-key">duration</span><span class="dr-type"><em class="dr-type-function">function</em></span><span class="dr-json-description">duration getter/setter,</span>
<li><span class="dr-json-key">stop</span><span class="dr-type"><em class="dr-type-function">function</em></span><span class="dr-json-description">animation stopper</span>
</ol></li><li>}</li></ol>
</div></section></article><article id="mina.backin" class="mina-backin-section"><header><h3 id="mina.backin" class="dr-method">mina.backin(n)<a href="#mina.backin" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 274 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L274">&#x27ad;</a></h3></header>
<section><div class="extra" id="mina.backin-extra"></div><div class="dr-method"><p>Backin easing
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">n</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">input 0..1</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">output 0..1</span></p>
</div></section></article><article id="mina.backout" class="mina-backout-section"><header><h3 id="mina.backout" class="dr-method">mina.backout(n)<a href="#mina.backout" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 289 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L289">&#x27ad;</a></h3></header>
<section><div class="extra" id="mina.backout-extra"></div><div class="dr-method"><p>Backout easing
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">n</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">input 0..1</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">output 0..1</span></p>
</div></section></article><article id="mina.bounce" class="mina-bounce-section"><header><h3 id="mina.bounce" class="dr-method">mina.bounce(n)<a href="#mina.bounce" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 320 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L320">&#x27ad;</a></h3></header>
<section><div class="extra" id="mina.bounce-extra"></div><div class="dr-method"><p>Bounce easing
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">n</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">input 0..1</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">output 0..1</span></p>
</div></section></article><article id="mina.easein" class="mina-easein-section"><header><h3 id="mina.easein" class="dr-method">mina.easein(n)<a href="#mina.easein" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 239 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L239">&#x27ad;</a></h3></header>
<section><div class="extra" id="mina.easein-extra"></div><div class="dr-method"><p>Easein easing
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">n</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">input 0..1</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">output 0..1</span></p>
</div></section></article><article id="mina.easeinout" class="mina-easeinout-section"><header><h3 id="mina.easeinout" class="dr-method">mina.easeinout(n)<a href="#mina.easeinout" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 250 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L250">&#x27ad;</a></h3></header>
<section><div class="extra" id="mina.easeinout-extra"></div><div class="dr-method"><p>Easeinout easing
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">n</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">input 0..1</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">output 0..1</span></p>
</div></section></article><article id="mina.easeout" class="mina-easeout-section"><header><h3 id="mina.easeout" class="dr-method">mina.easeout(n)<a href="#mina.easeout" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 228 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L228">&#x27ad;</a></h3></header>
<section><div class="extra" id="mina.easeout-extra"></div><div class="dr-method"><p>Easeout easing
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">n</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">input 0..1</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">output 0..1</span></p>
</div></section></article><article id="mina.elastic" class="mina-elastic-section"><header><h3 id="mina.elastic" class="dr-method">mina.elastic(n)<a href="#mina.elastic" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 305 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L305">&#x27ad;</a></h3></header>
<section><div class="extra" id="mina.elastic-extra"></div><div class="dr-method"><p>Elastic easing
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">n</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">input 0..1</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">output 0..1</span></p>
</div></section></article><article id="mina.getById" class="mina-getById-section"><header><h3 id="mina.getById" class="dr-method">mina.getById(id)<a href="#mina.getById" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 205 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L205">&#x27ad;</a></h3></header>
<section><div class="extra" id="mina.getById-extra"></div><div class="dr-method"><p>Returns an animation by its id
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">id</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">animation&#39;s id</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">See <a href="#mina" class="dr-link">mina</a></span></p>
</div></section></article><article id="mina.linear" class="mina-linear-section"><header><h3 id="mina.linear" class="dr-method">mina.linear(n)<a href="#mina.linear" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 217 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L217">&#x27ad;</a></h3></header>
<section><div class="extra" id="mina.linear-extra"></div><div class="dr-method"><p>Default linear easing
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">n</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">input 0..1</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">output 0..1</span></p>
</div></section></article><article id="mina.time" class="mina-time-section"><header><h3 id="mina.time" class="dr-method">mina.time()<a href="#mina.time" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 196 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L196">&#x27ad;</a></h3></header>
<section><div class="extra" id="mina.time-extra"></div><div class="dr-method"><p>Returns the current time. Equivalent to:
</p>
<section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">function () {
return (new Date).getTime();
}
</code></pre></section>
</div></section></article></div>
<footer></footer>
</div>
</div>
<script src="//use.edgefonts.net/source-sans-pro:n3,n4,n6;source-code-pro:n3.js"></script>
<script src="js/prism.js"></script>
<script src="snap.svg-min.js"></script>
<script src="reference.js"></script>
<script>!function(e){if(e){for(var t=function(e,t){var n=t.toUpperCase().split(""),r=n.shift(),a=RegExp("^["+r.toLowerCase()+r+"][a-z]*"+n.join("[a-z]*")+"[a-z]*$")
return!!(e+"").match(a)},n=function(e,n){e+="",n+=""
var r,a=0
if(e==n)return 1
if(!e||!n)return 0
if(t(e,n))return.9
a=0,r=e.toLowerCase()
for(var i,o=0,l=n.length;l>o;o++)i=r.indexOf(n.charAt(o)),~i&&(r=r.substring(i+1),a+=1/(i+1))
return a=Math.max(a/l-Math.abs(e.length-l)/e.length/2,0)},r=e.getElementsByTagName("span"),a=[],i=/[^\.\(]*(?=(\(\))?$)/,o=0,l=r.length;l>o;o++)a[o]={li:r[o].parentNode.parentNode,text:r[o].innerHTML.match(i)[0]}
var h=document.getElementById("dr-filter"),f=function(e,t){return t.weight-e.weight}
h.onclick=h.onchange=h.onkeydown=h.onkeyup=function(){var t=h.value,r=[]
if(t.length>1){for(var i=0,o=a.length;o>i;i++)r[i]={li:a[i].li,weight:n(a[i].text,t)}
r.sort(f)}else r=a
for(i=0,o=r.length;o>i;i++)e.appendChild(r[i].li)}}}(document.getElementById("dr-toc"))</script>
</body></html>
Reference in New Issue View Git Blame Copy Permalink