Fixed group to follow pattern of first argument to be an attributes

2013-09-09 17:36:48 +10:00 · 2013-09-09 17:36:48 +10:00 · 02dfd62f22
parent 7a2ebfa2ac
commit 02dfd62f22
5 changed files with 75 additions and 60 deletions
--- a/demo-card.svg
+++ b/demo-card.svg
@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1"
    id="svg4423" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" inkscape:version="0.48.2 r9819" sodipodi:docname="JC.svg"
--- a/dist/reference.html
+++ b/dist/reference.html
@ -31,10 +31,10 @@
          </div>
        </header>
        <div id="content" class="max-width"><article id="Element" class="Element-section"><header><h2 id="Element" class="undefined">Element<a href="#Element" title="Link to this section" class="dr-hash">&#x2693;</a></h2></header>
-<section><div class="extra" id="Element-extra"></div></section></article><article id="Element.add" class="Element-add-section"><header><h3 id="Element.add" class="dr-method">Element.add()<a href="#Element.add" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1546 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1546">&#x27ad;</a></h3></header>
+<section><div class="extra" id="Element-extra"></div></section></article><article id="Element.add" class="Element-add-section"><header><h3 id="Element.add" class="dr-method">Element.add()<a href="#Element.add" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1549 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1549">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Element.add-extra"></div><div class="dr-method"><p>See <a href="#Element.append" class="dr-link">Element.append</a>.
 </p>
-</div></section></article><article id="Element.after" class="Element-after-section"><header><h3 id="Element.after" class="dr-method">Element.after(el)<a href="#Element.after" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1599 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1599">&#x27ad;</a></h3></header>
+</div></section></article><article id="Element.after" class="Element-after-section"><header><h3 id="Element.after" class="dr-method">Element.after(el)<a href="#Element.after" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1602 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1602">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Element.after-extra"></div><div class="dr-method"><p>Inserts given element after the current one.
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">el</span>
@ -42,7 +42,7 @@
 <span class="dr-description">element to insert</span></li>
 </ol></div>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">parent</span></p>
-</div></section></article><article id="Element.animate" class="Element-animate-section"><header><h3 id="Element.animate" class="dr-method">Element.animate(attrs, ms, [easing], [callback])<a href="#Element.animate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1947 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1947">&#x27ad;</a></h3></header>
+</div></section></article><article id="Element.animate" class="Element-animate-section"><header><h3 id="Element.animate" class="dr-method">Element.animate(attrs, ms, [easing], [callback])<a href="#Element.animate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1950 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1950">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Element.animate-extra"></div><div class="dr-method"><p>Animate given attributes of the element.
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">attrs</span>
@ -61,7 +61,7 @@
 <span class="dr-description">&#160;</span></li>
 </ol></div>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the element</span></p>
-</div></section></article><article id="Element.append" class="Element-append-section"><header><h3 id="Element.append" class="dr-method">Element.append(el)<a href="#Element.append" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1540 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1540">&#x27ad;</a></h3></header>
+</div></section></article><article id="Element.append" class="Element-append-section"><header><h3 id="Element.append" class="dr-method">Element.append(el)<a href="#Element.append" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1543 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1543">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Element.append-extra"></div><div class="dr-method"><p>Appends given element to current one.
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">el</span>
@ -69,7 +69,7 @@
 <span class="dr-description">element to append</span></li>
 </ol></div>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">parent</span></p>
-</div></section></article><article id="Element.asPX" class="Element-asPX-section"><header><h3 id="Element.asPX" class="dr-method">Element.asPX(attr, [value])<a href="#Element.asPX" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1685 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1685">&#x27ad;</a></h3></header>
+</div></section></article><article id="Element.asPX" class="Element-asPX-section"><header><h3 id="Element.asPX" class="dr-method">Element.asPX(attr, [value])<a href="#Element.asPX" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1688 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1688">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Element.asPX-extra"></div><div class="dr-method"><p>Return given attribute of the element as a <code>px</code> value. (Not %, em, etc)
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">attr</span>
@ -106,7 +106,7 @@
 });
 console.log(el.attr("fill")); // “#fc0”
 </code></pre></section>
-</div></section></article><article id="Element.before" class="Element-before-section"><header><h3 id="Element.before" class="dr-method">Element.before(el)<a href="#Element.before" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1583 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1583">&#x27ad;</a></h3></header>
+</div></section></article><article id="Element.before" class="Element-before-section"><header><h3 id="Element.before" class="dr-method">Element.before(el)<a href="#Element.before" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1586 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1586">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Element.before-extra"></div><div class="dr-method"><p>Inserts given element before the current one.
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">el</span>
@ -122,7 +122,7 @@ console.log(el.attr("fill")); // “#fc0”
 <span class="dr-description">handler for the event</span></li>
 </ol></div>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
