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

2011 lines
232 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>Savage 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.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="#Savage" class="dr-method"><span>Savage()</span></a></li><li class="dr-lvl1"><a href="#Savage.Matrix" class="dr-method"><span>Savage.Matrix()</span></a></li><li class="dr-lvl1"><a href="#Savage.ajax" class="dr-method"><span>Savage.ajax()</span></a></li><li class="dr-lvl1"><a href="#Savage.animate" class="dr-method"><span>Savage.animate()</span></a></li><li class="dr-lvl1"><a href="#Savage.animation" class="dr-method"><span>Savage.animation()</span></a></li><li class="dr-lvl1"><a href="#Savage.color" class="dr-method"><span>Savage.color()</span></a></li><li class="dr-lvl1"><a href="#Savage.deg" class="dr-method"><span>Savage.deg()</span></a></li><li class="dr-lvl1"><a href="#Savage.filter" class="{clas}"><span>Savage.filter</span></a></li><li class="dr-lvl2"><a href="#Savage.filter.blur" class="dr-method"><span>Savage.filter.blur()</span></a></li><li class="dr-lvl2"><a href="#Savage.filter.brightness" class="dr-method"><span>Savage.filter.brightness()</span></a></li><li class="dr-lvl2"><a href="#Savage.filter.contrast" class="dr-method"><span>Savage.filter.contrast()</span></a></li><li class="dr-lvl2"><a href="#Savage.filter.grayscale" class="dr-method"><span>Savage.filter.grayscale()</span></a></li><li class="dr-lvl2"><a href="#Savage.filter.hueRotate" class="dr-method"><span>Savage.filter.hueRotate()</span></a></li><li class="dr-lvl2"><a href="#Savage.filter.invert" class="dr-method"><span>Savage.filter.invert()</span></a></li><li class="dr-lvl2"><a href="#Savage.filter.saturate" class="dr-method"><span>Savage.filter.saturate()</span></a></li><li class="dr-lvl2"><a href="#Savage.filter.sepia" class="dr-method"><span>Savage.filter.sepia()</span></a></li><li class="dr-lvl2"><a href="#Savage.filter.shadow" class="dr-method"><span>Savage.filter.shadow()</span></a></li><li class="dr-lvl1"><a href="#Savage.format" class="dr-method"><span>Savage.format()</span></a></li><li class="dr-lvl1"><a href="#Savage.fragment" class="dr-method"><span>Savage.fragment()</span></a></li><li class="dr-lvl1"><a href="#Savage.getRGB" class="dr-method"><span>Savage.getRGB()</span></a></li><li class="dr-lvl1"><a href="#Savage.hsb" class="dr-method"><span>Savage.hsb()</span></a></li><li class="dr-lvl1"><a href="#Savage.hsb2rgb" class="dr-method"><span>Savage.hsb2rgb()</span></a></li><li class="dr-lvl1"><a href="#Savage.hsl" class="dr-method"><span>Savage.hsl()</span></a></li><li class="dr-lvl1"><a href="#Savage.hsl2rgb" class="dr-method"><span>Savage.hsl2rgb()</span></a></li><li class="dr-lvl1"><a href="#Savage.is" class="dr-method"><span>Savage.is()</span></a></li><li class="dr-lvl1"><a href="#Savage.load" class="dr-method"><span>Savage.load()</span></a></li><li class="dr-lvl1"><a href="#Savage.parse" class="dr-method"><span>Savage.parse()</span></a></li><li class="dr-lvl1"><a href="#Savage.parsePathString" class="dr-method"><span>Savage.parsePathString()</span></a></li><li class="dr-lvl1"><a href="#Savage.parseTransformString" class="dr-method"><span>Savage.parseTransformString()</span></a></li><li class="dr-lvl1"><a href="#Savage.path" class="{clas}"><span>Savage.path</span></a></li><li class="dr-lvl2"><a href="#Savage.path.bezierBBox" class="dr-method"><span>Savage.path.bezierBBox()</span></a></li><li class="dr-lvl2"><a href="#Savage.path.findDotsAtSegment" class="dr-method"><span>Savage.path.findDotsAtSegment()</span></a></li><li class="dr-lvl2"><a href="#Savage.path.getBBox" class="dr-method"><span>Savage.path.getBBox()</span></a></li><li class="dr-lvl2"><a href="#Savage.path.getPointAtLength" class="dr-method"><span>Savage.path.getPointAtLength()</span></a></li><li class="dr-lvl2"><a href="#Savage.path.getSubpath" class="dr-method"><span>Savage.path.getSubpath()</span></a></li><li class="dr-lvl2"><a href="#Savage.path.getTotalLength" class="dr-method"><span>Savage.path.getTotalLength()</span></a></li><li class="dr-lvl2"><a href="#Savage.path.intersection" class="dr-method"><span>Savage.path.intersection()</span></a></li><li class="dr-lvl2"><a href="#Savage.path.isBBoxIntersect" class="dr-method"><span>Savage.path.isBBoxIntersect()</span></a></li><li class="dr-lvl2"><a href="#Savage.path.isPointInside" class="dr-method"><span>Savage.path.isPointInside()</span></a></li><li class="dr-lvl2"><a href="#Savage.path.isPointInsideBBox" class="dr-method"><span>Savage.path.isPointInsideBBox()</span></a></li><li class="dr-lvl2"><a href="#Savage.path.map" class="dr-method"><span>Savage.path.map()</span></a></li><li class="dr-lvl2"><a href="#Savage.path.toAbsolute" class="dr-method"><span>Savage.path.toAbsolute()</span></a></li><li class="dr-lvl2"><a href="#Savage.path.toCubic" class="dr-method"><span>Savage.path.toCubic()</span></a></li><li class="dr-lvl2"><a href="#Savage.path.toRelative" class="dr-method"><span>Savage.path.toRelative()</span></a></li><li class="dr-lvl1"><a href="#Savage.rad" class="dr-method"><span>Savage.rad()</span></a></li><li class="dr-lvl1"><a href="#Savage.rgb" class="dr-method"><span>Savage.rgb()</span></a></li><li class="dr-lvl1"><a href="#Savage.rgb2hsb" class="dr-method"><span>Savage.rgb2hsb()</span></a></li><li class="dr-lvl1"><a href="#Savage.rgb2hsl" class="dr-method"><span>Savage.rgb2hsl()</span></a></li><li class="dr-lvl1"><a href="#Savage.select" class="dr-method"><span>Savage.select()</span></a></li><li class="dr-lvl1"><a href="#Savage.selectAll" class="dr-method"><span>Savage.selectAll()</span></a></li><li class="dr-lvl1"><a href="#Savage.snapTo" class="dr-method"><span>Savage.snapTo()</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="#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>Savage</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 1566 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1566">&#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 1619 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1619">&#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">parent</span></p>
</div></section></article><article id="Element.animate" class="Element-animate-section"><header><h3 id="Element.animate" class="dr-method">Element.animate(attrs, ms, [easing], [callback])<a href="#Element.animate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2035 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2035">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.animate-extra"></div><div class="dr-method"><p>Animate 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">ms</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">duration</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">&#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 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 1560 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1560">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.append-extra"></div><div class="dr-method"><p>Appends 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">parent</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 1707 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1707">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.asPX-extra"></div><div class="dr-method"><p>Return 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 1411 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1411">&#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">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"></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 1603 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1603">&#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">parent</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 event handler for click for 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 1749 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1749">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.clone-extra"></div><div class="dr-method"><p>Creates 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 2106 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2106">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.data-extra"></div><div class="dr-method"><p>Adds or retrieves given value asociated with given key.
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 event handler for double click for 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 454 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L454">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.drag-extra"></div><div class="dr-method"><p>Adds event handlers for drag 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">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 will be 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 will be dragged over another element
<code>drag.over.&lt;id&gt;</code> will be fired as well.
</p>
<p>Start event and start handler will be 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 will be 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 will be 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 drag 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">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 will be 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 will be dragged over another element
<code>drag.over.&lt;id&gt;</code> will be fired as well.
</p>
<p>Start event and start handler will be 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 will be 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 will be 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 1458 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1458">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.getBBox-extra"></div><div class="dr-method"><p>Returns 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 the circle that will enclose 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 biggest 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 right side,</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 left side</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 1118 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1118">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.getPointAtLength-extra"></div><div class="dr-method"><p>Return coordinates of the point located at the given length on the given path. Only works for element of “path” type.
</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">&#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">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 1132 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1132">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.getSubpath-extra"></div><div class="dr-method"><p>Return subpath of a given element from given length to given length. Only works for element of “path” type.
</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">position of 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">position of 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">pathstring 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 1098 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1098">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.getTotalLength-extra"></div><div class="dr-method"><p>Returns length of the path in pixels. Only works for element of “path” type.
</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 event handlers for hover for 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 1957 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1957">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.inAnim-extra"></div><div class="dr-method"><p>Returns an array of animations element currently in
</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 2154 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2154">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.innerSVG-extra"></div><div class="dr-method"><p>Returns SVG code of the element. Equivalent to <code>innerHTML</code> in HTML context.
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">SVG code of 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 1649 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1649">&#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">parent</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 1634 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1634">&#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">parent</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 1882 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1882">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.marker-extra"></div><div class="dr-method"><p>Creates <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"><code>&lt;marker&gt;</code> element</span></p>
<p>You can use pattern later on as an argument for <code>marker-start</code> or <code>marker-end</code> attributes.
</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 event handler for mousedown for 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 event handler for mousemove for 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 event handler for mouseout for 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 event handler for mouseover for 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 event handler for mouseup for 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 1548 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1548">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.parent-extra"></div><div class="dr-method"><p>Returns parent of the element
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">parent</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 1843 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1843">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.pattern-extra"></div><div class="dr-method"><p>Creates <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"><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 1588 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1588">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.prepend-extra"></div><div class="dr-method"><p>Prepends 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></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">parent</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 1662 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1662">&#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">removed 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 2131 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2131">&#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 1677 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1677">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.select-extra"></div><div class="dr-method"><p>Applies CSS selector with the element as a parent and returns the result as an <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</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 1689 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1689">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.selectAll-extra"></div><div class="dr-method"><p>Applies CSS selector with the element as a parent and returns the result as a set or array of 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">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 2016 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2016">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.stop-extra"></div><div class="dr-method"><p>Stops all the animations of 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 element</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 2822 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2822">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.toString-extra"></div><div class="dr-method"><p>Returns SVG code of the element. Equivalent to <code>outerHTML</code> in HTML context.
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">SVG code of the element.</span></p>
</div><div class="dr-method"><p>Returns SVG code of 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 of 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 event handler for touchcancel for 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 event handler for touchend for 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 event handler for touchmove for 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 event handler for touchstart for 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 1506 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1506">&#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 Savage 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"></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 event handler for click for 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 event handler for double click for 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 463 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L463">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.undrag-extra"></div><div class="dr-method"><p>Removes all drag event handlers from 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 event handlers for hover for 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 event handler for mousedown for 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 event handler for mousemove for 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 event handler for mouseout for 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 event handler for mouseover for 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 event handler for mouseup for 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 event handler for touchcancel for 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 event handler for touchend for 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 event handler for touchmove for 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 event handler for touchstart for 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 1721 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1721">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.use-extra"></div><div class="dr-method"><p>Creates <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"><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 2223 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2223">&#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 2230 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2230">&#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, b, c, d, e, f, matrix)<a href="#Matrix.add" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 361 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L361">&#x27ad;</a></h3></header>
<section><div class="extra" id="Matrix.add-extra"></div><div class="dr-method"><p>Adds 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>
<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 407 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L407">&#x27ad;</a></h3></header>
<section><div class="extra" id="Matrix.clone-extra"></div><div class="dr-method"><p>Returns 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 395 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L395">&#x27ad;</a></h3></header>
<section><div class="extra" id="Matrix.invert-extra"></div><div class="dr-method"><p>Returns 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 447 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L447">&#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">&#160;</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">&#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>
</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 431 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L431">&#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">&#160;</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">&#160;</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">&#160;</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">&#160;</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 511 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L511">&#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 553 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L553">&#x27ad;</a></h3></header>
<section><div class="extra" id="Matrix.toTransformString-extra"></div><div class="dr-method"><p>Return 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 418 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L418">&#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">&#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>
</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 465 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L465">&#x27ad;</a></h3></header>
<section><div class="extra" id="Matrix.x-extra"></div><div class="dr-method"><p>Return 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 477 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L477">&#x27ad;</a></h3></header>
<section><div class="extra" id="Matrix.y-extra"></div><div class="dr-method"><p>Return 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 2392 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2392">&#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">Element object with type “circle”</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 2332 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2332">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.el-extra"></div><div class="dr-method"><p>Creates 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 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 2480 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2480">&#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">Element object with type “ellipse”</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 36 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L36">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.filter-extra"></div><div class="dr-method"><p>Creates filter 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 page inside 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 2554 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2554">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.g-extra"></div><div class="dr-method"><p>Makes 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</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">Element object with type “g”</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 will be 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 2714 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2714">&#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>Gradient descriptor consists of <code>&lt;type&gt;(&lt;coords&gt;)&lt;colors&gt;</code>. Type
could be linear or radial, which presented as letter “L” or “R”. Any
type could be absolute or relative, absolute gradient take it coords
relative to the SVG surface, while relative takes them relative to
the bounding box of the element it applied to. For absolute
coordinates you specify type as an upper case letter (“L” or “R”).
For relative use low case letter (“l” or “r”). Coordinates specify
vector of gradient for linear as x1, y1, x2, y2. For radial as cx,
cy, r and optional fx, fy. Colors are list of dash separated colors.
Optionally color could have offset after colon.
</p>
<h3>Example</h3><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, 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, 100, 100)#000-#f00:25%-#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("r(0.5, 0.5, 0.5)#000-#fff");
</code></pre></section>
<p>Radial gradient, relative from the center of the element with radius
0.5 of the width, from black to white.
</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">Element object with type “gradient”</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 2560 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2560">&#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 2437 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2437">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.image-extra"></div><div class="dr-method"><p>Embeds an image into 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 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">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">Raphaël element object with type “image”</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><div class="dr-method"><p>Embeds an image into 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 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">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">Element object with type “image”</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 2616 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2616">&#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">Element object with type “line”</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 2524 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2524">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.path-extra"></div><div class="dr-method"><p>Creates a path element by given path data 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 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 numercal form. Example:
</p>
<section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">"M10,20L30,40"
</code></pre></section>
<p>Here we can see two commands: “M”, with arguments <code>(10, 20)</code> and “L” with arguments <code>(30, 40)</code>. Upper case letter mean command is absolute, lower case—relative.
</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>“Catmull-Rom curveto” is a not standard SVG command and added to make life easier.</li>
Note: there is a special case when path consist of just three commands: “M10,10R…z”. In this case path will smoothly connects to its beginning.
</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 2665 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2665">&#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 2645 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2645">&#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">Element object with type “text”</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 2355 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2355">&#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">horisontal 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">Element object with type “rect”</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 2588 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2588">&#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 &lt;tspan&gt;s</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">Element object with type “text”</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, "Savage");
var t2 = paper.text(50, 50, ["S","a","v","a","g","e"]);
</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 2822 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2822">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.toString-extra"></div><div class="dr-method"><p>Returns SVG code of the element. Equivalent to <code>outerHTML</code> in HTML context.
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">SVG code of the element.</span></p>
</div><div class="dr-method"><p>Returns SVG code of 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 of the <a href="#Paper" class="dr-link">Paper</a>.</span></p>
</div></section></article><article id="Savage" class="Savage-section"><header><h2 id="Savage" class="undefined">Savage<a href="#Savage" title="Link to this section" class="dr-hash">&#x2693;</a></h2></header>
<section><div class="extra" id="Savage-extra"></div></section></article><article id="Savage.Matrix" class="Savage-Matrix-section"><header><h3 id="Savage.Matrix" class="dr-method">Savage.Matrix(…)<a href="#Savage.Matrix" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 584 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L584">&#x27ad;</a></h3></header>
<section><div class="extra" id="Savage.Matrix-extra"></div><div class="dr-method"><p>Utility method
Returns matrix based on 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="Savage.ajax" class="Savage-ajax-section"><header><h3 id="Savage.ajax" class="dr-method">Savage.ajax(…)<a href="#Savage.ajax" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2854 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2854">&#x27ad;</a></h3></header>
<section><div class="extra" id="Savage.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">XMLHttpRequest (just in case)</span></p>
</div></section></article><article id="Savage.animate" class="Savage-animate-section"><header><h3 id="Savage.animate" class="dr-method">Savage.animate(from, to, setter, ms, [easing], [callback])<a href="#Savage.animate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1998 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1998">&#x27ad;</a></h3></header>
<section><div class="extra" id="Savage.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 will take one number argument</span></li>
<li class="topcoat-list__item"><span class="dr-param">ms</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">duration</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">&#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">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="Savage.animation" class="Savage-animation-section"><header><h3 id="Savage.animation" class="dr-method">Savage.animation(attr, ms, [easing], [callback])<a href="#Savage.animation" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1940 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1940">&#x27ad;</a></h3></header>
<section><div class="extra" id="Savage.animation-extra"></div><div class="dr-method"><p>Creates 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">ms</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">animation duration</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</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="Savage.color" class="Savage-color-section"><header><h3 id="Savage.color" class="dr-method">Savage.color(clr)<a href="#Savage.color" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 809 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L809">&#x27ad;</a></h3></header>
<section><div class="extra" id="Savage.color-extra"></div><div class="dr-method"><p>Parses the color string and returns object with all values for the given 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">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="#Savage.getRGB" class="dr-link">Savage.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 &amp; HSB object in 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 cant 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="Savage.deg" class="Savage-deg-section"><header><h3 id="Savage.deg" class="dr-method">Savage.deg(deg)<a href="#Savage.deg" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 278 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L278">&#x27ad;</a></h3></header>
<section><div class="extra" id="Savage.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">deg</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="Savage.filter" class="Savage-filter-section"><header><h3 id="Savage.filter" class="undefined">Savage.filter<a href="#Savage.filter" title="Link to this section" class="dr-hash">&#x2693;</a></h3></header>
<section><div class="extra" id="Savage.filter-extra"></div></section></article><article id="Savage.filter.blur" class="Savage-filter-blur-section"><header><h4 id="Savage.filter.blur" class="dr-method">Savage.filter.blur(x, [y])<a href="#Savage.filter.blur" 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/filter.js#L96">&#x27ad;</a></h4></header>
<section><div class="extra" id="Savage.filter.blur-extra"></div><div class="dr-method"><p>Returns string of 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 horisontal blur in px.</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 px.</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(Savage.filter.blur(5, 10)),
c = paper.circle(10, 10, 10).attr({
filter: f
});
</code></pre></section>
</div></section></article><article id="Savage.filter.brightness" class="Savage-filter-brightness-section"><header><h4 id="Savage.filter.brightness" class="dr-method">Savage.filter.brightness(amount)<a href="#Savage.filter.brightness" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 270 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L270">&#x27ad;</a></h4></header>
<section><div class="extra" id="Savage.filter.brightness-extra"></div><div class="dr-method"><p>Returns string of 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="Savage.filter.contrast" class="Savage-filter-contrast-section"><header><h4 id="Savage.filter.contrast" class="dr-method">Savage.filter.contrast(amount)<a href="#Savage.filter.contrast" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 290 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L290">&#x27ad;</a></h4></header>
<section><div class="extra" id="Savage.filter.contrast-extra"></div><div class="dr-method"><p>Returns string of 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="Savage.filter.grayscale" class="Savage-filter-grayscale-section"><header><h4 id="Savage.filter.grayscale" class="dr-method">Savage.filter.grayscale(amount)<a href="#Savage.filter.grayscale" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 156 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L156">&#x27ad;</a></h4></header>
<section><div class="extra" id="Savage.filter.grayscale-extra"></div><div class="dr-method"><p>Returns string of 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="Savage.filter.hueRotate" class="Savage-filter-hueRotate-section"><header><h4 id="Savage.filter.hueRotate" class="dr-method">Savage.filter.hueRotate(angle)<a href="#Savage.filter.hueRotate" 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/filter.js#L231">&#x27ad;</a></h4></header>
<section><div class="extra" id="Savage.filter.hueRotate-extra"></div><div class="dr-method"><p>Returns string of 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="Savage.filter.invert" class="Savage-filter-invert-section"><header><h4 id="Savage.filter.invert" class="dr-method">Savage.filter.invert(amount)<a href="#Savage.filter.invert" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 249 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L249">&#x27ad;</a></h4></header>
<section><div class="extra" id="Savage.filter.invert-extra"></div><div class="dr-method"><p>Returns string of 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="Savage.filter.saturate" class="Savage-filter-saturate-section"><header><h4 id="Savage.filter.saturate" class="dr-method">Savage.filter.saturate(amount)<a href="#Savage.filter.saturate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 211 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L211">&#x27ad;</a></h4></header>
<section><div class="extra" id="Savage.filter.saturate-extra"></div><div class="dr-method"><p>Returns string of 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="Savage.filter.sepia" class="Savage-filter-sepia-section"><header><h4 id="Savage.filter.sepia" class="dr-method">Savage.filter.sepia(amount)<a href="#Savage.filter.sepia" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 183 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L183">&#x27ad;</a></h4></header>
<section><div class="extra" id="Savage.filter.sepia-extra"></div><div class="dr-method"><p>Returns string of 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="Savage.filter.shadow" class="Savage-filter-shadow-section"><header><h4 id="Savage.filter.shadow" class="dr-method">Savage.filter.shadow(dx, dy, [blur], [color])<a href="#Savage.filter.shadow" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 125 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L125">&#x27ad;</a></h4></header>
<section><div class="extra" id="Savage.filter.shadow-extra"></div><div class="dr-method"><p>Returns string of 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">horisontal shift of the shadow in px.</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 px.</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(Savage.filter.shadow(0, 2, 3)),
c = paper.circle(10, 10, 10).attr({
filter: f
});
</code></pre></section>
</div></section></article><article id="Savage.format" class="Savage-format-section"><header><h3 id="Savage.format" class="dr-method">Savage.format(token, json)<a href="#Savage.format" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 173 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L173">&#x27ad;</a></h3></header>
<section><div class="extra" id="Savage.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 will be 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">formated string</span></p>
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">// this will draw a rectangular shape equivalent to "M10,20h40v50h-40z"
paper.path(Savage.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="Savage.fragment" class="Savage-fragment-section"><header><h3 id="Savage.fragment" class="dr-method">Savage.fragment(varargs)<a href="#Savage.fragment" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2240 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2240">&#x27ad;</a></h3></header>
<section><div class="extra" id="Savage.fragment-extra"></div><div class="dr-method"><p>Creates DOM fragment from 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="Savage.getRGB" class="Savage-getRGB-section"><header><h3 id="Savage.getRGB" class="dr-method">Savage.getRGB(colour)<a href="#Savage.getRGB" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 612 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L612">&#x27ad;</a></h3></header>
<section><div class="extra" id="Savage.getRGB-extra"></div><div class="dr-method"><p>Parses colour 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">colour</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">colour string in one of formats:</span></li>
</ol></div>
<ul>
<li>Colour name (“<code>red</code>”, “<code>green</code>”, “<code>cornflowerblue</code>”, etc)</li>
<li>#••• — shortened HTML colour: (“<code>#000</code>”, “<code>#fc0</code>”, etc)</li>
<li>#•••••• — full length HTML colour: (“<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>rgb(•••%, •••%, •••%) — same as above, but in %: (“<code>rgb(100%,&nbsp;175%,&nbsp;0%)</code>”)</li>
<li>hsb(•••, •••, •••) — hue, saturation and brightness values: (“<code>hsb(0.5,&nbsp;0.25,&nbsp;1)</code>”)</li>
<li>hsb(•••%, •••%, •••%) — same as above, but in %</li>
<li>hsl(•••, •••, •••) — same as hsb</li>
<li>hsl(•••%, •••%, •••%) — same as hsb</li>
</ul>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">RGB object in 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 cant be parsed</span>
</ol></li><li>}</li></ol>
</div></section></article><article id="Savage.hsb" class="Savage-hsb-section"><header><h3 id="Savage.hsb" class="dr-method">Savage.hsb(h, s, b)<a href="#Savage.hsb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 696 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L696">&#x27ad;</a></h3></header>
<section><div class="extra" id="Savage.hsb-extra"></div><div class="dr-method"><p>Converts HSB values to hex representation of the colour.
</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 colour.</span></p>
</div></section></article><article id="Savage.hsb2rgb" class="Savage-hsb2rgb-section"><header><h3 id="Savage.hsb2rgb" class="dr-method">Savage.hsb2rgb(h, s, v)<a href="#Savage.hsb2rgb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 861 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L861">&#x27ad;</a></h3></header>
<section><div class="extra" id="Savage.hsb2rgb-extra"></div><div class="dr-method"><p>Converts HSB values to 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 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="Savage.hsl" class="Savage-hsl-section"><header><h3 id="Savage.hsl" class="dr-method">Savage.hsl(h, s, l)<a href="#Savage.hsl" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 709 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L709">&#x27ad;</a></h3></header>
<section><div class="extra" id="Savage.hsl-extra"></div><div class="dr-method"><p>Converts HSL values to hex representation of the colour.
</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 colour.</span></p>
</div></section></article><article id="Savage.hsl2rgb" class="Savage-hsl2rgb-section"><header><h3 id="Savage.hsl2rgb" class="dr-method">Savage.hsl2rgb(h, s, l)<a href="#Savage.hsl2rgb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 897 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L897">&#x27ad;</a></h3></header>
<section><div class="extra" id="Savage.hsl2rgb-extra"></div><div class="dr-method"><p>Converts HSL values to 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 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="Savage.is" class="Savage-is-section"><header><h3 id="Savage.is" class="dr-method">Savage.is(o, type)<a href="#Savage.is" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 288 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L288">&#x27ad;</a></h3></header>
<section><div class="extra" id="Savage.is-extra"></div><div class="dr-method"><p>Handfull replacement for <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, i.e. “string”, “function”, “number”, 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">is given value is of given type</span></p>
</div></section></article><article id="Savage.load" class="Savage-load-section"><header><h3 id="Savage.load" class="dr-method">Savage.load(url, callback, [scope])<a href="#Savage.load" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2900 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2900">&#x27ad;</a></h3></header>
<section><div class="extra" id="Savage.load-extra"></div><div class="dr-method"><p>Loads external SVG file as a <a href="#Fragment" class="dr-link">Fragment</a>. For more advanced AJAX see <a href="#Savage.ajax" class="dr-link">Savage.ajax</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">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="Savage.parse" class="Savage-parse-section"><header><h3 id="Savage.parse" class="dr-method">Savage.parse(svg)<a href="#Savage.parse" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2192 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2192">&#x27ad;</a></h3></header>
<section><div class="extra" id="Savage.parse-extra"></div><div class="dr-method"><p>Parses SVG fragment and converts it into <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 fragment</span></p>
</div></section></article><article id="Savage.parsePathString" class="Savage-parsePathString-section"><header><h3 id="Savage.parsePathString" class="dr-method">Savage.parsePathString(pathString)<a href="#Savage.parsePathString" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1002 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1002">&#x27ad;</a></h3></header>
<section><div class="extra" id="Savage.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 will be 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="Savage.parseTransformString" class="Savage-parseTransformString-section"><header><h3 id="Savage.parseTransformString" class="dr-method">Savage.parseTransformString(TString)<a href="#Savage.parseTransformString" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1055 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1055">&#x27ad;</a></h3></header>
<section><div class="extra" id="Savage.parseTransformString-extra"></div><div class="dr-method"><p>Utility method
Parses given path 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 will be 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="Savage.path" class="Savage-path-section"><header><h3 id="Savage.path" class="undefined">Savage.path<a href="#Savage.path" title="Link to this section" class="dr-hash">&#x2693;</a></h3></header>
<section><div class="extra" id="Savage.path-extra"></div></section></article><article id="Savage.path.bezierBBox" class="Savage-path-bezierBBox-section"><header><h4 id="Savage.path.bezierBBox" class="dr-method">Savage.path.bezierBBox(…)<a href="#Savage.path.bezierBBox" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1205 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1205">&#x27ad;</a></h4></header>
<section><div class="extra" id="Savage.path.bezierBBox-extra"></div><div class="dr-method"><p>Utility method
Return bounding box of a given cubic bezier 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 bezier 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">point information in format:</span></p>
<ol class="dr-json"><li>{<ol class="dr-json"><li> min: {<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 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 top point</span>
</ol></li><li> }</li><li> max: {<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 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 bottom point</span>
</ol></li><li> }</li></ol></li><li>}</li></ol>
</div></section></article><article id="Savage.path.findDotsAtSegment" class="Savage-path-findDotsAtSegment-section"><header><h4 id="Savage.path.findDotsAtSegment" class="dr-method">Savage.path.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t)<a href="#Savage.path.findDotsAtSegment" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1175 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1175">&#x27ad;</a></h4></header>
<section><div class="extra" id="Savage.path.findDotsAtSegment-extra"></div><div class="dr-method"><p>Utility method
Find dot coordinates on the given cubic bezier 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="Savage.path.getBBox" class="Savage-path-getBBox-section"><header><h4 id="Savage.path.getBBox" class="dr-method">Savage.path.getBBox(path)<a href="#Savage.path.getBBox" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1287 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1287">&#x27ad;</a></h4></header>
<section><div class="extra" id="Savage.path.getBBox-extra"></div><div class="dr-method"><p>Utility method
Return 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="Savage.path.getPointAtLength" class="Savage-path-getPointAtLength-section"><header><h4 id="Savage.path.getPointAtLength" class="dr-method">Savage.path.getPointAtLength(path, length)<a href="#Savage.path.getPointAtLength" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1071 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1071">&#x27ad;</a></h4></header>
<section><div class="extra" id="Savage.path.getPointAtLength-extra"></div><div class="dr-method"><p>Return coordinates of the point located at the given length on 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">&#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">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="Savage.path.getSubpath" class="Savage-path-getSubpath-section"><header><h4 id="Savage.path.getSubpath" class="dr-method">Savage.path.getSubpath(path, from, to)<a href="#Savage.path.getSubpath" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1084 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1084">&#x27ad;</a></h4></header>
<section><div class="extra" id="Savage.path.getSubpath-extra"></div><div class="dr-method"><p>Return subpath of a given path from given length to given length.
</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">position of 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">position of 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">pathstring for the segment</span></p>
</div></section></article><article id="Savage.path.getTotalLength" class="Savage-path-getTotalLength-section"><header><h4 id="Savage.path.getTotalLength" class="dr-method">Savage.path.getTotalLength(path)<a href="#Savage.path.getTotalLength" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1054 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1054">&#x27ad;</a></h4></header>
<section><div class="extra" id="Savage.path.getTotalLength-extra"></div><div class="dr-method"><p>Returns 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="Savage.path.intersection" class="Savage-path-intersection-section"><header><h4 id="Savage.path.intersection" class="dr-method">Savage.path.intersection(path1, path2)<a href="#Savage.path.intersection" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1254 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1254">&#x27ad;</a></h4></header>
<section><div class="extra" id="Savage.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="Savage.path.isBBoxIntersect" class="Savage-path-isBBoxIntersect-section"><header><h4 id="Savage.path.isBBoxIntersect" class="dr-method">Savage.path.isBBoxIntersect(bbox1, bbox2)<a href="#Savage.path.isBBoxIntersect" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1230 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1230">&#x27ad;</a></h4></header>
<section><div class="extra" id="Savage.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 they intersect</span></p>
</div></section></article><article id="Savage.path.isPointInside" class="Savage-path-isPointInside-section"><header><h4 id="Savage.path.isPointInside" class="dr-method">Savage.path.isPointInside(path, x, y)<a href="#Savage.path.isPointInside" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1268 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1268">&#x27ad;</a></h4></header>
<section><div class="extra" id="Savage.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>
<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">true, if point is inside the path</span></p>
</div></section></article><article id="Savage.path.isPointInsideBBox" class="Savage-path-isPointInsideBBox-section"><header><h4 id="Savage.path.isPointInsideBBox" class="dr-method">Savage.path.isPointInsideBBox(bbox, x, y)<a href="#Savage.path.isPointInsideBBox" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1218 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1218">&#x27ad;</a></h4></header>
<section><div class="extra" id="Savage.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 inside</span></p>
</div></section></article><article id="Savage.path.map" class="Savage-path-map-section"><header><h4 id="Savage.path.map" class="dr-method">Savage.path.map(path, matrix)<a href="#Savage.path.map" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1331 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1331">&#x27ad;</a></h4></header>
<section><div class="extra" id="Savage.path.map-extra"></div><div class="dr-method"><p>Transform the path string with 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="Savage.path.toAbsolute" class="Savage-path-toAbsolute-section"><header><h4 id="Savage.path.toAbsolute" class="dr-method">Savage.path.toAbsolute(path)<a href="#Savage.path.toAbsolute" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1310 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1310">&#x27ad;</a></h4></header>
<section><div class="extra" id="Savage.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="Savage.path.toCubic" class="Savage-path-toCubic-section"><header><h4 id="Savage.path.toCubic" class="dr-method">Savage.path.toCubic(pathString)<a href="#Savage.path.toCubic" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1321 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1321">&#x27ad;</a></h4></header>
<section><div class="extra" id="Savage.path.toCubic-extra"></div><div class="dr-method"><p>Utility method
Converts path to a new path where all segments are cubic bezier 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="Savage.path.toRelative" class="Savage-path-toRelative-section"><header><h4 id="Savage.path.toRelative" class="dr-method">Savage.path.toRelative(path)<a href="#Savage.path.toRelative" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1299 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1299">&#x27ad;</a></h4></header>
<section><div class="extra" id="Savage.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="Savage.rad" class="Savage-rad-section"><header><h3 id="Savage.rad" class="dr-method">Savage.rad(deg)<a href="#Savage.rad" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 269 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L269">&#x27ad;</a></h3></header>
<section><div class="extra" id="Savage.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="Savage.rgb" class="Savage-rgb-section"><header><h3 id="Savage.rgb" class="dr-method">Savage.rgb(r, g, b)<a href="#Savage.rgb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 722 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L722">&#x27ad;</a></h3></header>
<section><div class="extra" id="Savage.rgb-extra"></div><div class="dr-method"><p>Converts RGB values to hex representation of the colour.
</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 colour.</span></p>
</div></section></article><article id="Savage.rgb2hsb" class="Savage-rgb2hsb-section"><header><h3 id="Savage.rgb2hsb" class="dr-method">Savage.rgb2hsb(r, g, b)<a href="#Savage.rgb2hsb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 936 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L936">&#x27ad;</a></h3></header>
<section><div class="extra" id="Savage.rgb2hsb-extra"></div><div class="dr-method"><p>Converts RGB values to 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 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="Savage.rgb2hsl" class="Savage-rgb2hsl-section"><header><h3 id="Savage.rgb2hsl" class="dr-method">Savage.rgb2hsl(r, g, b)<a href="#Savage.rgb2hsl" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 969 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L969">&#x27ad;</a></h3></header>
<section><div class="extra" id="Savage.rgb2hsl-extra"></div><div class="dr-method"><p>Converts RGB values to 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 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="Savage.select" class="Savage-select-section"><header><h3 id="Savage.select" class="dr-method">Savage.select(query)<a href="#Savage.select" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1305 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1305">&#x27ad;</a></h3></header>
<section><div class="extra" id="Savage.select-extra"></div><div class="dr-method"><p>Wraps 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"></span></p>
</div></section></article><article id="Savage.selectAll" class="Savage-selectAll-section"><header><h3 id="Savage.selectAll" class="dr-method">Savage.selectAll(query)<a href="#Savage.selectAll" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1316 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1316">&#x27ad;</a></h3></header>
<section><div class="extra" id="Savage.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"></span></p>
</div></section></article><article id="Savage.snapTo" class="Savage-snapTo-section"><header><h3 id="Savage.snapTo" class="dr-method">Savage.snapTo(values, value, [tolerance])<a href="#Savage.snapTo" 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/svg.js#L299">&#x27ad;</a></h3></header>
<section><div class="extra" id="Savage.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">tolerance for snapping. 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="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>Removeds 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 &amp; 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 function returns <code>false</code> it will stop loop 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 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">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="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 139 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L139">&#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 “slave” 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 “slave” 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 “master” 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 “master” 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 “master” 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 “slave” 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 “slave” 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 “slave” 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 “master” 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 “master” 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 “slave” 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 254 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L254">&#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 269 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L269">&#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 300 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L300">&#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 219 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L219">&#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 230 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L230">&#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 208 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L208">&#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 285 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L285">&#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 185 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L185">&#x27ad;</a></h3></header>
<section><div class="extra" id="mina.getById-extra"></div><div class="dr-method"><p>Returns animation by it’s 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’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 197 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L197">&#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 176 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L176">&#x27ad;</a></h3></header>
<section><div class="extra" id="mina.time-extra"></div><div class="dr-method"><p>Returns current time. Equal 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="savage-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