<!DOCTYPE html>
<!-- Generated with Dr.js -->
-<html lang="en"><head><meta charset="utf-8"><title>Raphaël Reference</title><link rel="stylesheet" href="dr.css"></head><body id="dr-js"><div class="dr-doc"><ol class="dr-toc"><li class="dr-lvl0"><a href="#Animation" class="undefined"><span>Animation</span></a></li><li class="dr-lvl1"><a href="#Animation.delay" class="dr-method"><span>Animation.delay()</span></a></li><li class="dr-lvl1"><a href="#Animation.repeat" class="dr-method"><span>Animation.repeat()</span></a></li><li class="dr-lvl0"><a href="#Element" class="undefined"><span>Element</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.clone" class="dr-method"><span>Element.clone()</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.glow" class="dr-method"><span>Element.glow()</span></a></li><li class="dr-lvl1"><a href="#Element.rotate" class="dr-method"><span>Element.rotate()</span></a></li><li class="dr-lvl1"><a href="#Element.scale" class="dr-method"><span>Element.scale()</span></a></li><li class="dr-lvl1"><a href="#Element.setTime" class="dr-method"><span>Element.setTime()</span></a></li><li class="dr-lvl1"><a href="#Element.status" class="dr-method"><span>Element.status()</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.translate" class="dr-method"><span>Element.translate()</span></a></li><li class="dr-lvl0"><a href="#Paper" class="undefined"><span>Paper</span></a></li><li class="dr-lvl1"><a href="#Paper.bottom" class="dr-property"><span>Paper.bottom</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.ellipse" class="dr-method"><span>Paper.ellipse()</span></a></li><li class="dr-lvl1"><a href="#Paper.forEach" class="dr-method"><span>Paper.forEach()</span></a></li><li class="dr-lvl1"><a href="#Paper.getById" class="dr-method"><span>Paper.getById()</span></a></li><li class="dr-lvl1"><a href="#Paper.getElementByPoint" class="dr-method"><span>Paper.getElementByPoint()</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.path" class="dr-method"><span>Paper.path()</span></a></li><li class="dr-lvl1"><a href="#Paper.raphael" class="dr-property"><span>Paper.raphael</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.set" class="dr-method"><span>Paper.set()</span></a></li><li class="dr-lvl1"><a href="#Paper.setSize" class="dr-method"><span>Paper.setSize()</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.top" class="dr-property"><span>Paper.top</span></a></li><li class="dr-lvl0"><a href="#Raphael" class="dr-method"><span>Raphael()</span></a></li><li class="dr-lvl1"><a href="#Raphael.angle" class="dr-method"><span>Raphael.angle()</span></a></li><li class="dr-lvl1"><a href="#Raphael.animation" class="dr-method"><span>Raphael.animation()</span></a></li><li class="dr-lvl1"><a href="#Raphael.deg" class="dr-method"><span>Raphael.deg()</span></a></li><li class="dr-lvl1"><a href="#Raphael.easing_formulas" class="dr-property"><span>Raphael.easing_formulas</span></a></li><li class="dr-lvl1"><a href="#Raphael.findDotsAtSegment" class="dr-method"><span>Raphael.findDotsAtSegment()</span></a></li><li class="dr-lvl1"><a href="#Raphael.fn" class="dr-property"><span>Raphael.fn</span></a></li><li class="dr-lvl1"><a href="#Raphael.getColor" class="dr-method"><span>Raphael.getColor()</span></a></li><li class="dr-lvl2"><a href="#Raphael.getColor.reset" class="dr-method"><span>Raphael.getColor.reset()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getPointAtLength" class="dr-method"><span>Raphael.getPointAtLength()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getRGB" class="dr-method"><span>Raphael.getRGB()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getSubpath" class="dr-method"><span>Raphael.getSubpath()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getTotalLength" class="dr-method"><span>Raphael.getTotalLength()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsb" class="dr-method"><span>Raphael.hsb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsb2rgb" class="dr-method"><span>Raphael.hsb2rgb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsl" class="dr-method"><span>Raphael.hsl()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsl2rgb" class="dr-method"><span>Raphael.hsl2rgb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.is" class="dr-method"><span>Raphael.is()</span></a></li><li class="dr-lvl1"><a href="#Raphael.parsePathString" class="dr-method"><span>Raphael.parsePathString()</span></a></li><li class="dr-lvl1"><a href="#Raphael.parseTransformString" class="dr-method"><span>Raphael.parseTransformString()</span></a></li><li class="dr-lvl1"><a href="#Raphael.path2curve" class="dr-method"><span>Raphael.path2curve()</span></a></li><li class="dr-lvl1"><a href="#Raphael.pathToRelative" class="dr-method"><span>Raphael.pathToRelative()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rad" class="dr-method"><span>Raphael.rad()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rgb" class="dr-method"><span>Raphael.rgb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rgb2hsb" class="dr-method"><span>Raphael.rgb2hsb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rgb2hsl" class="dr-method"><span>Raphael.rgb2hsl()</span></a></li><li class="dr-lvl1"><a href="#Raphael.setWindow" class="dr-method"><span>Raphael.setWindow()</span></a></li><li class="dr-lvl1"><a href="#Raphael.snapTo" class="dr-method"><span>Raphael.snapTo()</span></a></li><li class="dr-lvl1"><a href="#Raphael.svg" class="dr-property"><span>Raphael.svg</span></a></li><li class="dr-lvl1"><a href="#Raphael.type" class="dr-property"><span>Raphael.type</span></a></li><li class="dr-lvl1"><a href="#Raphael.vml" class="dr-property"><span>Raphael.vml</span></a></li></ol><h1>Raphaël Reference</h1><p class="dr-source">Check out the source: <a href="raphael-src.html">raphael.js</a></p><h2 id="Animation" class="undefined">Animation<a href="#Animation" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#Lundefined">➭</a></h2>
-<h3 id="Animation.delay" class="dr-method">Animation.delay(delay)<a href="#Animation.delay" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4752">➭</a></h3>
-<div class="dr-method"><p>Creates copy of existing animation object with given delay.</p>
+<html lang="en"><head><meta charset="utf-8"><title>Raphaël Reference</title><link rel="stylesheet" href="dr.css"></head><body id="dr-js"><div id="dr"><ol class="dr-toc"><li class="dr-lvl0"><a href="#Animation" class="undefined"><span>Animation</span></a></li><li class="dr-lvl1"><a href="#Animation.delay" class="dr-method"><span>Animation.delay()</span></a></li><li class="dr-lvl1"><a href="#Animation.repeat" class="dr-method"><span>Animation.repeat()</span></a></li><li class="dr-lvl0"><a href="#Element" class="undefined"><span>Element</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.animateWith" class="dr-method"><span>Element.animateWith()</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.clone" class="dr-method"><span>Element.clone()</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.glow" class="dr-method"><span>Element.glow()</span></a></li><li class="dr-lvl1"><a href="#Element.hide" class="dr-method"><span>Element.hide()</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.id" class="dr-property"><span>Element.id</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.next" class="dr-property"><span>Element.next</span></a></li><li class="dr-lvl1"><a href="#Element.node" class="dr-property"><span>Element.node</span></a></li><li class="dr-lvl1"><a href="#Element.onDragOver" class="dr-method"><span>Element.onDragOver()</span></a></li><li class="dr-lvl1"><a href="#Element.paper" class="dr-property"><span>Element.paper</span></a></li><li class="dr-lvl1"><a href="#Element.pause" class="dr-method"><span>Element.pause()</span></a></li><li class="dr-lvl1"><a href="#Element.prev" class="dr-property"><span>Element.prev</span></a></li><li class="dr-lvl1"><a href="#Element.raphael" class="dr-property"><span>Element.raphael</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.resume" class="dr-method"><span>Element.resume()</span></a></li><li class="dr-lvl1"><a href="#Element.rotate" class="dr-method"><span>Element.rotate()</span></a></li><li class="dr-lvl1"><a href="#Element.scale" class="dr-method"><span>Element.scale()</span></a></li><li class="dr-lvl1"><a href="#Element.setTime" class="dr-method"><span>Element.setTime()</span></a></li><li class="dr-lvl1"><a href="#Element.show" class="dr-method"><span>Element.show()</span></a></li><li class="dr-lvl1"><a href="#Element.status" class="dr-method"><span>Element.status()</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.toBack" class="dr-method"><span>Element.toBack()</span></a></li><li class="dr-lvl1"><a href="#Element.toFront" class="dr-method"><span>Element.toFront()</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.translate" class="dr-method"><span>Element.translate()</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-lvl0"><a href="#Paper" class="undefined"><span>Paper</span></a></li><li class="dr-lvl1"><a href="#Paper.bottom" class="dr-property"><span>Paper.bottom</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.clear" class="dr-method"><span>Paper.clear()</span></a></li><li class="dr-lvl1"><a href="#Paper.customAttributes" class="dr-property"><span>Paper.customAttributes</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.forEach" class="dr-method"><span>Paper.forEach()</span></a></li><li class="dr-lvl1"><a href="#Paper.getById" class="dr-method"><span>Paper.getById()</span></a></li><li class="dr-lvl1"><a href="#Paper.getElementByPoint" class="dr-method"><span>Paper.getElementByPoint()</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.path" class="dr-method"><span>Paper.path()</span></a></li><li class="dr-lvl1"><a href="#Paper.raphael" class="dr-property"><span>Paper.raphael</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.remove" class="dr-method"><span>Paper.remove()</span></a></li><li class="dr-lvl1"><a href="#Paper.safari" class="dr-method"><span>Paper.safari()</span></a></li><li class="dr-lvl1"><a href="#Paper.set" class="dr-method"><span>Paper.set()</span></a></li><li class="dr-lvl1"><a href="#Paper.setSize" class="dr-method"><span>Paper.setSize()</span></a></li><li class="dr-lvl1"><a href="#Paper.setViewBox" class="dr-method"><span>Paper.setViewBox()</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.top" class="dr-property"><span>Paper.top</span></a></li><li class="dr-lvl0"><a href="#Raphael" class="dr-method"><span>Raphael()</span></a></li><li class="dr-lvl1"><a href="#Raphael.angle" class="dr-method"><span>Raphael.angle()</span></a></li><li class="dr-lvl1"><a href="#Raphael.animation" class="dr-method"><span>Raphael.animation()</span></a></li><li class="dr-lvl1"><a href="#Raphael.deg" class="dr-method"><span>Raphael.deg()</span></a></li><li class="dr-lvl1"><a href="#Raphael.easing_formulas" class="dr-property"><span>Raphael.easing_formulas</span></a></li><li class="dr-lvl1"><a href="#Raphael.el" class="dr-property"><span>Raphael.el</span></a></li><li class="dr-lvl1"><a href="#Raphael.findDotsAtSegment" class="dr-method"><span>Raphael.findDotsAtSegment()</span></a></li><li class="dr-lvl1"><a href="#Raphael.fn" class="dr-property"><span>Raphael.fn</span></a></li><li class="dr-lvl1"><a href="#Raphael.getColor" class="dr-method"><span>Raphael.getColor()</span></a></li><li class="dr-lvl2"><a href="#Raphael.getColor.reset" class="dr-method"><span>Raphael.getColor.reset()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getPointAtLength" class="dr-method"><span>Raphael.getPointAtLength()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getRGB" class="dr-method"><span>Raphael.getRGB()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getSubpath" class="dr-method"><span>Raphael.getSubpath()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getTotalLength" class="dr-method"><span>Raphael.getTotalLength()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsb" class="dr-method"><span>Raphael.hsb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsb2rgb" class="dr-method"><span>Raphael.hsb2rgb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsl" class="dr-method"><span>Raphael.hsl()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsl2rgb" class="dr-method"><span>Raphael.hsl2rgb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.is" class="dr-method"><span>Raphael.is()</span></a></li><li class="dr-lvl1"><a href="#Raphael.parsePathString" class="dr-method"><span>Raphael.parsePathString()</span></a></li><li class="dr-lvl1"><a href="#Raphael.parseTransformString" class="dr-method"><span>Raphael.parseTransformString()</span></a></li><li class="dr-lvl1"><a href="#Raphael.path2curve" class="dr-method"><span>Raphael.path2curve()</span></a></li><li class="dr-lvl1"><a href="#Raphael.pathToRelative" class="dr-method"><span>Raphael.pathToRelative()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rad" class="dr-method"><span>Raphael.rad()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rgb" class="dr-method"><span>Raphael.rgb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rgb2hsb" class="dr-method"><span>Raphael.rgb2hsb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rgb2hsl" class="dr-method"><span>Raphael.rgb2hsl()</span></a></li><li class="dr-lvl1"><a href="#Raphael.setWindow" class="dr-method"><span>Raphael.setWindow()</span></a></li><li class="dr-lvl1"><a href="#Raphael.snapTo" class="dr-method"><span>Raphael.snapTo()</span></a></li><li class="dr-lvl1"><a href="#Raphael.svg" class="dr-property"><span>Raphael.svg</span></a></li><li class="dr-lvl1"><a href="#Raphael.type" class="dr-property"><span>Raphael.type</span></a></li><li class="dr-lvl1"><a href="#Raphael.vml" class="dr-property"><span>Raphael.vml</span></a></li><li class="dr-lvl0"><a href="#Set" class="undefined"><span>Set</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></ol><div class="dr-doc"><h1>Raphaël Reference</h1><p class="dr-source">Check out the source: <a href="raphael-src.html">raphael.js</a></p><h2 id="Animation" class="undefined">Animation<a href="#Animation" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#Lundefined">➭</a></h2>
+<h3 id="Animation.delay" class="dr-method">Animation.delay(delay)<a href="#Animation.delay" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5092">➭</a></h3>
+<div class="dr-method"><p>Creates copy of existing animation object with given delay.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">delay</dt>
<dd class="dr-description">number of ms to pass between animation start and actual animation</dd>
</dl>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">new altered Animation object</span></p>
-</div><h3 id="Animation.repeat" class="dr-method">Animation.repeat(repeat)<a href="#Animation.repeat" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4770">➭</a></h3>
-<div class="dr-method"><p>Creates copy of existing animation object with given repetition.</p>
+</div><h3 id="Animation.repeat" class="dr-method">Animation.repeat(repeat)<a href="#Animation.repeat" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5110">➭</a></h3>
+<div class="dr-method"><p>Creates copy of existing animation object with given repetition.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">repeat</dt>
</dl>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">new altered Animation object</span></p>
</div><h2 id="Element" class="undefined">Element<a href="#Element" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#Lundefined">➭</a></h2>
-<h3 id="Element.animate" class="dr-method">Element.animate(…)<a href="#Element.animate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5029">➭</a></h3>
-<div class="dr-method"><p>Creates and starts animation for given element.</p>
+<h3 id="Element.animate" class="dr-method">Element.animate(…)<a href="#Element.animate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5369">➭</a></h3>
+<div class="dr-method"><p>Creates and starts animation for given element.
+</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">params</dt>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">final attributes for the element, see also <a href="#Element.attr" class="dr-link">Element.attr</a></dd>
+<dt class="dr-param">ms</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">number of milliseconds for animation to run</dd>
+<dt class="dr-param optional">easing</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-string">string</em></dd>
+<dd class="dr-description">easing type. Accept on of <a href="#Raphael.easing_formulas" class="dr-link">Raphael.easing_formulas</a> or CSS format: <code>cubic‐bezier(XX, XX, XX, XX)</code></dd>
+<dt class="dr-param optional">callback</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">callback function. Will be called at the end of animation.</dd>
+</dl>
+<p>or
+</p>
+<dl class="dr-parameters"><dt class="dr-param">animation</dt>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">animation object, see <a href="#Raphael.animation" class="dr-link">Raphael.animation</a></dd>
+</dl>
+<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><h3 id="Element.animateWith" class="dr-method">Element.animateWith(…)<a href="#Element.animateWith" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5001">➭</a></h3>
+<div class="dr-method"><p>Acts similar to <a href="#Element.animate" class="dr-link">Element.animate</a>, but ensure that given animation runs in sync with another given element.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">params</dt>
<dt class="dr-param optional">easing</dt>
<dd class="dr-optional">optional</dd>
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
-<dd class="dr-description">easing type. Accept on of <a href="#Raphael.easing_formulas" class="dr-link">Raphael.easing_formulas</a> or CSS format: <code>cubic-bezier(XX, XX, XX, XX)</code></dd>
+<dd class="dr-description">easing type. Accept on of <a href="#Raphael.easing_formulas" class="dr-link">Raphael.easing_formulas</a> or CSS format: <code>cubic‐bezier(XX, XX, XX, XX)</code></dd>
<dt class="dr-param optional">callback</dt>
<dd class="dr-optional">optional</dd>
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
<dd class="dr-description">callback function. Will be called at the end of animation.</dd>
</dl>
-<p>or</p>
+<p>or
+</p>
<dl class="dr-parameters"><dt class="dr-param">animation</dt>
<dd class="dr-type"><em class="dr-type-object">object</em></dd>
<dd class="dr-description">animation object, see <a href="#Raphael.animation" class="dr-link">Raphael.animation</a></dd>
</dl>
<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><h3 id="Element.clone" class="dr-method">Element.clone()<a href="#Element.clone" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4225">➭</a></h3>
+</div><h3 id="Element.attr" class="dr-method">Element.attr(…)<a href="#Element.attr" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2713">➭</a></h3>
+<div class="dr-method"><p>Sets the attributes of the element.
+</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">attrName</dt>
+<dd class="dr-type"><em class="dr-type-string">string</em></dd>
+<dd class="dr-description">attribute’s name</dd>
+<dt class="dr-param">value</dt>
+<dd class="dr-type"><em class="dr-type-string">string</em></dd>
+<dd class="dr-description">value</dd>
+</dl>
+<p>or
+</p>
+<dl class="dr-parameters"><dt class="dr-param">params</dt>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">object of name/value pairs</dd>
+</dl>
+<p>or
+</p>
+<dl class="dr-parameters"><dt class="dr-param">attrName</dt>
+<dd class="dr-type"><em class="dr-type-string">string</em></dd>
+<dd class="dr-description">attribute’s name</dd>
+</dl>
+<p>or
+</p>
+<dl class="dr-parameters"><dt class="dr-param">attrNames</dt>
+<dd class="dr-type"><em class="dr-type-array">array</em></dd>
+<dd class="dr-description">in this case method returns array of current values for given attribute names</dd>
+</dl>
+<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> if attrsName <em class="amp">&</em> value or params are passed in.</span></p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-...">...</em> <span class="dr-description">value of the attribute if only attrsName is passed in.</span></p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of values of the attribute if attrsNames is passed in.</span></p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">object of attributes if nothing is passed in.</span></p>
+<p class="header">Possible parameters
+</p>
+<p>Please refer to the <a href="http://www.w3.org/TR/SVG/" title="The W3C Recommendation for the SVG language describes these properties in detail.">SVG specification</a> for an explanation of these parameters.</p>
+<ol class="dr-json"><li><span class="dr-json-key">arrow-end</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">arrowhead on the end of the path. The format for string is <code><type>[-<width>[-<length>]]</code>. Possible types: <code>classic</code>, <code>block</code>, <code>open</code>, <code>oval</code>, <code>diamond</code>, <code>none</code>, width: <code>wide</code>, <code>narrow</code>, <code>midium</code>, length: <code>long</code>, <code>short</code>, <code>midium</code>.</span>
+<li><span class="dr-json-key">clip-rect</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">comma or space separated values: x, y, width and height</span>
+<li><span class="dr-json-key">cursor</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">CSS type of the cursor</span>
+<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"> </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"> </span>
+<li><span class="dr-json-key">fill</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">colour, gradient or image</span>
+<li><span class="dr-json-key">fill-opacity</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description"> </span>
+<li><span class="dr-json-key">font</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description"> </span>
+<li><span class="dr-json-key">font-family</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description"> </span>
+<li><span class="dr-json-key">font-size</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">font size in pixels</span>
+<li><span class="dr-json-key">font-weight</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description"> </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"> </span>
+<li><span class="dr-json-key">href</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">URL, if specified element behaves as hyperlink</span>
+<li><span class="dr-json-key">opacity</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description"> </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">SVG path string format</span>
+<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"> </span>
+<li><span class="dr-json-key">rx</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description"> </span>
+<li><span class="dr-json-key">ry</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description"> </span>
+<li><span class="dr-json-key">src</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">image URL, only works for <a href="#Element.image" class="dr-link">Element.image</a> element</span>
+<li><span class="dr-json-key">stroke</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">stroke colour</span>
+<li><span class="dr-json-key">stroke-dasharray</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">[“”, “<code>-</code>”, “<code>.</code>”, “<code>-.</code>”, “<code>-..</code>”, “<code>. </code>”, “<code>- </code>”, “<code>--</code>”, “<code>- .</code>”, “<code>--.</code>”, “<code>--..</code>”]</span>
+<li><span class="dr-json-key">stroke-linecap</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">[“<code>butt</code>”, “<code>square</code>”, “<code>round</code>”]</span>
+<li><span class="dr-json-key">stroke-linejoin</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">[“<code>bevel</code>”, “<code>round</code>”, “<code>miter</code>”]</span>
+<li><span class="dr-json-key">stroke-miterlimit</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description"> </span>
+<li><span class="dr-json-key">stroke-opacity</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description"> </span>
+<li><span class="dr-json-key">stroke-width</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">stroke width in pixels, default is '1'</span>
+<li><span class="dr-json-key">target</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">used with href</span>
+<li><span class="dr-json-key">text</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">contents of the text element. Use <code>\n</code> for multiline text</span>
+<li><span class="dr-json-key">text-anchor</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">[“<code>start</code>”, “<code>middle</code>”, “<code>end</code>”], default is “<code>middle</code>”</span>
+<li><span class="dr-json-key">title</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">will create tooltip with a given text</span>
+<li><span class="dr-json-key">transform</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">see <a href="#Element.transform" class="dr-link">Element.transform</a></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"> </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"> </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"> </span>
+</ol>
+<p class="header">Gradients
+<p>Linear gradient format: “<code>‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›</code>”, example: “<code>90-#fff-#000</code>” – 90°
+gradient from white to black or “<code>0-#fff-#f00:20-#000</code>” – 0° gradient from white via red (at 20%) to black.
+</p>
+<p>radial gradient: “<code>r[(‹fx›, ‹fy›)]‹colour›[-‹colour›[:‹offset›]]*-‹colour›</code>”, example: “<code>r#fff-#000</code>” –
+gradient from white to black or “<code>r(0.25, 0.75)#fff-#000</code>” – gradient from white to black with focus point
+at 0.25, 0.75. Focus point coordinates are in 0..1 range. Radial gradients can only be applied to circles and ellipses.
+</p>
+<p class="header">Path String
+</p>
+<p>Please refer to <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 documentation regarding path string</a>. Raphaël fully supports it.</p>
+<p class="header">Colour Parsing
+</p>
+<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, 100, 0)</code>”)</li>
+ <li>rgb(•••%, •••%, •••%) — same as above, but in %: (“<code>rgb(100%, 175%, 0%)</code>”)</li>
+ <li>rgba(•••, •••, •••, •••) — red, green and blue channels’ values: (“<code>rgba(200, 100, 0, .5)</code>”)</li>
+ <li>rgba(•••%, •••%, •••%, •••%) — same as above, but in %: (“<code>rgba(100%, 175%, 0%, 50%)</code>”)</li>
+ <li>hsb(•••, •••, •••) — hue, saturation and brightness values: (“<code>hsb(0.5, 0.25, 1)</code>”)</li>
+ <li>hsb(•••%, •••%, •••%) — same as above, but in %</li>
+ <li>hsba(•••, •••, •••, •••) — same as above, but with opacity</li>
+ <li>hsl(•••, •••, •••) — almost the same as hsb, see <a href="http://en.wikipedia.org/wiki/HSL_and_HSV" title="HSL and HSV - Wikipedia, the free encyclopedia">Wikipedia page</a></li>
+ <li>hsl(•••%, •••%, •••%) — same as above, but in %</li>
+ <li>hsla(•••, •••, •••) — same as above, but with opacity</li>
+ <li>Optionally for hsb and hsl you could specify hue as a degree: “<code>hsl(240deg, 1, .5)</code>” or, if you want to go fancy, “<code>hsl(240°, 1, .5)</code>”</li>
+</ul>
+</div><h3 id="Element.clone" class="dr-method">Element.clone()<a href="#Element.clone" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4548">➭</a></h3>
<div class="dr-method"><p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">clone of a given element</span></p>
-</div><h3 id="Element.getBBox" class="dr-method">Element.getBBox(isWithoutTransform)<a href="#Element.getBBox" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4193">➭</a></h3>
-<div class="dr-method"><p>Return bounding box for a given element</p>
+</div><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">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4151">➭</a></h3>
+<div class="dr-method"><p>Adds event handlers for drag of the element.
+</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">onmove</dt>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">handler for moving</dd>
+<dt class="dr-param">onstart</dt>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">handler for drag start</dd>
+<dt class="dr-param">onend</dt>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">handler for drag end</dd>
+<dt class="dr-param optional">mcontext</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">context for moving handler</dd>
+<dt class="dr-param optional">scontext</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">context for drag start handler</dd>
+<dt class="dr-param optional">econtext</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">context for drag end handler</dd>
+</dl>
+<p>Additionaly following <code>drag</code> events will be triggered: <code>drag.start.<id></code> on start,
+<code>drag.end.<id></code> on end and <code>drag.move.<id></code> on every move. When element will be dragged over another element
+<code>drag.over.<id></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><h3 id="Element.getBBox" class="dr-method">Element.getBBox(isWithoutTransform)<a href="#Element.getBBox" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4516">➭</a></h3>
+<div class="dr-method"><p>Return bounding box for a given element
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">isWithoutTransform</dt>
<dd class="dr-description">flag, <code>true</code> if you want to have bounding box before transformations. Default is <code>false</code>.</dd>
</dl>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Bounding box object:</span></p>
-<pre class="javascript code"><code>{
- x: <span class="c">//top left corner x,</span>
- y: <span class="c">//top left corner y,</span>
- width: <span class="c">//width,</span>
- height: <span class="c">//height</span>
-}
-</code></pre>
-</div><h3 id="Element.getPointAtLength" class="dr-method">Element.getPointAtLength(length)<a href="#Element.getPointAtLength" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4428">➭</a></h3>
-<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>
+<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">top left corner x</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">top left corner y</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">height:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">height</span>
+</ol></li><li>}</li></ol>
+</div><h3 id="Element.getPointAtLength" class="dr-method">Element.getPointAtLength(length)<a href="#Element.getPointAtLength" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4751">➭</a></h3>
+<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>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">length</dt>
<dd class="dr-description"> </dd>
</dl>
<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>
-<pre class="javascript code"><code>{
- x: <span class="c">//x coordinate,</span>
- y: <span class="c">//y coordinate,</span>
- alpha: <span class="c">//angle of derivative</span>
-}
-</code></pre>
-</div><h3 id="Element.getSubpath" class="dr-method">Element.getSubpath(from, to)<a href="#Element.getSubpath" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4445">➭</a></h3>
-<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>
+<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><h3 id="Element.getSubpath" class="dr-method">Element.getSubpath(from, to)<a href="#Element.getSubpath" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4768">➭</a></h3>
+<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>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">from</dt>
<dd class="dr-description">position of the end of the segment</dd>
</dl>
<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><h3 id="Element.getTotalLength" class="dr-method">Element.getTotalLength()<a href="#Element.getTotalLength" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4404">➭</a></h3>
-<div class="dr-method"><p>Returns length of the path in pixels. Only works for element of “path” type.</p>
+</div><h3 id="Element.getTotalLength" class="dr-method">Element.getTotalLength()<a href="#Element.getTotalLength" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4727">➭</a></h3>
+<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><h3 id="Element.glow" class="dr-method">Element.glow()<a href="#Element.glow" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4244">➭</a></h3>
-<div class="dr-method"><p>Return set of elements that create glow-like effect around given element. See <a href="#Paper.set." class="dr-link">Paper.set.</a></p>
-<p>Note: Glow is not connected to the elment. If you change element attributes it won’t adjust itself.</p>
-<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">set of elements that represents glow</span></p>
-</div><h3 id="Element.rotate" class="dr-method">Element.rotate(deg, [cx], [cy])<a href="#Element.rotate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2369">➭</a></h3>
-<div class="dr-method"><p>Adds rotation by given angle around given point to the list oftransformations of the element.</p>
+</div><h3 id="Element.glow" class="dr-method">Element.glow()<a href="#Element.glow" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4567">➭</a></h3>
+<div class="dr-method"><p>Return set of elements that create glow-like effect around given element. See <a href="#Paper.set" class="dr-link">Paper.set</a>.
+</p>
+<p>Note: Glow is not connected to the elment. If you change element attributes it won’t adjust itself.
+</p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Paper.set" class="dr-link">Paper.set</a> of elements that represents glow</span></p>
+</div><h3 id="Element.hide" class="dr-method">Element.hide()<a href="#Element.hide" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2583">➭</a></h3>
+<div class="dr-method"><p>Makes element invisible. See <a href="#Element.show" class="dr-link">Element.show</a>.
+</p>
+<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><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">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4105">➭</a></h3>
+<div class="dr-method"><p>Adds event handlers for hover for the element.
+</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">f_in</dt>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">handler for hover in</dd>
+<dt class="dr-param">f_out</dt>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">handler for hover out</dd>
+<dt class="dr-param optional">icontext</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">context for hover in handler</dd>
+<dt class="dr-param optional">ocontext</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">context for hover out handler</dd>
+</dl>
+<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><h3 id="Element.id" class="dr-property">Element.id<a href="#Element.id" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2386">➭</a></h3>
+<div class="dr-property"><em class="dr-type dr-type-number">number</em><p>Unique id of the element. Especially usesful when you want to listen to events of the element,
+because all events are fired in format <code><module>.<action>.<id></code>. Also useful for <a href="#Paper.getById" class="dr-link">Paper.getById</a> method.
+</p>
+</div><h3 id="Element.insertAfter" class="dr-method">Element.insertAfter()<a href="#Element.insertAfter" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2805">➭</a></h3>
+<div class="dr-method"><p>Inserts current object after the given one.
+</p>
+<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><h3 id="Element.insertBefore" class="dr-method">Element.insertBefore()<a href="#Element.insertBefore" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2825">➭</a></h3>
+<div class="dr-method"><p>Inserts current object before the given one.
+</p>
+<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><h3 id="Element.next" class="dr-property">Element.next<a href="#Element.next" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2429">➭</a></h3>
+<div class="dr-property"><em class="dr-type dr-type-object">object</em><p>Reference to the next element in the hierarchy.
+</p>
+</div><h3 id="Element.node" class="dr-property">Element.node<a href="#Element.node" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2365">➭</a></h3>
+<div class="dr-property"><em class="dr-type dr-type-object">object</em><p>Gives you a reference to the DOM object, so you can assign event handlers or just mess around.
+</p>
+<p class="header">Usage
+</p>
+<pre class="javascript code"><code><span class="c">// draw a circle at coordinate <span class="d">10</span>,<span class="d">10</span> <b>with</b> radius of <span class="d">10</span></span>
+<b>var</b> c<span class="s"> = </span>paper.circle(<span class="d">10</span>, <span class="d">10</span>, <span class="d">10</span>);
+c.node.onclick<span class="s"> = </span><b>function</b> () {
+ c.attr(<i>"fill"</i>, <i>"red"</i>);
+};
+</code></pre>
+</div><h3 id="Element.onDragOver" class="dr-method">Element.onDragOver(f)<a href="#Element.onDragOver" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4178">➭</a></h3>
+<div class="dr-method"><p>Shortcut for assigning event handler for <code>drag.over.<id></code> event, where id is id of the element (see <a href="#Element.id" class="dr-link">Element.id</a>).
+</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">f</dt>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">handler for event</dd>
+</dl>
+</div><h3 id="Element.paper" class="dr-property">Element.paper<a href="#Element.paper" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2402">➭</a></h3>
+<div class="dr-property"><em class="dr-type dr-type-object">object</em><p>Internal reference to “paper” where object drawn. Mainly for use in plugins and element extensions.
+</p>
+<p class="header">Usage
+</p>
+<pre class="javascript code"><code>Raphael.el.cross<span class="s"> = </span><b>function</b> () {
+ <b>this</b>.attr({fill: <i>"red"</i>});
+ <b>this</b>.paper.path(<i>"M10,10L50,50M50,10L10,<span class="d">50</span>"</i>)
+ .attr({stroke: <i>"red"</i>});
+}
+</code></pre>
+</div><h3 id="Element.pause" class="dr-method">Element.pause([anim])<a href="#Element.pause" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5459">➭</a></h3>
+<div class="dr-method"><p>Stops animation of the element with ability to resume it later on.
+</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param optional">anim</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">animation object</dd>
+</dl>
+<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><h3 id="Element.prev" class="dr-property">Element.prev<a href="#Element.prev" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2420">➭</a></h3>
+<div class="dr-property"><em class="dr-type dr-type-object">object</em><p>Reference to the previous element in the hierarchy.
+</p>
+</div><h3 id="Element.raphael" class="dr-property">Element.raphael<a href="#Element.raphael" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2378">➭</a></h3>
+<div class="dr-property"><em class="dr-type dr-type-object">object</em><p>Internal reference to <a href="#Raphael" class="dr-link">Raphael</a> object. In case it is not available.
+</p>
+<p class="header">Usage
+</p>
+<pre class="javascript code"><code>Raphael.el.red<span class="s"> = </span><b>function</b> () {
+ <b>var</b> hsb<span class="s"> = </span><b>this</b>.paper.raphael.rgb2hsb(<b>this</b>.attr(<i>"fill"</i>));
+ hsb.h<span class="s"> = </span><span class="d">1</span>;
+ <b>this</b>.attr({fill: <b>this</b>.paper.raphael.hsb2rgb(hsb).hex});
+}
+</code></pre>
+</div><h3 id="Element.remove" class="dr-method">Element.remove()<a href="#Element.remove" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2604">➭</a></h3>
+<div class="dr-method"><p>Removes element form the paper.
+</p>
+</div><h3 id="Element.resume" class="dr-method">Element.resume([anim])<a href="#Element.resume" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5479">➭</a></h3>
+<div class="dr-method"><p>Resumes animation if it was paused with <a href="#Element.pause" class="dr-link">Element.pause</a> method.
+</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param optional">anim</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">animation object</dd>
+</dl>
+<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><h3 id="Element.rotate" class="dr-method">Element.rotate(deg, [cx], [cy])<a href="#Element.rotate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2445">➭</a></h3>
+<div class="dr-method"><p>Adds rotation by given angle around given point to the list of
+transformations of the element.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">deg</dt>
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
<dd class="dr-description">y coordinate of the centre of rotation</dd>
</dl>
-<p>If cx <em class="amp">&</em> cy aren’t specified centre of the shape is used as a point of rotation.</p>
+<p>If cx <em class="amp">&</em> cy aren’t specified centre of the shape is used as a point of rotation.
+</p>
<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><h3 id="Element.scale" class="dr-method">Element.scale(sx, sy, [cx], [cy])<a href="#Element.scale" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2402">➭</a></h3>
-<div class="dr-method"><p>Adds scale by given amount relative to given point to the list oftransformations of the element.</p>
+</div><h3 id="Element.scale" class="dr-method">Element.scale(sx, sy, [cx], [cy])<a href="#Element.scale" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2478">➭</a></h3>
+<div class="dr-method"><p>Adds scale by given amount relative to given point to the list of
+transformations of the element.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">sx</dt>
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
<dd class="dr-description">y coordinate of the centre of scale</dd>
</dl>
-<p>If cx <em class="amp">&</em> cy aren’t specified centre of the shape is used instead.</p>
+<p>If cx <em class="amp">&</em> cy aren’t specified centre of the shape is used instead.
+</p>
<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><h3 id="Element.setTime" class="dr-method">Element.setTime(anim, value)<a href="#Element.setTime" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5052">➭</a></h3>
-<div class="dr-method"><p>Sets the status of animation of the element in milliseconds. Similar to <a href="#Element.status" class="dr-link">Element.status</a> method.</p>
+</div><h3 id="Element.setTime" class="dr-method">Element.setTime(anim, value)<a href="#Element.setTime" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5395">➭</a></h3>
+<div class="dr-method"><p>Sets the status of animation of the element in milliseconds. Similar to <a href="#Element.status" class="dr-link">Element.status</a> method.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">anim</dt>
<dd class="dr-description">number of milliseconds from the beginning of the animation</dd>
</dl>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element if <code>value</code> is specified</span></p>
-</div><h3 id="Element.status" class="dr-method">Element.status([anim], [value])<a href="#Element.status" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5082">➭</a></h3>
-<div class="dr-method"><p>Gets or sets the status of animation of the element.</p>
+<p>Note, that during animation following events are triggered:
+</p>
+<p>On each animation frame event <code>anim.frame.<id></code>, on start <code>anim.start.<id></code> and on end <code>anim.finish.<id></code>.
+</p>
+</div><h3 id="Element.show" class="dr-method">Element.show()<a href="#Element.show" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2594">➭</a></h3>
+<div class="dr-method"><p>Makes element visible. See <a href="#Element.hide" class="dr-link">Element.hide</a>.
+</p>
+<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><h3 id="Element.status" class="dr-method">Element.status([anim], [value])<a href="#Element.status" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5422">➭</a></h3>
+<div class="dr-method"><p>Gets or sets the status of animation of the element.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param optional">anim</dt>
<dd class="dr-description">0 – 1. If specified, method works like a setter and sets the status of a given animation to the value. This will cause animation to jump to the given position.</dd>
</dl>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">status</span></p>
-<p>or</p>
-<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">status if <code>anim</code> is not specified in format:</span></p>
-<pre class="javascript code"><code>[{
- anim: <span class="c">// animation object,</span>
- status: <span class="c">// status</span>
-}, {
- anim: <span class="c">// animation object,</span>
- status: <span class="c">// status</span>
-}, ...]
-</code></pre>
-<p>or</p>
+<p>or
+</p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">status if <code>anim</code> is not specified. Array of objects 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">status:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">status</span>
+</ol></li><li>}</li></ol>
+<p>or
+</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element if <code>value</code> is specified</span></p>
-</div><h3 id="Element.transform" class="dr-method">Element.transform([tstr])<a href="#Element.transform" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2468">➭</a></h3>
-<div class="dr-method"><p>Adds transformation to the element which is separate to other attributes,i.e. translation doesn’t change <code>x</code> or <code>y</code> of the rectange. The formatof transformation string is similar to the path string syntax:</p>
+</div><h3 id="Element.stop" class="dr-method">Element.stop([anim])<a href="#Element.stop" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5501">➭</a></h3>
+<div class="dr-method"><p>Stops animation of the element.
+</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param optional">anim</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">animation object</dd>
+</dl>
+<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><h3 id="Element.toBack" class="dr-method">Element.toBack()<a href="#Element.toBack" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2787">➭</a></h3>
+<div class="dr-method"><p>Moves the element so it is the furthest from the viewer’s eyes, behind other elements.
+</p>
+<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><h3 id="Element.toFront" class="dr-method">Element.toFront()<a href="#Element.toFront" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2771">➭</a></h3>
+<div class="dr-method"><p>Moves the element so it is the closest to the viewer’s eyes, on top of other elements.
+</p>
+<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><h3 id="Element.transform" class="dr-method">Element.transform([tstr])<a href="#Element.transform" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2557">➭</a></h3>
+<div class="dr-method"><p>Adds transformation to the element which is separate to other attributes,
+i.e. translation doesn’t change <code>x</code> or <code>y</code> of the rectange. The format
+of transformation string is similar to the path string syntax:
+</p>
<pre class="javascript code"><code><i>"t100,100r30,<span class="d">100</span>,100s2,<span class="d">2</span>,<span class="d">100</span>,100r45s1<span class="d">.5</span>"</i>
</code></pre>
-<p>Each letter is a command. There are four commands: <code>t</code> is for translate, <code>r</code> is for rotate, <code>s</code> is forscale and <code>m</code> is for matrix.</p>
-<p>So, example line could be read like “translate by 100, 100, rotate 30° around 100, 100, scale twice around 100, 100rotate 45° around centre and scale 1.5 times relative to centre”. As you see rotate and scale commands has origincoordinates as a optional parameters.Matrix accepts six parameters.</p>
+<p>Each letter is a command. There are four commands: <code>t</code> is for translate, <code>r</code> is for rotate, <code>s</code> is for
+scale and <code>m</code> is for matrix.
+</p>
+<p>So, example line could be read like “translate by 100, 100, rotate 30° around 100, 100, scale twice around 100, 100
+rotate 45° around centre and scale 1.5 times relative to centre”. As you see rotate and scale commands has origin
+coordinates as a optional parameters.
+Matrix accepts six parameters.
+</p>
+<p class="header">Usage
+</p>
+<pre class="javascript code"><code><b>var</b> el<span class="s"> = </span>paper.rect(<span class="d">10</span>, <span class="d">20</span>, <span class="d">300</span>, <span class="d">200</span>);
+<span class="c">// translate <span class="d">100</span>, <span class="d">100</span>, rotate <span class="d">45</span>°, translate -<span class="d">100</span>, <span class="d">0</span></span>
+el.transform(<i>"t100,100r45t-<span class="d">100</span>,<span class="d">0</span>"</i>);
+<span class="c">// <b>if</b> you want you can append or prepend transformations</span>
+el.transform(<i>"...t50,<span class="d">50</span>"</i>);
+el.transform(<i>"s2..."</i>);
+<span class="c">// or even wrap</span>
+el.transform(<i>"t50,<span class="d">50</span>...t-<span class="d">50</span>-<span class="d">50</span>"</i>);
+<span class="c">// to reset transformation call method <b>with</b> empty string</span>
+el.transform(<i>""</i>);
+<span class="c">// to get current value call it without parameters</span>
+console.log(el.transform());
+</code></pre>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param optional">tstr</dt>
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
<dd class="dr-description">transformation string</dd>
</dl>
-<p>If tstr isn’t specified</p>
+<p>If tstr isn’t specified
+</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">current transformation string</span></p>
-<p>else</p>
+<p>else
+</p>
<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><h3 id="Element.translate" class="dr-method">Element.translate(dx, dy)<a href="#Element.translate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2433">➭</a></h3>
-<div class="dr-method"><p>Adds translation by given amount to the list of transformations of the element.</p>
+</div><h3 id="Element.translate" class="dr-method">Element.translate(dx, dy)<a href="#Element.translate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2509">➭</a></h3>
+<div class="dr-method"><p>Adds translation by given amount to the list of transformations of the element.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">dx</dt>
<dd class="dr-description">vertical shift</dd>
</dl>
<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><h3 id="Element.undrag" class="dr-method">Element.undrag()<a href="#Element.undrag" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4187">➭</a></h3>
+<div class="dr-method"><p>Removes all drag event handlers from given element.
+</p>
+</div><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">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4118">➭</a></h3>
+<div class="dr-method"><p>Removes event handlers for hover for the element.
+</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">f_in</dt>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">handler for hover in</dd>
+<dt class="dr-param">f_out</dt>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">handler for hover out</dd>
+</dl>
+<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><h2 id="Paper" class="undefined">Paper<a href="#Paper" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#Lundefined">➭</a></h2>
-<h3 id="Paper.bottom" class="dr-property">Paper.bottom<a href="#Paper.bottom" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4065">➭</a></h3>
-<div class="dr-property"><p>Points to the bottom element on the paper</p>
-</div><h3 id="Paper.circle" class="dr-method">Paper.circle(x, y, r)<a href="#Paper.circle" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3905">➭</a></h3>
-<div class="dr-method"><p>Draws a circle.</p>
+<h3 id="Paper.bottom" class="dr-property">Paper.bottom<a href="#Paper.bottom" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4388">➭</a></h3>
+<div class="dr-property"><p>Points to the bottom element on the paper
+</p>
+</div><h3 id="Paper.circle" class="dr-method">Paper.circle(x, y, r)<a href="#Paper.circle" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4212">➭</a></h3>
+<div class="dr-method"><p>Draws a circle.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">x</dt>
</p>
<pre class="javascript code"><code><b>var</b> c<span class="s"> = </span>paper.circle(<span class="d">50</span>, <span class="d">50</span>, <span class="d">40</span>);
</code></pre>
-</div><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">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3949">➭</a></h3>
-<div class="dr-method"><p>Draws an ellipse.</p>
+</div><h3 id="Paper.clear" class="dr-method">Paper.clear()<a href="#Paper.clear" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2991">➭</a></h3>
+<div class="dr-method"><p>Clears the paper, i.e. removes all the elements.
+</p>
+</div><h3 id="Paper.customAttributes" class="dr-property">Paper.customAttributes<a href="#Paper.customAttributes" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L260">➭</a></h3>
+<div class="dr-property"><em class="dr-type dr-type-object">object</em><p>If you have a set of attributes that you would like to represent
+as a function of some number you can do it easily with custom attributes:
+</p>
+<p class="header">Usage
+</p>
+<pre class="javascript code"><code>paper.customAttributes.hue<span class="s"> = </span><b>function</b> (num) {
+ num<span class="s"> = </span>num<span class="s"> % </span><span class="d">1</span>;
+ <b>return</b> {fill: <i>"hsb("</i><span class="s"> + </span>num<span class="s"> + </span><i>", <span class="d">.75</span>, <span class="d">1</span>)"</i>};
+};
+<span class="c">// Custom attribute “hue” will change fill</span>
+<span class="c">// to be given hue <b>with</b> fixed saturation and brightness.</span>
+<span class="c">// Now you can use it like <b>this</b>:</span>
+<b>var</b> c<span class="s"> = </span>paper.circle(<span class="d">10</span>, <span class="d">10</span>, <span class="d">10</span>).attr({hue: <span class="d">.45</span>});
+<span class="c">// or even like <b>this</b>:</span>
+c.animate({hue: <span class="d">1</span>}, <span class="d">1e3</span>);
+
+<span class="c">// You could also create custom attribute</span>
+<span class="c">// <b>with</b> multiple parameters:</span>
+paper.customAttributes.hsb<span class="s"> = </span><b>function</b> (h, s, b) {
+ <b>return</b> {fill: <i>"hsb("</i><span class="s"> + </span>[h, s, b].join(<i>","</i>)<span class="s"> + </span><i>")"</i>};
+};
+c.attr({hsb: <i>"<span class="d">.5</span> <span class="d">.8</span> <span class="d">1</span>"</i>});
+c.animate({hsb: <i>"<span class="d">1</span> <span class="d">0</span> <span class="d">.5</span>"</i>}, <span class="d">1e3</span>);
+</code></pre>
+</div><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">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4256">➭</a></h3>
+<div class="dr-method"><p>Draws an ellipse.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">x</dt>
</p>
<pre class="javascript code"><code><b>var</b> c<span class="s"> = </span>paper.ellipse(<span class="d">50</span>, <span class="d">50</span>, <span class="d">40</span>, <span class="d">20</span>);
</code></pre>
-</div><h3 id="Paper.forEach" class="dr-method">Paper.forEach(callback, thisArg)<a href="#Paper.forEach" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4160">➭</a></h3>
-<div class="dr-method"><p>Executes given function for each element on the paper</p>
-<p>If function returns <code>false</code> it will stop loop running.</p>
+</div><h3 id="Paper.forEach" class="dr-method">Paper.forEach(callback, thisArg)<a href="#Paper.forEach" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4483">➭</a></h3>
+<div class="dr-method"><p>Executes given function for each element on the paper
+</p>
+<p>If function returns <code>false</code> it will stop loop running.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">callback</dt>
<dd class="dr-description">context object for the callback</dd>
</dl>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Paper object</span></p>
-</div><h3 id="Paper.getById" class="dr-method">Paper.getById(id)<a href="#Paper.getById" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4136">➭</a></h3>
-<div class="dr-method"><p>Returns you element by it’s internal ID.</p>
+</div><h3 id="Paper.getById" class="dr-method">Paper.getById(id)<a href="#Paper.getById" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4459">➭</a></h3>
+<div class="dr-method"><p>Returns you element by it’s internal ID.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">id</dt>
<dd class="dr-description">id</dd>
</dl>
<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</span></p>
-</div><h3 id="Paper.getElementByPoint" class="dr-method">Paper.getElementByPoint(x, y)<a href="#Paper.getElementByPoint" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4100">➭</a></h3>
-<div class="dr-method"><p>Returns you topmost element under given point.</p>
+</div><h3 id="Paper.getElementByPoint" class="dr-method">Paper.getElementByPoint(x, y)<a href="#Paper.getElementByPoint" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4423">➭</a></h3>
+<div class="dr-method"><p>Returns you topmost element under given point.
+</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object</span></p>
<p class="header">Parameters
</p>
</p>
<pre class="javascript code"><code>paper.getElementByPoint(mouseX, mouseY).attr({stroke: <i>"#f00"</i>});
</code></pre>
-</div><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">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3991">➭</a></h3>
-<div class="dr-method"><p>Embeds an image into the surface.</p>
+</div><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">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4298">➭</a></h3>
+<div class="dr-method"><p>Embeds an image into the surface.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">src</dt>
</p>
<pre class="javascript code"><code><b>var</b> c<span class="s"> = </span>paper.image(<i>"apple.png"</i>, <span class="d">10</span>, <span class="d">10</span>, <span class="d">80</span>, <span class="d">80</span>);
</code></pre>
-</div><h3 id="Paper.path" class="dr-method">Paper.path(pathString)<a href="#Paper.path" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3969">➭</a></h3>
-<div class="dr-method"><p>Creates a path element by given path data string.</p>
+</div><h3 id="Paper.path" class="dr-method">Paper.path(pathString)<a href="#Paper.path" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4276">➭</a></h3>
+<div class="dr-method"><p>Creates a path element by given path data string.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">pathString</dt>
<span class="c">// draw a diagonal line:</span>
<span class="c">// move to <span class="d">10</span>,<span class="d">10</span>, line to <span class="d">90</span>,<span class="d">90</span></span>
</code></pre>
-</div><h3 id="Paper.raphael" class="dr-property">Paper.raphael<a href="#Paper.raphael" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4072">➭</a></h3>
-<div class="dr-property"><p>Points to the <a href="#Raphael" class="dr-link">Raphael</a> object/function</p>
-</div><h3 id="Paper.rect" class="dr-method">Paper.rect(x, y, width, height, r)<a href="#Paper.rect" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3929">➭</a></h3>
+</div><h3 id="Paper.raphael" class="dr-property">Paper.raphael<a href="#Paper.raphael" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4395">➭</a></h3>
+<div class="dr-property"><p>Points to the <a href="#Raphael" class="dr-link">Raphael</a> object/function
+</p>
+</div><h3 id="Paper.rect" class="dr-method">Paper.rect(x, y, width, height, r)<a href="#Paper.rect" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4236">➭</a></h3>
<div class="dr-method"><p></p>
-<p>Draws a rectangle.</p>
+<p>Draws a rectangle.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">x</dt>
<span class="c">// rectangle <b>with</b> rounded corners</span>
<b>var</b> c<span class="s"> = </span>paper.rect(<span class="d">40</span>, <span class="d">40</span>, <span class="d">50</span>, <span class="d">50</span>, <span class="d">10</span>);
</code></pre>
-</div><h3 id="Paper.set" class="dr-method">Paper.set()<a href="#Paper.set" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4029">➭</a></h3>
-<div class="dr-method"><p>Creates array-like object to keep and operate couple of elements at once.Warning: it doesn’t create any elements for itself in the page.</p>
+</div><h3 id="Paper.remove" class="dr-method">Paper.remove()<a href="#Paper.remove" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3008">➭</a></h3>
+<div class="dr-method"><p>Removes the paper from the DOM.
+</p>
+</div><h3 id="Paper.safari" class="dr-method">Paper.safari(f_in, f_out, [icontext], [ocontext])<a href="#Paper.safari" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3956">➭</a></h3>
+<div class="dr-method"><p>Adds event handlers for hover for the element.
+</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">f_in</dt>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">handler for hover in</dd>
+<dt class="dr-param">f_out</dt>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">handler for hover out</dd>
+<dt class="dr-param optional">icontext</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">context for hover in handler</dd>
+<dt class="dr-param optional">ocontext</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">context for hover out handler</dd>
+</dl>
+<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><h3 id="Paper.set" class="dr-method">Paper.set()<a href="#Paper.set" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4336">➭</a></h3>
+<div class="dr-method"><p>Creates array-like object to keep and operate couple of elements at once.
+Warning: it doesn’t create any elements for itself in the page.
+</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">array-like object that represents set of elements</span></p>
<p class="header">Usage
</p>
);
st.attr({fill: <i>"red"</i>});
</code></pre>
-</div><h3 id="Paper.setSize" class="dr-method">Paper.setSize(width, height)<a href="#Paper.setSize" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4051">➭</a></h3>
-<div class="dr-method"><p>If you need to change dimensions of the canvas call this method</p>
+</div><h3 id="Paper.setSize" class="dr-method">Paper.setSize(width, height)<a href="#Paper.setSize" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4358">➭</a></h3>
+<div class="dr-method"><p>If you need to change dimensions of the canvas call this method
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">width</dt>
);
st.attr({fill: <i>"red"</i>});
</code></pre>
-</div><h3 id="Paper.text" class="dr-method">Paper.text(x, y, text)<a href="#Paper.text" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4010">➭</a></h3>
-<div class="dr-method"><p>Draws a text string. If you need line breaks, put “\n” in the string.</p>
+</div><h3 id="Paper.setViewBox" class="dr-method">Paper.setViewBox(x, y, w, h, fit)<a href="#Paper.setViewBox" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4375">➭</a></h3>
+<div class="dr-method"><p>Sets the view box of the paper. Practically it gives you ability to zoom and pan whole paper surface by
+specifying new boundaries.
+</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">x</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">new x position, default is <code>0</code></dd>
+<dt class="dr-param">y</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">new y position, default is <code>0</code></dd>
+<dt class="dr-param">w</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">new width of the canvas</dd>
+<dt class="dr-param">h</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">new height of the canvas</dd>
+<dt class="dr-param">fit</dt>
+<dd class="dr-type"><em class="dr-type-boolean">boolean</em></dd>
+<dd class="dr-description"><code>true</code> if you want graphics to fit into new boundary box</dd>
+</dl>
+</div><h3 id="Paper.text" class="dr-method">Paper.text(x, y, text)<a href="#Paper.text" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4317">➭</a></h3>
+<div class="dr-method"><p>Draws a text string. If you need line breaks, put “\n” in the string.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">x</dt>
</p>
<pre class="javascript code"><code><b>var</b> t<span class="s"> = </span>paper.text(<span class="d">50</span>, <span class="d">50</span>, <i>"Raphaël\nkicks\nbutt!"</i>);
</code></pre>
-</div><h3 id="Paper.top" class="dr-property">Paper.top<a href="#Paper.top" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4059">➭</a></h3>
-<div class="dr-property"><p>Points to the topmost element on the paper</p>
+</div><h3 id="Paper.top" class="dr-property">Paper.top<a href="#Paper.top" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4382">➭</a></h3>
+<div class="dr-property"><p>Points to the topmost element on the paper
+</p>
</div><h2 id="Raphael" class="dr-method">Raphael(…)<a href="#Raphael" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L55">➭</a></h2>
-<div class="dr-method"><p>Creates a canvas object on which to draw.You must do this first, as all future calls to drawing methodsfrom this instance will be bound to this canvas.</p>
+<div class="dr-method"><p>Creates a canvas object on which to draw.
+You must do this first, as all future calls to drawing methods
+from this instance will be bound to this canvas.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">container</dt>
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
<dd class="dr-description"> </dd>
</dl>
-<p>or</p>
+<p>or
+</p>
<dl class="dr-parameters"><dt class="dr-param">x</dt>
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
<dd class="dr-description"> </dd>
<dd class="dr-type"><em class="dr-type-number">number</em></dd>
<dd class="dr-description"> </dd>
</dl>
-<p>or</p>
+<p>or
+</p>
<dl class="dr-parameters"><dt class="dr-param">all</dt>
<dd class="dr-type"><em class="dr-type-array">array</em></dd>
<dd class="dr-description">(first 3 or 4 elements in the array are equal to [containerID, width, height] or [x, y, width, height]. The rest are element descriptions in format {type: type, <attributes>})</dd>
</dl>
-<p>or</p>
+<p>or
+</p>
<dl class="dr-parameters"><dt class="dr-param">onReadyCallback</dt>
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
<dd class="dr-description">function that is going to be called on DOM ready event. You can also subscribe to this event via Eve’s “DOMLoad” event. In this case method returns <code>undefined</code>.</dd>
text: <i>"Dump"</i>
}]);
</code></pre>
-</div><h3 id="Raphael.angle" class="dr-method">Raphael.angle(x1, y1, x2, y2, [x3], [y3])<a href="#Raphael.angle" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L298">➭</a></h3>
-<div class="dr-method"><p>Returns angle between two or three points</p>
+</div><h3 id="Raphael.angle" class="dr-method">Raphael.angle(x1, y1, x2, y2, [x3], [y3])<a href="#Raphael.angle" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L324">➭</a></h3>
+<div class="dr-method"><p>Returns angle between two or three points
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">x1</dt>
<dd class="dr-description">y coord of third point</dd>
</dl>
<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><h3 id="Raphael.animation" class="dr-method">Raphael.animation(params, ms, [easing], [callback])<a href="#Raphael.animation" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4990">➭</a></h3>
-<div class="dr-method"><p>Creates animation object. That later could be used for <a href="#Element.animate" class="dr-link">Element.animate</a> or <a href="#Element.animateWith" class="dr-link">Element.animateWith</a> methods.See also <a href="#Animation.delay" class="dr-link">Animation.delay</a> and <a href="#Animation.repeat" class="dr-link">Animation.repeat</a> methods.</p>
+</div><h3 id="Raphael.animation" class="dr-method">Raphael.animation(params, ms, [easing], [callback])<a href="#Raphael.animation" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5330">➭</a></h3>
+<div class="dr-method"><p>Creates animation object. That later could be used for <a href="#Element.animate" class="dr-link">Element.animate</a> or <a href="#Element.animateWith" class="dr-link">Element.animateWith</a> methods.
+See also <a href="#Animation.delay" class="dr-link">Animation.delay</a> and <a href="#Animation.repeat" class="dr-link">Animation.repeat</a> methods.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">params</dt>
<dt class="dr-param optional">easing</dt>
<dd class="dr-optional">optional</dd>
<dd class="dr-type"><em class="dr-type-string">string</em></dd>
-<dd class="dr-description">easing type. Accept one of <a href="#Raphael.easing_formulas" class="dr-link">Raphael.easing_formulas</a> or CSS format: <code>cubic-bezier(XX, XX, XX, XX)</code></dd>
+<dd class="dr-description">easing type. Accept one of <a href="#Raphael.easing_formulas" class="dr-link">Raphael.easing_formulas</a> or CSS format: <code>cubic‐bezier(XX, XX, XX, XX)</code></dd>
<dt class="dr-param optional">callback</dt>
<dd class="dr-optional">optional</dd>
<dd class="dr-type"><em class="dr-type-function">function</em></dd>
<dd class="dr-description">callback function. Will be called at the end of animation.</dd>
</dl>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Animation" class="dr-link">Animation</a></span></p>
-</div><h3 id="Raphael.deg" class="dr-method">Raphael.deg(deg)<a href="#Raphael.deg" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L331">➭</a></h3>
-<div class="dr-method"><p>Transform angle to degrees</p>
+</div><h3 id="Raphael.deg" class="dr-method">Raphael.deg(deg)<a href="#Raphael.deg" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L357">➭</a></h3>
+<div class="dr-method"><p>Transform angle to degrees
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">deg</dt>
<dd class="dr-description">angle in radians</dd>
</dl>
<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><h3 id="Raphael.easing_formulas" class="dr-property">Raphael.easing_formulas<a href="#Raphael.easing_formulas" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4466">➭</a></h3>
-<div class="dr-property"><p>Object that contains easing formulas for animation. You could extend it with your owns. By default it has following list of easing:</p>
+</div><h3 id="Raphael.easing_formulas" class="dr-property">Raphael.easing_formulas<a href="#Raphael.easing_formulas" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4789">➭</a></h3>
+<div class="dr-property"><p>Object that contains easing formulas for animation. You could extend it with your owns. By default it has following list of easing:
+</p>
<ul>
<li>“linear”</li>
<li>“<” or “easeIn” or “ease-in”</li>
<li>“bounce”</li>
</ul>
<p>See also <a href="http://raphaeljs.com/easing.html">Easing demo</a>.</p>
-</div><h3 id="Raphael.findDotsAtSegment" class="dr-method">Raphael.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t)<a href="#Raphael.findDotsAtSegment" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L940">➭</a></h3>
-<div class="dr-method"><p>Utility methodFind dot coordinates on the given cubic bezier curve at the given t.</p>
+</div><h3 id="Raphael.el" class="dr-property">Raphael.el<a href="#Raphael.el" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5777">➭</a></h3>
+<div class="dr-property"><em class="dr-type dr-type-object">object</em><p>You can add your own method to elements. This is usefull when you want to hack default functionality or
+want to wrap some common transformation or attributes in one method. In difference to canvas methods,
+you can redefine element method at any time. Expending element methods wouldn’t affect set
+</p>
+<p class="header">Usage
+</p>
+<pre class="javascript code"><code>Raphael.el.red<span class="s"> = </span><b>function</b> () {
+ <b>this</b>.attr({fill: <i>"#f00"</i>});
+};
+<span class="c">// then use it</span>
+paper.circle(<span class="d">100</span>, <span class="d">100</span>, <span class="d">20</span>).red();
+</code></pre>
+</div><h3 id="Raphael.findDotsAtSegment" class="dr-method">Raphael.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t)<a href="#Raphael.findDotsAtSegment" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L966">➭</a></h3>
+<div class="dr-method"><p>Utility method
+Find dot coordinates on the given cubic bezier curve at the given t.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">p1x</dt>
<dd class="dr-description">position on the curve (0..1)</dd>
</dl>
<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>
-<pre class="javascript code"><code>{
- x: <span class="c">// x coordinate of the point,</span>
- y: <span class="c">// y coordinate of the point,</span>
- m: {
- x: <span class="c">// x coordinate of the left anchor,</span>
- y: <span class="c">// y coordinate of the left anchor</span>
- },
- n: {
- x: <span class="c">// x coordinate of the right anchor,</span>
- y: <span class="c">// y coordinate of the right anchor</span>
- },
- start: {
- x: <span class="c">// x coordinate of the start of the curve,</span>
- y: <span class="c">// y coordinate of the start of the curve</span>
- },
- end: {
- x: <span class="c">// x coordinate of the end of the curve,</span>
- y: <span class="c">// y coordinate of the end of the curve</span>
- },
- alpha: <span class="c">// angle of the curve derivative at the point.</span>
-}
-</code></pre>
-</div><h3 id="Raphael.fn" class="dr-property">Raphael.fn<a href="#Raphael.fn" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L262">➭</a></h3>
-<div class="dr-property"><em class="dr-type dr-type-object">object</em><p>You can add your own method to the canvas. For example if you want to draw pie chart,you can create your own pie chart function and ship it as a Raphaël plugin. To do thisyou need to extend <code>Raphael.fn</code> object. Please note that you can create your own namespacesinside <code>fn</code> object. Methods will be run in context of canvas anyway. You should alter <code>fn</code>object before Raphaël instance was created, otherwise it will take no effect.</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><h3 id="Raphael.fn" class="dr-property">Raphael.fn<a href="#Raphael.fn" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L288">➭</a></h3>
+<div class="dr-property"><em class="dr-type dr-type-object">object</em><p>You can add your own method to the canvas. For example if you want to draw pie chart,
+you can create your own pie chart function and ship it as a Raphaël plugin. To do this
+you need to extend <code>Raphael.fn</code> object. Please note that you can create your own namespaces
+inside <code>fn</code> object. Methods will be run in context of canvas anyway. You should alter <code>fn</code>
+object before Raphaël instance was created, otherwise it will take no effect.
+</p>
<p class="header">Usage
</p>
<pre class="javascript code"><code>Raphael.fn.arrow<span class="s"> = </span><b>function</b> (x1, y1, x2, y2, size) {
paper.mystuff.arrow();
paper.mystuff.star();
</code></pre>
-</div><h3 id="Raphael.getColor" class="dr-method">Raphael.getColor([value])<a href="#Raphael.getColor" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L803">➭</a></h3>
-<div class="dr-method"><p>On each call returns next colour in the spectrum. To reset it back to red call <a href="#Raphael.getColor.reset" class="dr-link">Raphael.getColor.reset</a></p>
+</div><h3 id="Raphael.getColor" class="dr-method">Raphael.getColor([value])<a href="#Raphael.getColor" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L829">➭</a></h3>
+<div class="dr-method"><p>On each call returns next colour in the spectrum. To reset it back to red call <a href="#Raphael.getColor.reset" class="dr-link">Raphael.getColor.reset</a>
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param optional">value</dt>
<dd class="dr-description">brightness, default is <code>0.75</code></dd>
</dl>
<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><h4 id="Raphael.getColor.reset" class="dr-method">Raphael.getColor.reset()<a href="#Raphael.getColor.reset" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L820">➭</a></h4>
-<div class="dr-method"><p>Resets spectrum position for <a href="#Raphael.getColor" class="dr-link">Raphael.getColor</a> back to red.</p>
-</div><h3 id="Raphael.getPointAtLength" class="dr-method">Raphael.getPointAtLength(path, length)<a href="#Raphael.getPointAtLength" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4375">➭</a></h3>
-<div class="dr-method"><p>Return coordinates of the point located at the given length on the given path.</p>
+</div><h4 id="Raphael.getColor.reset" class="dr-method">Raphael.getColor.reset()<a href="#Raphael.getColor.reset" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L846">➭</a></h4>
+<div class="dr-method"><p>Resets spectrum position for <a href="#Raphael.getColor" class="dr-link">Raphael.getColor</a> back to red.
+</p>
+</div><h3 id="Raphael.getPointAtLength" class="dr-method">Raphael.getPointAtLength(path, length)<a href="#Raphael.getPointAtLength" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4698">➭</a></h3>
+<div class="dr-method"><p>Return coordinates of the point located at the given length on the given path.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">path</dt>
<dd class="dr-description"> </dd>
</dl>
<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>
-<pre class="javascript code"><code>{
- x: <span class="c">//x coordinate,</span>
- y: <span class="c">//y coordinate,</span>
- alpha: <span class="c">//angle of derivative</span>
-}
-</code></pre>
-</div><h3 id="Raphael.getRGB" class="dr-method">Raphael.getRGB(colour)<a href="#Raphael.getRGB" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L681">➭</a></h3>
-<div class="dr-method"><p>Parses colour string as RGB object</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><h3 id="Raphael.getRGB" class="dr-method">Raphael.getRGB(colour)<a href="#Raphael.getRGB" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L707">➭</a></h3>
+<div class="dr-method"><p>Parses colour string as RGB object
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">colour</dt>
<dd class="dr-description">colour string in one of formats:</dd>
</dl>
<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>
-<pre class="javascript code"><code>{
- r: <span class="c">// red,</span>
- g: <span class="c">// green,</span>
- b: <span class="c">// blue</span>
- hex: <span class="c">// color <b>in</b> HTML/CSS format: #••••••,</span>
- error: <span class="c">// <b>true</b> <b>if</b> string can’t be parsed</span>
-}
-</code></pre>
-</div><h3 id="Raphael.getSubpath" class="dr-method">Raphael.getSubpath(path, from, to)<a href="#Raphael.getSubpath" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4390">➭</a></h3>
-<div class="dr-method"><p>Return subpath of a given path from given length to given length.</p>
+<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">r</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">red,</span>
+<li><span class="dr-json-key">g</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">green,</span>
+<li><span class="dr-json-key">b</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">blue</span>
+<li><span class="dr-json-key">hex</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">color in HTML/CSS format: #••••••,</span>
+<li><span class="dr-json-key">error</span><span class="dr-type"><em class="dr-type-boolean">boolean</em></span><span class="dr-json-description">true if string can’t be parsed</span>
+</ol></li><li>}</li></ol>
+</div><h3 id="Raphael.getSubpath" class="dr-method">Raphael.getSubpath(path, from, to)<a href="#Raphael.getSubpath" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4713">➭</a></h3>
+<div class="dr-method"><p>Return subpath of a given path from given length to given length.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">path</dt>
<dd class="dr-description">position of the end of the segment</dd>
</dl>
<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><h3 id="Raphael.getTotalLength" class="dr-method">Raphael.getTotalLength(path)<a href="#Raphael.getTotalLength" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4356">➭</a></h3>
-<div class="dr-method"><p>Returns length of the given path in pixels.</p>
+</div><h3 id="Raphael.getTotalLength" class="dr-method">Raphael.getTotalLength(path)<a href="#Raphael.getTotalLength" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4679">➭</a></h3>
+<div class="dr-method"><p>Returns length of the given path in pixels.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">path</dt>
<dd class="dr-description">SVG path string.</dd>
</dl>
<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><h3 id="Raphael.hsb" class="dr-method">Raphael.hsb(h, s, b)<a href="#Raphael.hsb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L763">➭</a></h3>
-<div class="dr-method"><p>Converts HSB values to hex representation of the colour.</p>
+</div><h3 id="Raphael.hsb" class="dr-method">Raphael.hsb(h, s, b)<a href="#Raphael.hsb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L789">➭</a></h3>
+<div class="dr-method"><p>Converts HSB values to hex representation of the colour.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">h</dt>
<dd class="dr-description">value or brightness</dd>
</dl>
<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><h3 id="Raphael.hsb2rgb" class="dr-method">Raphael.hsb2rgb(h, s, v)<a href="#Raphael.hsb2rgb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L488">➭</a></h3>
-<div class="dr-method"><p>Converts HSB values to RGB object.</p>
+</div><h3 id="Raphael.hsb2rgb" class="dr-method">Raphael.hsb2rgb(h, s, v)<a href="#Raphael.hsb2rgb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L514">➭</a></h3>
+<div class="dr-method"><p>Converts HSB values to RGB object.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">h</dt>
<dd class="dr-description">value or brightness</dd>
</dl>
<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>
-<pre class="javascript code"><code>{
- r: <span class="c">// red,</span>
- g: <span class="c">// green,</span>
- b: <span class="c">// blue</span>
- hex: <span class="c">// color <b>in</b> HTML/CSS format: #••••••</span>
-}
-</code></pre>
-</div><h3 id="Raphael.hsl" class="dr-method">Raphael.hsl(h, s, l)<a href="#Raphael.hsl" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L777">➭</a></h3>
-<div class="dr-method"><p>Converts HSL values to hex representation of the colour.</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><h3 id="Raphael.hsl" class="dr-method">Raphael.hsl(h, s, l)<a href="#Raphael.hsl" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L803">➭</a></h3>
+<div class="dr-method"><p>Converts HSL values to hex representation of the colour.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">h</dt>
<dd class="dr-description">luminosity</dd>
</dl>
<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><h3 id="Raphael.hsl2rgb" class="dr-method">Raphael.hsl2rgb(h, s, l)<a href="#Raphael.hsl2rgb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L525">➭</a></h3>
-<div class="dr-method"><p>Converts HSL values to RGB object.</p>
+</div><h3 id="Raphael.hsl2rgb" class="dr-method">Raphael.hsl2rgb(h, s, l)<a href="#Raphael.hsl2rgb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L551">➭</a></h3>
+<div class="dr-method"><p>Converts HSL values to RGB object.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">h</dt>
<dd class="dr-description">luminosity</dd>
</dl>
<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>
-<pre class="javascript code"><code>{
- r: <span class="c">// red,</span>
- g: <span class="c">// green,</span>
- b: <span class="c">// blue</span>
- hex: <span class="c">// color <b>in</b> HTML/CSS format: #••••••</span>
-}
-</code></pre>
-</div><h3 id="Raphael.is" class="dr-method">Raphael.is(o, type)<a href="#Raphael.is" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L273">➭</a></h3>
-<div class="dr-method"><p>Handfull replacement for <code>typeof</code> operator.</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><h3 id="Raphael.is" class="dr-method">Raphael.is(o, type)<a href="#Raphael.is" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L299">➭</a></h3>
+<div class="dr-method"><p>Handfull replacement for <code>typeof</code> operator.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">o</dt>
<dd class="dr-description">name of the type, i.e. “string”, “function”, “number”, etc.</dd>
</dl>
<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><h3 id="Raphael.parsePathString" class="dr-method">Raphael.parsePathString(pathString)<a href="#Raphael.parsePathString" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L835">➭</a></h3>
-<div class="dr-method"><p>Utility methodParses given path string into an array of arrays of path segments.</p>
+</div><h3 id="Raphael.parsePathString" class="dr-method">Raphael.parsePathString(pathString)<a href="#Raphael.parsePathString" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L861">➭</a></h3>
+<div class="dr-method"><p>Utility method
+Parses given path string into an array of arrays of path segments.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">pathString</dt>
<dd class="dr-description">path string or array of segments (in the last case it will be returned stright away)</dd>
</dl>
<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><h3 id="Raphael.parseTransformString" class="dr-method">Raphael.parseTransformString(TString)<a href="#Raphael.parseTransformString" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L878">➭</a></h3>
-<div class="dr-method"><p>Utility methodParses given path string into an array of transformations.</p>
+</div><h3 id="Raphael.parseTransformString" class="dr-method">Raphael.parseTransformString(TString)<a href="#Raphael.parseTransformString" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L904">➭</a></h3>
+<div class="dr-method"><p>Utility method
+Parses given path string into an array of transformations.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">TString</dt>
<dd class="dr-description">transform string or array of transformations (in the last case it will be returned stright away)</dd>
</dl>
<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><h3 id="Raphael.path2curve" class="dr-method">Raphael.path2curve(pathString)<a href="#Raphael.path2curve" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L1659">➭</a></h3>
-<div class="dr-method"><p>Utility methodConverts path to path where all segments are cubic bezier curves.</p>
+</div><h3 id="Raphael.path2curve" class="dr-method">Raphael.path2curve(pathString)<a href="#Raphael.path2curve" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L1683">➭</a></h3>
+<div class="dr-method"><p>Utility method
+Converts path to path where all segments are cubic bezier curves.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">pathString</dt>
<dd class="dr-description">path string or array of segments</dd>
</dl>
<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><h3 id="Raphael.pathToRelative" class="dr-method">Raphael.pathToRelative(pathString)<a href="#Raphael.pathToRelative" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L1647">➭</a></h3>
-<div class="dr-method"><p>Utility methodConverts path to relative form</p>
+</div><h3 id="Raphael.pathToRelative" class="dr-method">Raphael.pathToRelative(pathString)<a href="#Raphael.pathToRelative" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L1671">➭</a></h3>
+<div class="dr-method"><p>Utility method
+Converts path to relative form
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">pathString</dt>
<dd class="dr-description">path string or array of segments</dd>
</dl>
<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><h3 id="Raphael.rad" class="dr-method">Raphael.rad(deg)<a href="#Raphael.rad" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L319">➭</a></h3>
-<div class="dr-method"><p>Transform angle to radians</p>
+</div><h3 id="Raphael.rad" class="dr-method">Raphael.rad(deg)<a href="#Raphael.rad" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L345">➭</a></h3>
+<div class="dr-method"><p>Transform angle to radians
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">deg</dt>
<dd class="dr-description">angle in degrees</dd>
</dl>
<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><h3 id="Raphael.rgb" class="dr-method">Raphael.rgb(r, g, b)<a href="#Raphael.rgb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L791">➭</a></h3>
-<div class="dr-method"><p>Converts RGB values to hex representation of the colour.</p>
+</div><h3 id="Raphael.rgb" class="dr-method">Raphael.rgb(r, g, b)<a href="#Raphael.rgb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L817">➭</a></h3>
+<div class="dr-method"><p>Converts RGB values to hex representation of the colour.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">r</dt>
<dd class="dr-description">blue</dd>
</dl>
<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><h3 id="Raphael.rgb2hsb" class="dr-method">Raphael.rgb2hsb(r, g, b)<a href="#Raphael.rgb2hsb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L565">➭</a></h3>
-<div class="dr-method"><p>Converts RGB values to HSB object.</p>
+</div><h3 id="Raphael.rgb2hsb" class="dr-method">Raphael.rgb2hsb(r, g, b)<a href="#Raphael.rgb2hsb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L591">➭</a></h3>
+<div class="dr-method"><p>Converts RGB values to HSB object.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">r</dt>
<dd class="dr-description">blue</dd>
</dl>
<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>
-<pre class="javascript code"><code>{
- h: <span class="c">// hue,</span>
- s: <span class="c">// saturation,</span>
- b: <span class="c">// brightness</span>
-}
-</code></pre>
-</div><h3 id="Raphael.rgb2hsl" class="dr-method">Raphael.rgb2hsl(r, g, b)<a href="#Raphael.rgb2hsl" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L598">➭</a></h3>
-<div class="dr-method"><p>Converts RGB values to HSL object.</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><h3 id="Raphael.rgb2hsl" class="dr-method">Raphael.rgb2hsl(r, g, b)<a href="#Raphael.rgb2hsl" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L624">➭</a></h3>
+<div class="dr-method"><p>Converts RGB values to HSL object.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">r</dt>
<dd class="dr-description">blue</dd>
</dl>
<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>
-<pre class="javascript code"><code>{
- h: <span class="c">// hue,</span>
- s: <span class="c">// saturation,</span>
- l: <span class="c">// luminosity</span>
-}
-</code></pre>
-</div><h3 id="Raphael.setWindow" class="dr-method">Raphael.setWindow(newwin)<a href="#Raphael.setWindow" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L383">➭</a></h3>
-<div class="dr-method"><p>Used when you need to draw in <code><iframe></code>. Switched window to the iframe one.</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><h3 id="Raphael.setWindow" class="dr-method">Raphael.setWindow(newwin)<a href="#Raphael.setWindow" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L409">➭</a></h3>
+<div class="dr-method"><p>Used when you need to draw in <code><iframe></code>. Switched window to the iframe one.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">newwin</dt>
<dd class="dr-type"><em class="dr-type-window">window</em></dd>
<dd class="dr-description">new window object</dd>
</dl>
-</div><h3 id="Raphael.snapTo" class="dr-method">Raphael.snapTo(values, value, [tolerance])<a href="#Raphael.snapTo" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L345">➭</a></h3>
-<div class="dr-method"><p>Snaps given value to given grid.</p>
+</div><h3 id="Raphael.snapTo" class="dr-method">Raphael.snapTo(values, value, [tolerance])<a href="#Raphael.snapTo" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L371">➭</a></h3>
+<div class="dr-method"><p>Snaps given value to given grid.
+</p>
<p class="header">Parameters
</p>
<dl class="dr-parameters"><dt class="dr-param">values</dt>
</dl>
<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><h3 id="Raphael.svg" class="dr-property">Raphael.svg<a href="#Raphael.svg" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L226">➭</a></h3>
-<div class="dr-property"><em class="dr-type dr-type-boolean">boolean</em><p><code>true</code> if browser supports SVG.</p>
+<div class="dr-property"><em class="dr-type dr-type-boolean">boolean</em><p><code>true</code> if browser supports SVG.
+</p>
</div><h3 id="Raphael.type" class="dr-property">Raphael.type<a href="#Raphael.type" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L208">➭</a></h3>
-<div class="dr-property"><em class="dr-type dr-type-string">string</em><p>Can be “SVG”, “VML” or empty, depending on browser support.</p>
+<div class="dr-property"><em class="dr-type dr-type-string">string</em><p>Can be “SVG”, “VML” or empty, depending on browser support.
+</p>
</div><h3 id="Raphael.vml" class="dr-property">Raphael.vml<a href="#Raphael.vml" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L232">➭</a></h3>
-<div class="dr-property"><em class="dr-type dr-type-boolean">boolean</em><p><code>true</code> if browser supports VML.</p>
-</div></div></body></html>
\ No newline at end of file
+<div class="dr-property"><em class="dr-type dr-type-boolean">boolean</em><p><code>true</code> if browser supports VML.
+</p>
+</div><h2 id="Set" class="undefined">Set<a href="#Set" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#Lundefined">➭</a></h2>
+<h3 id="Set.forEach" class="dr-method">Set.forEach(callback, thisArg)<a href="#Set.forEach" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5573">➭</a></h3>
+<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>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">callback</dt>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">function to run</dd>
+<dt class="dr-param">thisArg</dt>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">context object for the callback</dd>
+</dl>
+<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><h3 id="Set.pop" class="dr-method">Set.pop()<a href="#Set.pop" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5555">➭</a></h3>
+<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><h3 id="Set.push" class="dr-method">Set.push()<a href="#Set.push" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5535">➭</a></h3>
+<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></div></div></body></html>
\ No newline at end of file
projects / raphael / blobdiff