-</div></section></article><article id="Element.clone" class="Element-clone-section"><header><h3 id="Element.clone" class="dr-method">Element.clone()<a href="#Element.clone" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1727 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1727">&#x27ad;</a></h3></header>
+</div></section></article><article id="Element.clone" class="Element-clone-section"><header><h3 id="Element.clone" class="dr-method">Element.clone()<a href="#Element.clone" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1730 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1730">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Element.clone-extra"></div><div class="dr-method"><p>Creates <code>&lt;use&gt;</code> element linked to the current element.
 </p>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description"><code>&lt;use&gt;</code> element</span></p>
@ -207,7 +207,7 @@ See also <a href="#Element.removeData" class="dr-link">Element.removeData</a>
 <ol class="dr-json"><li><span class="dr-json-key">event</span><span class="dr-type"><em class="dr-type-object">object</em></span><span class="dr-json-description">DOM event object</span>
 </ol>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
-</div></section></article><article id="Element.getBBox" class="Element-getBBox-section"><header><h3 id="Element.getBBox" class="dr-method">Element.getBBox()<a href="#Element.getBBox" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1438 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1438">&#x27ad;</a></h3></header>
+</div></section></article><article id="Element.getBBox" class="Element-getBBox-section"><header><h3 id="Element.getBBox" class="dr-method">Element.getBBox()<a href="#Element.getBBox" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1441 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1441">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Element.getBBox-extra"></div><div class="dr-method"><p>Returns bounding box descriptor for the given element.
 </p>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">bounding box descriptor:</span></p>
@ -273,7 +273,7 @@ See also <a href="#Element.removeData" class="dr-link">Element.removeData</a>
 <span class="dr-description">context for hover out handler</span></li>
 </ol></div>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
-</div></section></article><article id="Element.inAnim" class="Element-inAnim-section"><header><h3 id="Element.inAnim" class="dr-method">Element.inAnim()<a href="#Element.inAnim" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1869 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1869">&#x27ad;</a></h3></header>
+</div></section></article><article id="Element.inAnim" class="Element-inAnim-section"><header><h3 id="Element.inAnim" class="dr-method">Element.inAnim()<a href="#Element.inAnim" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1872 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1872">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Element.inAnim-extra"></div><div class="dr-method"><p>Returns an array of animations element currently in
 </p>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">in format</span></p>
@ -282,7 +282,7 @@ See also <a href="#Element.removeData" class="dr-link">Element.removeData</a>
 <li><span class="dr-json-key">status</span><span class="dr-type"><em class="dr-type-function">function</em></span><span class="dr-json-description">gets or sets the status of the animation,</span>
 <li><span class="dr-json-key">stop</span><span class="dr-type"><em class="dr-type-function">function</em></span><span class="dr-json-description">stops the animation</span>
 </ol></li><li>}</li></ol>
-</div></section></article><article id="Element.insertAfter" class="Element-insertAfter-section"><header><h3 id="Element.insertAfter" class="dr-method">Element.insertAfter(el)<a href="#Element.insertAfter" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1629 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1629">&#x27ad;</a></h3></header>
+</div></section></article><article id="Element.insertAfter" class="Element-insertAfter-section"><header><h3 id="Element.insertAfter" class="dr-method">Element.insertAfter(el)<a href="#Element.insertAfter" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1632 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1632">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Element.insertAfter-extra"></div><div class="dr-method"><p>Inserts the element after the given one.
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">el</span>
@ -290,7 +290,7 @@ See also <a href="#Element.removeData" class="dr-link">Element.removeData</a>
 <span class="dr-description">element next to whom insert to</span></li>
 </ol></div>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">parent</span></p>
-</div></section></article><article id="Element.insertBefore" class="Element-insertBefore-section"><header><h3 id="Element.insertBefore" class="dr-method">Element.insertBefore(el)<a href="#Element.insertBefore" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1614 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1614">&#x27ad;</a></h3></header>
+</div></section></article><article id="Element.insertBefore" class="Element-insertBefore-section"><header><h3 id="Element.insertBefore" class="dr-method">Element.insertBefore(el)<a href="#Element.insertBefore" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1617 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1617">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Element.insertBefore-extra"></div><div class="dr-method"><p>Inserts the element after the given one.
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">el</span>
@ -298,7 +298,7 @@ See also <a href="#Element.removeData" class="dr-link">Element.removeData</a>
 <span class="dr-description">element next to whom insert to</span></li>
 </ol></div>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">parent</span></p>
-</div></section></article><article id="Element.marker" class="Element-marker-section"><header><h3 id="Element.marker" class="dr-method">Element.marker(x, y, width, height, refX, refY)<a href="#Element.marker" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1794 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1794">&#x27ad;</a></h3></header>
+</div></section></article><article id="Element.marker" class="Element-marker-section"><header><h3 id="Element.marker" class="dr-method">Element.marker(x, y, width, height, refX, refY)<a href="#Element.marker" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1797 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1797">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Element.marker-extra"></div><div class="dr-method"><p>Creates <code>&lt;marker&gt;</code> element from the current element.
 To create a marker you have to specify the bounding rect and reference point:
 </p>
@ -371,11 +371,11 @@ To create a marker you have to specify the bounding rect and reference point:
 <span class="dr-type"><em class="dr-type-function">function</em></span>
 <span class="dr-description">handler for event, first argument would be the element you are dragging over</span></li>
 </ol></div>
-</div></section></article><article id="Element.parent" class="Element-parent-section"><header><h3 id="Element.parent" class="dr-method">Element.parent()<a href="#Element.parent" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1528 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1528">&#x27ad;</a></h3></header>
+</div></section></article><article id="Element.parent" class="Element-parent-section"><header><h3 id="Element.parent" class="dr-method">Element.parent()<a href="#Element.parent" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1531 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1531">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Element.parent-extra"></div><div class="dr-method"><p>Returns parent of the element
 </p>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">parent</span></p>
-</div></section></article><article id="Element.pattern" class="Element-pattern-section"><header><h3 id="Element.pattern" class="dr-method">Element.pattern(x, y, width, height)<a href="#Element.pattern" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1755 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1755">&#x27ad;</a></h3></header>
+</div></section></article><article id="Element.pattern" class="Element-pattern-section"><header><h3 id="Element.pattern" class="dr-method">Element.pattern(x, y, width, height)<a href="#Element.pattern" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1758 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1758">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Element.pattern-extra"></div><div class="dr-method"><p>Creates <code>&lt;pattern&gt;</code> element from the current element.
 To create a pattern you have to specify the pattern rect:
 </p>
@ -405,7 +405,7 @@ c.attr({
    fill: p
 });
 </code></pre></section>
-</div></section></article><article id="Element.prepend" class="Element-prepend-section"><header><h3 id="Element.prepend" class="dr-method">Element.prepend(el)<a href="#Element.prepend" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1568 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1568">&#x27ad;</a></h3></header>
+</div></section></article><article id="Element.prepend" class="Element-prepend-section"><header><h3 id="Element.prepend" class="dr-method">Element.prepend(el)<a href="#Element.prepend" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1571 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1571">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Element.prepend-extra"></div><div class="dr-method"><p>Prepends given element to current one.
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">el</span>
@ -413,7 +413,7 @@ c.attr({
 <span class="dr-description">element to prepend</span></li>
 </ol></div>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">parent</span></p>
-</div></section></article><article id="Element.remove" class="Element-remove-section"><header><h3 id="Element.remove" class="dr-method">Element.remove()<a href="#Element.remove" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1641 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1641">&#x27ad;</a></h3></header>
+</div></section></article><article id="Element.remove" class="Element-remove-section"><header><h3 id="Element.remove" class="dr-method">Element.remove()<a href="#Element.remove" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1644 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1644">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Element.remove-extra"></div><div class="dr-method"><p>Removes element from the DOM
 </p>
 </div></section></article><article id="Element.removeData" class="Element-removeData-section"><header><h3 id="Element.removeData" class="dr-method">Element.removeData([key])<a href="#Element.removeData" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 406 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L406">&#x27ad;</a></h3></header>
@ -426,7 +426,7 @@ If key is not provided, removes all the data of the element.
 <span class="dr-description">key</span></li>
 </ol></div>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
-</div></section></article><article id="Element.select" class="Element-select-section"><header><h3 id="Element.select" class="dr-method">Element.select(query)<a href="#Element.select" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1655 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1655">&#x27ad;</a></h3></header>
+</div></section></article><article id="Element.select" class="Element-select-section"><header><h3 id="Element.select" class="dr-method">Element.select(query)<a href="#Element.select" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1658 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1658">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Element.select-extra"></div><div class="dr-method"><p>Applies CSS selector with the element as a parent and returns the result as an <a href="#Element" class="dr-link">Element</a>.
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">query</span>
@ -434,7 +434,7 @@ If key is not provided, removes all the data of the element.
 <span class="dr-description">CSS selector</span></li>
 </ol></div>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">result of query selection</span></p>
-</div></section></article><article id="Element.selectAll" class="Element-selectAll-section"><header><h3 id="Element.selectAll" class="dr-method">Element.selectAll(query)<a href="#Element.selectAll" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1667 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1667">&#x27ad;</a></h3></header>
+</div></section></article><article id="Element.selectAll" class="Element-selectAll-section"><header><h3 id="Element.selectAll" class="dr-method">Element.selectAll(query)<a href="#Element.selectAll" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1670 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1670">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Element.selectAll-extra"></div><div class="dr-method"><p>Applies CSS selector with the element as a parent and returns the result as a set or array of elements.
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">query</span>
@ -442,7 +442,7 @@ If key is not provided, removes all the data of the element.
 <span class="dr-description">CSS selector</span></li>
 </ol></div>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Set">Set</em> <em class="dr-type-array">array</em> <span class="dr-description">result of query selection</span></p>
-</div></section></article><article id="Element.stop" class="Element-stop-section"><header><h3 id="Element.stop" class="dr-method">Element.stop()<a href="#Element.stop" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1928 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1928">&#x27ad;</a></h3></header>
+</div></section></article><article id="Element.stop" class="Element-stop-section"><header><h3 id="Element.stop" class="dr-method">Element.stop()<a href="#Element.stop" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1931 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1931">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Element.stop-extra"></div><div class="dr-method"><p>Stops all the animations of the current element.
 </p>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the element</span></p>
@ -478,7 +478,7 @@ If key is not provided, removes all the data of the element.
 <span class="dr-description">handler for the event</span></li>
 </ol></div>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
-</div></section></article><article id="Element.transform" class="Element-transform-section"><header><h3 id="Element.transform" class="dr-method">Element.transform(tstr)<a href="#Element.transform" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1486 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1486">&#x27ad;</a></h3></header>
+</div></section></article><article id="Element.transform" class="Element-transform-section"><header><h3 id="Element.transform" class="dr-method">Element.transform(tstr)<a href="#Element.transform" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1489 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1489">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Element.transform-extra"></div><div class="dr-method"><p>Gets or sets transformation of the element
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">tstr</span>
@ -599,15 +599,15 @@ If key is not provided, removes all the data of the element.
 <span class="dr-description">handler for the event</span></li>
 </ol></div>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
-</div></section></article><article id="Element.use" class="Element-use-section"><header><h3 id="Element.use" class="dr-method">Element.use()<a href="#Element.use" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1699 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1699">&#x27ad;</a></h3></header>
+</div></section></article><article id="Element.use" class="Element-use-section"><header><h3 id="Element.use" class="dr-method">Element.use()<a href="#Element.use" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1702 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1702">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Element.use-extra"></div><div class="dr-method"><p>Creates <code>&lt;use&gt;</code> element linked to the current element.
 </p>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description"><code>&lt;use&gt;</code> element</span></p>
 </div></section></article><article id="Fragment" class="Fragment-section"><header><h2 id="Fragment" class="undefined">Fragment<a href="#Fragment" title="Link to this section" class="dr-hash">&#x2693;</a></h2></header>
-<section><div class="extra" id="Fragment-extra"></div></section></article><article id="Fragment.select" class="Fragment-select-section"><header><h3 id="Fragment.select" class="dr-method">Fragment.select()<a href="#Fragment.select" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2036 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2036">&#x27ad;</a></h3></header>
+<section><div class="extra" id="Fragment-extra"></div></section></article><article id="Fragment.select" class="Fragment-select-section"><header><h3 id="Fragment.select" class="dr-method">Fragment.select()<a href="#Fragment.select" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2039 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2039">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Fragment.select-extra"></div><div class="dr-method"><p>See <a href="#Element.select" class="dr-link">Element.select</a>
 </p>
-</div></section></article><article id="Fragment.selectAll" class="Fragment-selectAll-section"><header><h3 id="Fragment.selectAll" class="dr-method">Fragment.selectAll()<a href="#Fragment.selectAll" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2043 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2043">&#x27ad;</a></h3></header>
+</div></section></article><article id="Fragment.selectAll" class="Fragment-selectAll-section"><header><h3 id="Fragment.selectAll" class="dr-method">Fragment.selectAll()<a href="#Fragment.selectAll" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2046 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2046">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Fragment.selectAll-extra"></div><div class="dr-method"><p>See <a href="#Element.selectAll" class="dr-link">Element.selectAll</a>
 </p>
 </div></section></article><article id="Matrix" class="Matrix-section"><header><h2 id="Matrix" class="undefined">Matrix<a href="#Matrix" title="Link to this section" class="dr-hash">&#x2693;</a></h2></header>
@ -725,7 +725,7 @@ If key is not provided, removes all the data of the element.
 </ol></div>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">y</span></p>
 </div></section></article><article id="Paper" class="Paper-section"><header><h2 id="Paper" class="undefined">Paper<a href="#Paper" title="Link to this section" class="dr-hash">&#x2693;</a></h2></header>
-<section><div class="extra" id="Paper-extra"></div></section></article><article id="Paper.circle" class="Paper-circle-section"><header><h3 id="Paper.circle" class="dr-method">Paper.circle(x, y, r)<a href="#Paper.circle" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2204 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2204">&#x27ad;</a></h3></header>
+<section><div class="extra" id="Paper-extra"></div></section></article><article id="Paper.circle" class="Paper-circle-section"><header><h3 id="Paper.circle" class="dr-method">Paper.circle(x, y, r)<a href="#Paper.circle" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2208 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2208">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Paper.circle-extra"></div><div class="dr-method"><p>Draws a circle.
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x</span>
@ -741,12 +741,15 @@ If key is not provided, removes all the data of the element.
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Element object with type “circle”</span></p>
 <h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var c = paper.circle(50, 50, 40);
 </code></pre></section>
-</div></section></article><article id="Paper.el" class="Paper-el-section"><header><h3 id="Paper.el" class="dr-method">Paper.el(name)<a href="#Paper.el" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2144 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2144">&#x27ad;</a></h3></header>
+</div></section></article><article id="Paper.el" class="Paper-el-section"><header><h3 id="Paper.el" class="dr-method">Paper.el(name, attr)<a href="#Paper.el" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2148 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2148">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Paper.el-extra"></div><div class="dr-method"><p>Creates element on paper with a given name and no attributes.
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">name</span>
 <span class="dr-type"><em class="dr-type-string">string</em></span>
-<span class="dr-description">element tag name</span></li>
+<span class="dr-description">tag name</span></li>
 <li class="topcoat-list__item"><span class="dr-param">attr</span>
 <span class="dr-type"><em class="dr-type-object">object</em></span>
 <span class="dr-description">attributes</span></li>
 </ol></div>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the element</span></p>
 <h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var c = paper.circle(10, 10, 10); // is the same as...
@ -756,7 +759,7 @@ var c = paper.el("circle").attr({
    r: 10
 });
 </code></pre></section>
-</div></section></article><article id="Paper.ellipse" class="Paper-ellipse-section"><header><h3 id="Paper.ellipse" class="dr-method">Paper.ellipse(x, y, rx, ry)<a href="#Paper.ellipse" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2292 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2292">&#x27ad;</a></h3></header>
+</div></section></article><article id="Paper.ellipse" class="Paper-ellipse-section"><header><h3 id="Paper.ellipse" class="dr-method">Paper.ellipse(x, y, rx, ry)<a href="#Paper.ellipse" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2296 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2296">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Paper.ellipse-extra"></div><div class="dr-method"><p>Draws an ellipse.
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x</span>
@ -830,7 +833,7 @@ var c = paper.el("circle").attr({
        filter: f
    });
 </code></pre></section>
-</div></section></article><article id="Paper.g" class="Paper-g-section"><header><h3 id="Paper.g" class="dr-method">Paper.g([varargs])<a href="#Paper.g" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2366 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2366">&#x27ad;</a></h3></header>
+</div></section></article><article id="Paper.g" class="Paper-g-section"><header><h3 id="Paper.g" class="dr-method">Paper.g([varargs])<a href="#Paper.g" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2370 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2370">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Paper.g-extra"></div><div class="dr-method"><p>Makes a group element.
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param optional">varargs</span>
@ -850,7 +853,7 @@ var c = paper.el("circle").attr({
    g = paper.g();
 g.add(c2, c1);
 </code></pre></section>
-</div></section></article><article id="Paper.gradient" class="Paper-gradient-section"><header><h3 id="Paper.gradient" class="dr-method">Paper.gradient(gradient)<a href="#Paper.gradient" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2524 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2524">&#x27ad;</a></h3></header>
+</div></section></article><article id="Paper.gradient" class="Paper-gradient-section"><header><h3 id="Paper.gradient" class="dr-method">Paper.gradient(gradient)<a href="#Paper.gradient" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2530 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2530">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Paper.gradient-extra"></div><div class="dr-method"><p>Creates a gradient element.
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">gradient</span>
@ -888,10 +891,10 @@ through red at 25% to white.
 });
 </code></pre></section>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Element object with type “gradient”</span></p>
-</div></section></article><article id="Paper.group" class="Paper-group-section"><header><h3 id="Paper.group" class="dr-method">Paper.group()<a href="#Paper.group" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2372 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2372">&#x27ad;</a></h3></header>
+</div></section></article><article id="Paper.group" class="Paper-group-section"><header><h3 id="Paper.group" class="dr-method">Paper.group()<a href="#Paper.group" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2376 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2376">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Paper.group-extra"></div><div class="dr-method"><p>See <a href="#Paper.g" class="dr-link">Paper.g</a>
 </p>
-</div></section></article><article id="Paper.image" class="Paper-image-section"><header><h3 id="Paper.image" class="dr-method">Paper.image(src, x, y, width, height)<a href="#Paper.image" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2249 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2249">&#x27ad;</a></h3></header>
+</div></section></article><article id="Paper.image" class="Paper-image-section"><header><h3 id="Paper.image" class="dr-method">Paper.image(src, x, y, width, height)<a href="#Paper.image" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2253 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2253">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Paper.image-extra"></div><div class="dr-method"><p>Embeds an image into the surface.
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">src</span>
@ -934,7 +937,7 @@ through red at 25% to white.
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Element object with type “image”</span></p>
 <h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var c = paper.image("apple.png", 10, 10, 80, 80);
 </code></pre></section>
-</div></section></article><article id="Paper.line" class="Paper-line-section"><header><h3 id="Paper.line" class="dr-method">Paper.line(x1, y1, x2, y2)<a href="#Paper.line" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2426 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2426">&#x27ad;</a></h3></header>
+</div></section></article><article id="Paper.line" class="Paper-line-section"><header><h3 id="Paper.line" class="dr-method">Paper.line(x1, y1, x2, y2)<a href="#Paper.line" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2432 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2432">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Paper.line-extra"></div><div class="dr-method"><p>Draws a line.
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x1</span>
@ -953,7 +956,7 @@ through red at 25% to white.
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Element object with type “line”</span></p>
 <h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var t1 = paper.line(50, 50, 100, 100);
 </code></pre></section>
-</div></section></article><article id="Paper.path" class="Paper-path-section"><header><h3 id="Paper.path" class="dr-method">Paper.path([pathString])<a href="#Paper.path" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2336 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2336">&#x27ad;</a></h3></header>
+</div></section></article><article id="Paper.path" class="Paper-path-section"><header><h3 id="Paper.path" class="dr-method">Paper.path([pathString])<a href="#Paper.path" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2340 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2340">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Paper.path-extra"></div><div class="dr-method"><p>Creates a path element by given path data string.
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param optional">pathString</span>
@ -988,10 +991,10 @@ Note: there is a special case when path consist of just three commands: “M10,1
 // draw a diagonal line:
 // move to 10,10, line to 90,90
 </code></pre></section>
-</div></section></article><article id="Paper.polygon" class="Paper-polygon-section"><header><h3 id="Paper.polygon" class="dr-method">Paper.polygon()<a href="#Paper.polygon" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2475 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2475">&#x27ad;</a></h3></header>
+</div></section></article><article id="Paper.polygon" class="Paper-polygon-section"><header><h3 id="Paper.polygon" class="dr-method">Paper.polygon()<a href="#Paper.polygon" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2481 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2481">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Paper.polygon-extra"></div><div class="dr-method"><p>Draws a polygon. See <a href="#Paper.polyline" class="dr-link">Paper.polyline</a>
 </p>
-</div></section></article><article id="Paper.polyline" class="Paper-polyline-section"><header><h3 id="Paper.polyline" class="dr-method">Paper.polyline(…)<a href="#Paper.polyline" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2455 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2455">&#x27ad;</a></h3></header>
+</div></section></article><article id="Paper.polyline" class="Paper-polyline-section"><header><h3 id="Paper.polyline" class="dr-method">Paper.polyline(…)<a href="#Paper.polyline" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2461 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2461">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Paper.polyline-extra"></div><div class="dr-method"><p>Draws a polyline.
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">points</span>
@ -1008,7 +1011,7 @@ Note: there is a special case when path consist of just three commands: “M10,1
 <h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var p1 = paper.polyline([10, 10, 100, 100]);
 var p2 = paper.polyline(10, 10, 100, 100);
 </code></pre></section>
-</div></section></article><article id="Paper.rect" class="Paper-rect-section"><header><h3 id="Paper.rect" class="dr-method">Paper.rect(x, y, width, height, [rx], [ry])<a href="#Paper.rect" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2167 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2167">&#x27ad;</a></h3></header>
+</div></section></article><article id="Paper.rect" class="Paper-rect-section"><header><h3 id="Paper.rect" class="dr-method">Paper.rect(x, y, width, height, [rx], [ry])<a href="#Paper.rect" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2171 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2171">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Paper.rect-extra"></div><div class="dr-method"><p></p>
 <p>Draws a rectangle.
 </p>
@ -1039,7 +1042,7 @@ var c = paper.rect(10, 10, 50, 50);
 // rectangle with rounded corners
 var c = paper.rect(40, 40, 50, 50, 10);
 </code></pre></section>
-</div></section></article><article id="Paper.text" class="Paper-text-section"><header><h3 id="Paper.text" class="dr-method">Paper.text(x, y, text)<a href="#Paper.text" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2398 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2398">&#x27ad;</a></h3></header>
+</div></section></article><article id="Paper.text" class="Paper-text-section"><header><h3 id="Paper.text" class="dr-method">Paper.text(x, y, text)<a href="#Paper.text" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2404 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2404">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Paper.text-extra"></div><div class="dr-method"><p>Draws a text string.
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x</span>
@ -1056,7 +1059,7 @@ var c = paper.rect(40, 40, 50, 50, 10);
 <h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var t1 = paper.text(50, 50, "Savage");
 var t2 = paper.text(50, 50, ["S","a","v","a","g","e"]);
 </code></pre></section>
-</div></section></article><article id="Paper.toString" class="Paper-toString-section"><header><h3 id="Paper.toString" class="dr-method">Paper.toString()<a href="#Paper.toString" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2629 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2629">&#x27ad;</a></h3></header>
+</div></section></article><article id="Paper.toString" class="Paper-toString-section"><header><h3 id="Paper.toString" class="dr-method">Paper.toString()<a href="#Paper.toString" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2635 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2635">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Paper.toString-extra"></div><div class="dr-method"><p>Returns SVG code of the <a href="#Paper" class="dr-link">Paper</a>.
 </p>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">SVG code of the <a href="#Paper" class="dr-link">Paper</a>.</span></p>
@ -1091,7 +1094,7 @@ Returns matrix based on given parameters.
 <span class="dr-description">&#160;</span></li>
 </ol></div>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Matrix" class="dr-link">Matrix</a></span></p>
-</div></section></article><article id="Savage.ajax" class="Savage-ajax-section"><header><h3 id="Savage.ajax" class="dr-method">Savage.ajax(…)<a href="#Savage.ajax" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2661 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2661">&#x27ad;</a></h3></header>
+</div></section></article><article id="Savage.ajax" class="Savage-ajax-section"><header><h3 id="Savage.ajax" class="dr-method">Savage.ajax(…)<a href="#Savage.ajax" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2667 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2667">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Savage.ajax-extra"></div><div class="dr-method"><p>Simple implementation of Ajax.
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">url</span>
@ -1122,7 +1125,7 @@ Returns matrix based on given parameters.
 <span class="dr-description">scope of callback</span></li>
 </ol></div>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-XMLHttpRequest">XMLHttpRequest</em> <span class="dr-description">XMLHttpRequest (just in case)</span></p>
-</div></section></article><article id="Savage.animate" class="Savage-animate-section"><header><h3 id="Savage.animate" class="dr-method">Savage.animate(from, to, setter, ms, [easing], [callback])<a href="#Savage.animate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1910 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1910">&#x27ad;</a></h3></header>
+</div></section></article><article id="Savage.animate" class="Savage-animate-section"><header><h3 id="Savage.animate" class="dr-method">Savage.animate(from, to, setter, ms, [easing], [callback])<a href="#Savage.animate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1913 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1913">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Savage.animate-extra"></div><div class="dr-method"><p>Runs generic animation of one number into another with a caring function.
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">from</span>
@ -1154,7 +1157,7 @@ Returns matrix based on given parameters.
 <li><span class="dr-json-key">status</span><span class="dr-type"><em class="dr-type-function">function</em></span><span class="dr-json-description">gets or sets the status of the animation,</span>
 <li><span class="dr-json-key">stop</span><span class="dr-type"><em class="dr-type-function">function</em></span><span class="dr-json-description">stops the animation</span>
 </ol></li><li>}</li></ol>
-</div></section></article><article id="Savage.animation" class="Savage-animation-section"><header><h3 id="Savage.animation" class="dr-method">Savage.animation(attr, ms, [easing], [callback])<a href="#Savage.animation" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1852 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1852">&#x27ad;</a></h3></header>
+</div></section></article><article id="Savage.animation" class="Savage-animation-section"><header><h3 id="Savage.animation" class="dr-method">Savage.animation(attr, ms, [easing], [callback])<a href="#Savage.animation" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1855 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1855">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Savage.animation-extra"></div><div class="dr-method"><p>Creates animation object.
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">attr</span>
@ -1266,7 +1269,7 @@ paper.path(Savage.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width
    }
 }));
 </code></pre></section>
-</div></section></article><article id="Savage.fragment" class="Savage-fragment-section"><header><h3 id="Savage.fragment" class="dr-method">Savage.fragment(varargs)<a href="#Savage.fragment" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2053 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2053">&#x27ad;</a></h3></header>
+</div></section></article><article id="Savage.fragment" class="Savage-fragment-section"><header><h3 id="Savage.fragment" class="dr-method">Savage.fragment(varargs)<a href="#Savage.fragment" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2056 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2056">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Savage.fragment-extra"></div><div class="dr-method"><p>Creates DOM fragment from given list of elements or strings
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">varargs</span>
@ -1376,7 +1379,7 @@ paper.path(Savage.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width
 <span class="dr-description">name of the type, i.e. “string”, “function”, “number”, etc.</span></li>
 </ol></div>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-boolean">boolean</em> <span class="dr-description">is given value is of given type</span></p>
-</div></section></article><article id="Savage.load" class="Savage-load-section"><header><h3 id="Savage.load" class="dr-method">Savage.load(url, callback, [scope])<a href="#Savage.load" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2707 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2707">&#x27ad;</a></h3></header>
+</div></section></article><article id="Savage.load" class="Savage-load-section"><header><h3 id="Savage.load" class="dr-method">Savage.load(url, callback, [scope])<a href="#Savage.load" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2713 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2713">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Savage.load-extra"></div><div class="dr-method"><p>Loads external SVG file as a <a href="#Fragment" class="dr-link">Fragment</a>. For more advanced AJAX see <a href="#Savage.ajax" class="dr-link">Savage.ajax</a>.
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">url</span>
@ -1390,7 +1393,7 @@ paper.path(Savage.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width
 <span class="dr-type"><em class="dr-type-object">object</em></span>
 <span class="dr-description">scope of callback</span></li>
 </ol></div>
-</div></section></article><article id="Savage.parse" class="Savage-parse-section"><header><h3 id="Savage.parse" class="dr-method">Savage.parse(svg)<a href="#Savage.parse" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2005 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2005">&#x27ad;</a></h3></header>
+</div></section></article><article id="Savage.parse" class="Savage-parse-section"><header><h3 id="Savage.parse" class="dr-method">Savage.parse(svg)<a href="#Savage.parse" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2008 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2008">&#x27ad;</a></h3></header>
 <section><div class="extra" id="Savage.parse-extra"></div><div class="dr-method"><p>Parses SVG fragment and converts it into <a href="#Fragment" class="dr-link">Fragment</a>.
 </p>
 <div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">svg</span>
--- a/dist/savage-min.js
+++ b/dist/savage-min.js
--- a/dist/savage.js
+++ b/dist/savage.js
@ -2417,6 +2417,9 @@ function arrayFirstValue(arr) {
    \*/
    elproto.attr = function (params) {
        var node = this.node;
        if (!params) {
            return this;
        }
        if (is(params, "string")) {
            return arrayFirstValue(eve("savage.util.getattr." + params, this));
        }
@ -3148,7 +3151,8 @@ function wrap(dom) {
     **
     * Creates element on paper with a given name and no attributes.
     **
-     - name (string) element tag name
+     - name (string) tag name
     - attr (object) attributes
     = (Element) the element
     > Usage
     | var c = paper.circle(10, 10, 10); // is the same as...
@ -3158,8 +3162,8 @@ function wrap(dom) {
     |     r: 10
     | });
    \*/
-    proto.el = function (name) {
+    proto.el = function (name, attr) {
-        return make(name, this.node);
+        return make(name, this.node).attr(attr);
    };
    /*\
     * Paper.rect
@ -3386,14 +3390,16 @@ function wrap(dom) {
     **
     * See @Paper.g
    \*/
-    proto.group = proto.g = function () {
+    proto.group = proto.g = function (first) {
        var el = make("g", this.node);
        el.add = add2group;
        for (var method in proto) if (proto[has](method)) {
            el[method] = proto[method];
        }
-        if (arguments.length) {
+        if (arguments.length == 1 && first && !first.type) {
-            add2group.call(el, Array.prototype.slice.call(arguments, 0));
+            el.attr(first);
        } else if (arguments.length) {
            el.add(Array.prototype.slice.call(arguments, 0));
        }
        return el;
    };
--- a/src/svg.js
+++ b/src/svg.js
@ -1400,6 +1400,9 @@ function arrayFirstValue(arr) {
    \*/
    elproto.attr = function (params) {
        var node = this.node;
        if (!params) {
            return this;
        }
        if (is(params, "string")) {
            return arrayFirstValue(eve("savage.util.getattr." + params, this));
        }
@ -2131,7 +2134,8 @@ function wrap(dom) {
     **
     * Creates element on paper with a given name and no attributes.
     **
-     - name (string) element tag name
+     - name (string) tag name
     - attr (object) attributes
     = (Element) the element
     > Usage
     | var c = paper.circle(10, 10, 10); // is the same as...
@ -2141,8 +2145,8 @@ function wrap(dom) {
     |     r: 10
     | });
    \*/
-    proto.el = function (name) {
+    proto.el = function (name, attr) {
-        return make(name, this.node);
+        return make(name, this.node).attr(attr);
    };
    /*\
     * Paper.rect
@ -2369,14 +2373,16 @@ function wrap(dom) {
     **
     * See @Paper.g
    \*/
-    proto.group = proto.g = function () {
+    proto.group = proto.g = function (first) {
        var el = make("g", this.node);
        el.add = add2group;
        for (var method in proto) if (proto[has](method)) {
            el[method] = proto[method];
        }
-        if (arguments.length) {
+        if (arguments.length == 1 && first && !first.type) {
-            add2group.call(el, Array.prototype.slice.call(arguments, 0));
+            el.attr(first);
        } else if (arguments.length) {
            el.add(Array.prototype.slice.call(arguments, 0));
        }
        return el;
    };