Animation of SVG transformations, matrices and polygon points

master
Dmitry Baranovskiy 2013-11-25 12:00:34 +11:00
parent 19f9b2d561
commit 9fa23f0f95
6 changed files with 214 additions and 137 deletions

File diff suppressed because one or more lines are too long

89
dist/snap.svg.js vendored
View File

@ -14,7 +14,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.
//
// build: 2013-11-21
// build: 2013-11-25
// Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
@ -516,11 +516,11 @@ var mina = (function (eve) {
if (isArray(a.start)) {
res = [];
for (var j = 0, jj = a.start.length; j < jj; j++) {
res[j] = a.start[j] +
res[j] = +a.start[j] +
(a.end[j] - a.start[j]) * a.easing(a.s);
}
} else {
res = a.start + (a.end - a.start) * a.easing(a.s);
res = +a.start + (a.end - a.start) * a.easing(a.s);
}
a.set(res);
}
@ -1276,9 +1276,6 @@ function Matrix(a, b, c, d, e, f) {
a[0] && (a[0] /= mag);
a[1] && (a[1] /= mag);
}
// SIERRA Matrix.split(): HTML formatting for the return value is scrambled. It should appear _Returns: {OBJECT} in format:..._
// SIERRA Matrix.split(): the _shear_ parameter needs to be detailed. Is it an angle? What does it affect?
// SIERRA Matrix.split(): The idea of _simple_ transforms needs to be detailed and contrasted with any alternatives.
/*\
* Matrix.split
[ method ]
@ -1328,7 +1325,6 @@ function Matrix(a, b, c, d, e, f) {
out.noRotation = !+out.shear.toFixed(9) && !out.rotate;
return out;
};
// SIERRA Matrix.toTransformString(): The format of the string needs to be detailed.
/*\
* Matrix.toTransformString
[ method ]
@ -1350,7 +1346,6 @@ function Matrix(a, b, c, d, e, f) {
}
};
})(Matrix.prototype);
// SIERRA Unclear the difference between the two matrix formats ("parameters" vs svgMatrix). See my comment about Element.matrix().
/*\
* Snap.Matrix
[ method ]
@ -1900,7 +1895,8 @@ function svgTransform2string(tstr) {
});
return res;
}
var rgTransform = new RegExp("^[a-z][" + spaces + "]*-?\\.?\\d", "i");
Snap._.svgTransform2string = svgTransform2string;
Snap._.rgTransform = new RegExp("^[a-z][" + spaces + "]*-?\\.?\\d", "i");
function transform2matrix(tstr, bbox) {
var tdata = parseTransformString(tstr),
m = new Matrix;
@ -1983,7 +1979,7 @@ function extractTransform(el, tstr) {
}
tstr = svgTransform2string(tstr);
} else {
if (!rgTransform.test(tstr)) {
if (!Snap._.rgTransform.test(tstr)) {
tstr = svgTransform2string(tstr);
} else {
tstr = Str(tstr).replace(/\.{3}|\u2026/g, el._.transform || E);
@ -3020,15 +3016,22 @@ function arrayFirstValue(arr) {
}
return this;
};
// SIERRA Element.toString(): Recommend renaming this _outerSVG_ to keep it consistent with HTML & innerSVG, and also to avoid confusing it with what textContent() does. Cross-reference with innerSVG.
/*\
* Element.outerSVG
[ method ]
**
* Returns SVG code for the element, equivalent to HTML's `outerHTML`.
*
* See also @Element.innerSVG
= (string) SVG code for the element
\*/
/*\
* Element.toString
[ method ]
**
* Returns SVG code for the element, equivalent to HTML's `outerHTML`
= (string) SVG code for the element
* See @Element.outerSVG
\*/
elproto.toString = toString(1);
elproto.outerSVG = elproto.toString = toString(1);
/*\
* Element.innerSVG
[ method ]
@ -3325,6 +3328,12 @@ function gradientRadial(defs, cx, cy, r, fx, fy) {
| cy: 10,
| r: 10
| });
| // and the same as
| var c = paper.el("circle", {
| cx: 10,
| cy: 10,
| r: 10
| });
\*/
proto.el = function (name, attr) {
return make(name, this.node).attr(attr);
@ -3350,27 +3359,25 @@ function gradientRadial(defs, cx, cy, r, fx, fy) {
| var c = paper.rect(40, 40, 50, 50, 10);
\*/
proto.rect = function (x, y, w, h, rx, ry) {
var el = make("rect", this.node);
var attr;
if (ry == null) {
ry = rx;
}
if (is(x, "object") && "x" in x) {
el.attr(x);
attr = x;
} else if (x != null) {
el.attr({
attr = {
x: x,
y: y,
width: w,
height: h
});
};
if (rx != null) {
el.attr({
rx: rx,
ry: ry
});
attr.rx = rx;
attr.ry = ry;
}
}
return el;
return this.el("rect", attr);
};
/*\
* Paper.circle
@ -3387,17 +3394,17 @@ function gradientRadial(defs, cx, cy, r, fx, fy) {
| var c = paper.circle(50, 50, 40);
\*/
proto.circle = function (cx, cy, r) {
var el = make("circle", this.node);
var attr;
if (is(cx, "object") && "cx" in cx) {
el.attr(cx);
attr = cx;
} else if (cx != null) {
el.attr({
attr = {
cx: cx,
cy: cy,
r: r
});
};
}
return el;
return this.el("circle", attr);
};
/*\
@ -3413,7 +3420,7 @@ function gradientRadial(defs, cx, cy, r, fx, fy) {
- height (number) height of the image
= (object) the `image` element
* or
= (object) Raphaël element object with type `image`
= (object) Snap element object with type `image`
**
> Usage
| var c = paper.image("apple.png", 10, 10, 80, 80);
@ -5971,7 +5978,12 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
};
}
if (name == "transform" || name == "gradientTransform" || name == "patternTransform") {
// TODO: b could be an SVG transform string or matrix
if (b instanceof Snap.Matrix) {
b = b.toTransformString();
}
if (!Snap._.rgTransform.test(b)) {
b = Snap._.svgTransform2string(b);
}
return equaliseTransform(a, b, function () {
return el.getBBox(1);
});
@ -5984,6 +5996,23 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
f: getPath(A[0])
};
}
if (name == "points") {
A = Str(a).split(",");
B = Str(b).split(",");
// for (var i = 0, ii = Math.max(A.length, B.length); i < ii; i++) {
// if (A[i]) {
// A[i] = +A[i];
// }
// if (B[i]) {
// B[i] = +B[i];
// }
// }
return {
from: A,
to: B,
f: function (val) { return val; }
};
}
var aUnit = a.match(reUnit),
bUnit = Str(b).match(reUnit);
if (aUnit && aUnit == bUnit) {

View File

@ -183,6 +183,10 @@
<a href="#Element.mouseup" class="dr-method"><span>Element.mouseup()</span></a>
</li>
<li class="dr-lvl1">
<a href="#Element.outerSVG" class="dr-method"><span>Element.outerSVG()</span></a>
</li>
<li class="dr-lvl1">
<a href="#Element.parent" class="dr-method"><span>Element.parent()</span></a>
</li>
@ -1729,7 +1733,7 @@ paper.path(Snap.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width']
<article id="Matrix.split">
<header>
<h3 class="dr-method">Matrix.split()<a href="#Matrix.split" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 548 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#548">&#x27ad;</a></h3>
<h3 class="dr-method">Matrix.split()<a href="#Matrix.split" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 545 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#545">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Matrix.split-extra"></div>
@ -1839,7 +1843,7 @@ paper.path(Snap.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width']
<article id="Matrix.toTransformString">
<header>
<h3 class="dr-method">Matrix.toTransformString()<a href="#Matrix.toTransformString" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 591 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#591">&#x27ad;</a></h3>
<h3 class="dr-method">Matrix.toTransformString()<a href="#Matrix.toTransformString" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 587 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#587">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Matrix.toTransformString-extra"></div>
@ -1881,7 +1885,7 @@ paper.path(Snap.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width']
<article id="Snap.Matrix">
<header>
<h3 class="dr-method">Snap.Matrix(…)<a href="#Snap.Matrix" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 623 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#623">&#x27ad;</a></h3>
<h3 class="dr-method">Snap.Matrix(…)<a href="#Snap.Matrix" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 618 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#618">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Snap.Matrix-extra"></div>
@ -1986,7 +1990,7 @@ Returns a matrix based on the given parameters
<article id="Snap.getRGB">
<header>
<h3 class="dr-method">Snap.getRGB(color)<a href="#Snap.getRGB" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 658 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#658">&#x27ad;</a></h3>
<h3 class="dr-method">Snap.getRGB(color)<a href="#Snap.getRGB" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 653 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#653">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Snap.getRGB-extra"></div>
@ -2321,7 +2325,7 @@ Returns a matrix based on the given parameters
<article id="Snap.hsb">
<header>
<h3 class="dr-method">Snap.hsb(h, s, b)<a href="#Snap.hsb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 747 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#747">&#x27ad;</a></h3>
<h3 class="dr-method">Snap.hsb(h, s, b)<a href="#Snap.hsb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 742 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#742">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Snap.hsb-extra"></div>
@ -2387,7 +2391,7 @@ Returns a matrix based on the given parameters
<article id="Snap.hsl">
<header>
<h3 class="dr-method">Snap.hsl(h, s, l)<a href="#Snap.hsl" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 760 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#760">&#x27ad;</a></h3>
<h3 class="dr-method">Snap.hsl(h, s, l)<a href="#Snap.hsl" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 755 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#755">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Snap.hsl-extra"></div>
@ -2453,7 +2457,7 @@ Returns a matrix based on the given parameters
<article id="Snap.rgb">
<header>
<h3 class="dr-method">Snap.rgb(r, g, b)<a href="#Snap.rgb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 773 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#773">&#x27ad;</a></h3>
<h3 class="dr-method">Snap.rgb(r, g, b)<a href="#Snap.rgb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 768 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#768">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Snap.rgb-extra"></div>
@ -2519,7 +2523,7 @@ Returns a matrix based on the given parameters
<article id="Snap.color">
<header>
<h3 class="dr-method">Snap.color(clr)<a href="#Snap.color" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 860 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#860">&#x27ad;</a></h3>
<h3 class="dr-method">Snap.color(clr)<a href="#Snap.color" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 855 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#855">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Snap.color-extra"></div>
@ -2671,7 +2675,7 @@ Returns a matrix based on the given parameters
<article id="Snap.hsb2rgb">
<header>
<h3 class="dr-method">Snap.hsb2rgb(h, s, v)<a href="#Snap.hsb2rgb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 912 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#912">&#x27ad;</a></h3>
<h3 class="dr-method">Snap.hsb2rgb(h, s, v)<a href="#Snap.hsb2rgb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 907 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#907">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Snap.hsb2rgb-extra"></div>
@ -2789,7 +2793,7 @@ Returns a matrix based on the given parameters
<article id="Snap.hsl2rgb">
<header>
<h3 class="dr-method">Snap.hsl2rgb(h, s, l)<a href="#Snap.hsl2rgb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 948 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#948">&#x27ad;</a></h3>
<h3 class="dr-method">Snap.hsl2rgb(h, s, l)<a href="#Snap.hsl2rgb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 943 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#943">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Snap.hsl2rgb-extra"></div>
@ -2907,7 +2911,7 @@ Returns a matrix based on the given parameters
<article id="Snap.rgb2hsb">
<header>
<h3 class="dr-method">Snap.rgb2hsb(r, g, b)<a href="#Snap.rgb2hsb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 987 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#987">&#x27ad;</a></h3>
<h3 class="dr-method">Snap.rgb2hsb(r, g, b)<a href="#Snap.rgb2hsb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 982 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#982">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Snap.rgb2hsb-extra"></div>
@ -3017,7 +3021,7 @@ Returns a matrix based on the given parameters
<article id="Snap.rgb2hsl">
<header>
<h3 class="dr-method">Snap.rgb2hsl(r, g, b)<a href="#Snap.rgb2hsl" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1020 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1020">&#x27ad;</a></h3>
<h3 class="dr-method">Snap.rgb2hsl(r, g, b)<a href="#Snap.rgb2hsl" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1015 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1015">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Snap.rgb2hsl-extra"></div>
@ -3127,7 +3131,7 @@ Returns a matrix based on the given parameters
<article id="Snap.parsePathString">
<header>
<h3 class="dr-method">Snap.parsePathString(pathString)<a href="#Snap.parsePathString" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1054 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1054">&#x27ad;</a></h3>
<h3 class="dr-method">Snap.parsePathString(pathString)<a href="#Snap.parsePathString" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1049 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1049">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Snap.parsePathString-extra"></div>
@ -3188,7 +3192,7 @@ Parses given path string into an array of arrays of path segments
<article id="Snap.parseTransformString">
<header>
<h3 class="dr-method">Snap.parseTransformString(TString)<a href="#Snap.parseTransformString" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1107 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1107">&#x27ad;</a></h3>
<h3 class="dr-method">Snap.parseTransformString(TString)<a href="#Snap.parseTransformString" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1102 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1102">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Snap.parseTransformString-extra"></div>
@ -3249,7 +3253,7 @@ Parses given transform string into an array of transformations
<article id="Snap.select">
<header>
<h3 class="dr-method">Snap.select(query)<a href="#Snap.select" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1385 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1385">&#x27ad;</a></h3>
<h3 class="dr-method">Snap.select(query)<a href="#Snap.select" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1381 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1381">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Snap.select-extra"></div>
@ -3309,7 +3313,7 @@ Parses given transform string into an array of transformations
<article id="Snap.selectAll">
<header>
<h3 class="dr-method">Snap.selectAll(query)<a href="#Snap.selectAll" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1396 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1396">&#x27ad;</a></h3>
<h3 class="dr-method">Snap.selectAll(query)<a href="#Snap.selectAll" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1392 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1392">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Snap.selectAll-extra"></div>
@ -3369,7 +3373,7 @@ Parses given transform string into an array of transformations
<article id="Element.attr">
<header>
<h3 class="dr-method">Element.attr(…)<a href="#Element.attr" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1486 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1486">&#x27ad;</a></h3>
<h3 class="dr-method">Element.attr(…)<a href="#Element.attr" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1482 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1482">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.attr-extra"></div>
@ -3514,7 +3518,7 @@ console.log(el.attr("fill")); // #fc0</code></pre></section>
<article id="Element.getBBox">
<header>
<h3 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 1535 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1535">&#x27ad;</a></h3>
<h3 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 1531 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1531">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.getBBox-extra"></div>
@ -3696,7 +3700,7 @@ console.log(el.attr("fill")); // #fc0</code></pre></section>
<article id="Element.transform">
<header>
<h3 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 1579 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1579">&#x27ad;</a></h3>
<h3 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 1575 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1575">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.transform-extra"></div>
@ -3860,7 +3864,7 @@ console.log(el.attr("fill")); // #fc0</code></pre></section>
<article id="Element.parent">
<header>
<h3 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 1624 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1624">&#x27ad;</a></h3>
<h3 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 1620 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1620">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.parent-extra"></div>
@ -3902,7 +3906,7 @@ console.log(el.attr("fill")); // #fc0</code></pre></section>
<article id="Element.append">
<header>
<h3 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 1636 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1636">&#x27ad;</a></h3>
<h3 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 1632 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1632">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.append-extra"></div>
@ -3962,7 +3966,7 @@ console.log(el.attr("fill")); // #fc0</code></pre></section>
<article id="Element.add">
<header>
<h3 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 1642 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1642">&#x27ad;</a></h3>
<h3 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 1638 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1638">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.add-extra"></div>
@ -3987,7 +3991,7 @@ console.log(el.attr("fill")); // #fc0</code></pre></section>
<article id="Element.appendTo">
<header>
<h3 class="dr-method">Element.appendTo(el)<a href="#Element.appendTo" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1664 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1664">&#x27ad;</a></h3>
<h3 class="dr-method">Element.appendTo(el)<a href="#Element.appendTo" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1660 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1660">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.appendTo-extra"></div>
@ -4047,7 +4051,7 @@ console.log(el.attr("fill")); // #fc0</code></pre></section>
<article id="Element.prepend">
<header>
<h3 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 1678 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1678">&#x27ad;</a></h3>
<h3 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 1674 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1674">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.prepend-extra"></div>
@ -4107,7 +4111,7 @@ console.log(el.attr("fill")); // #fc0</code></pre></section>
<article id="Element.prependTo">
<header>
<h3 class="dr-method">Element.prependTo(el)<a href="#Element.prependTo" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1693 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1693">&#x27ad;</a></h3>
<h3 class="dr-method">Element.prependTo(el)<a href="#Element.prependTo" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1689 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1689">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.prependTo-extra"></div>
@ -4167,7 +4171,7 @@ console.log(el.attr("fill")); // #fc0</code></pre></section>
<article id="Element.before">
<header>
<h3 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 1707 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1707">&#x27ad;</a></h3>
<h3 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 1703 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1703">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.before-extra"></div>
@ -4227,7 +4231,7 @@ console.log(el.attr("fill")); // #fc0</code></pre></section>
<article id="Element.after">
<header>
<h3 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 1723 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1723">&#x27ad;</a></h3>
<h3 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 1719 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1719">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.after-extra"></div>
@ -4287,7 +4291,7 @@ console.log(el.attr("fill")); // #fc0</code></pre></section>
<article id="Element.insertBefore">
<header>
<h3 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 1738 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1738">&#x27ad;</a></h3>
<h3 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 1734 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1734">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.insertBefore-extra"></div>
@ -4347,7 +4351,7 @@ console.log(el.attr("fill")); // #fc0</code></pre></section>
<article id="Element.insertAfter">
<header>
<h3 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 1753 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1753">&#x27ad;</a></h3>
<h3 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 1749 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1749">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.insertAfter-extra"></div>
@ -4407,7 +4411,7 @@ console.log(el.attr("fill")); // #fc0</code></pre></section>
<article id="Element.remove">
<header>
<h3 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 1766 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1766">&#x27ad;</a></h3>
<h3 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 1762 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1762">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.remove-extra"></div>
@ -4449,7 +4453,7 @@ console.log(el.attr("fill")); // #fc0</code></pre></section>
<article id="Element.select">
<header>
<h3 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 1781 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1781">&#x27ad;</a></h3>
<h3 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 1777 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1777">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.select-extra"></div>
@ -4509,7 +4513,7 @@ console.log(el.attr("fill")); // #fc0</code></pre></section>
<article id="Element.selectAll">
<header>
<h3 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 1793 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1793">&#x27ad;</a></h3>
<h3 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 1789 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1789">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.selectAll-extra"></div>
@ -4571,7 +4575,7 @@ console.log(el.attr("fill")); // #fc0</code></pre></section>
<article id="Element.asPX">
<header>
<h3 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 1811 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1811">&#x27ad;</a></h3>
<h3 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 1807 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1807">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.asPX-extra"></div>
@ -4634,7 +4638,7 @@ console.log(el.attr("fill")); // #fc0</code></pre></section>
<article id="Element.use">
<header>
<h3 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 1826 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1826">&#x27ad;</a></h3>
<h3 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 1822 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1822">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.use-extra"></div>
@ -4676,7 +4680,7 @@ console.log(el.attr("fill")); // #fc0</code></pre></section>
<article id="Element.clone">
<header>
<h3 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 1855 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1855">&#x27ad;</a></h3>
<h3 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 1851 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1851">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.clone-extra"></div>
@ -4718,7 +4722,7 @@ console.log(el.attr("fill")); // #fc0</code></pre></section>
<article id="Element.toDefs">
<header>
<h3 class="dr-method">Element.toDefs()<a href="#Element.toDefs" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1935 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1935">&#x27ad;</a></h3>
<h3 class="dr-method">Element.toDefs()<a href="#Element.toDefs" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 1931 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1931">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.toDefs-extra"></div>
@ -4760,7 +4764,7 @@ console.log(el.attr("fill")); // #fc0</code></pre></section>
<article id="Element.pattern">
<header>
<h3 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 1965 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1965">&#x27ad;</a></h3>
<h3 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 1961 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#1961">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.pattern-extra"></div>
@ -4860,7 +4864,7 @@ c.attr({
<article id="Element.marker">
<header>
<h3 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 2006 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2006">&#x27ad;</a></h3>
<h3 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 2002 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2002">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.marker-extra"></div>
@ -4947,7 +4951,7 @@ To create a marker you have to specify the bounding rect and reference point:
<article id="Snap.animation">
<header>
<h3 class="dr-method">Snap.animation(attr, duration, [easing], [callback])<a href="#Snap.animation" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2065 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2065">&#x27ad;</a></h3>
<h3 class="dr-method">Snap.animation(attr, duration, [easing], [callback])<a href="#Snap.animation" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2061 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2061">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Snap.animation-extra"></div>
@ -5016,7 +5020,7 @@ To create a marker you have to specify the bounding rect and reference point:
<article id="Element.inAnim">
<header>
<h3 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 2082 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2082">&#x27ad;</a></h3>
<h3 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 2078 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2078">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.inAnim-extra"></div>
@ -5110,7 +5114,7 @@ To create a marker you have to specify the bounding rect and reference point:
<article id="Snap.animate">
<header>
<h3 class="dr-method">Snap.animate(from, to, setter, duration, [easing], [callback])<a href="#Snap.animate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2131 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2131">&#x27ad;</a></h3>
<h3 class="dr-method">Snap.animate(from, to, setter, duration, [easing], [callback])<a href="#Snap.animate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2127 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2127">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Snap.animate-extra"></div>
@ -5271,7 +5275,7 @@ rect.animate({x: 10}, 1000);</code></pre></section>
<article id="Element.stop">
<header>
<h3 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 2149 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2149">&#x27ad;</a></h3>
<h3 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 2145 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2145">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.stop-extra"></div>
@ -5313,7 +5317,7 @@ rect.animate({x: 10}, 1000);</code></pre></section>
<article id="Element.animate">
<header>
<h3 class="dr-method">Element.animate(attrs, duration, [easing], [callback])<a href="#Element.animate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2170 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2170">&#x27ad;</a></h3>
<h3 class="dr-method">Element.animate(attrs, duration, [easing], [callback])<a href="#Element.animate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2166 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2166">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.animate-extra"></div>
@ -5382,7 +5386,7 @@ rect.animate({x: 10}, 1000);</code></pre></section>
<article id="Element.data">
<header>
<h3 class="dr-method">Element.data(key, [value])<a href="#Element.data" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2242 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2242">&#x27ad;</a></h3>
<h3 class="dr-method">Element.data(key, [value])<a href="#Element.data" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2238 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2238">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.data-extra"></div>
@ -5504,7 +5508,7 @@ with <code>data-</code> attributes)
<article id="Element.removeData">
<header>
<h3 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 2267 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2267">&#x27ad;</a></h3>
<h3 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 2263 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2263">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.removeData-extra"></div>
@ -5563,18 +5567,19 @@ If key is not provided, removes all the data of the element.
</section>
</article>
<article id="undefined">
<article id="Element.outerSVG">
<header>
<h3 class="dr-method">undefined<a href="#undefined" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2283 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2283">&#x27ad;</a></h3>
<h3 class="dr-method">Element.outerSVG()<a href="#Element.outerSVG" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2280 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2280">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="undefined-extra"></div>
<div class="extra" id="Element.outerSVG-extra"></div>
<div class="dr-method">
<p>Returns SVG code for the element, equivalent to HTML&#39;s <code>outerHTML</code>
<p>Returns SVG code for the element, equivalent to HTML&#39;s <code>outerHTML</code>.
</p><p>See also <a href="#Element.innerSVG" class="dr-link">Element.innerSVG</a>
</p>
@ -5601,13 +5606,38 @@ If key is not provided, removes all the data of the element.
</div>
</section>
</article>
<article id="undefined">
<header>
<h3 class="dr-method">undefined<a href="#undefined" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2286 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2286">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="undefined-extra"></div>
<div class="dr-method">
<p>See <a href="#Element.outerSVG" class="dr-link">Element.outerSVG</a>
</p>
</div>
</section>
</article>
<article id="Element.innerSVG">
<header>
<h3 class="dr-method">Element.innerSVG()<a href="#Element.innerSVG" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2291 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2291">&#x27ad;</a></h3>
<h3 class="dr-method">Element.innerSVG()<a href="#Element.innerSVG" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2294 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2294">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Element.innerSVG-extra"></div>
@ -5649,7 +5679,7 @@ If key is not provided, removes all the data of the element.
<article id="Snap.parse">
<header>
<h3 class="dr-method">Snap.parse(svg)<a href="#Snap.parse" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2330 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2330">&#x27ad;</a></h3>
<h3 class="dr-method">Snap.parse(svg)<a href="#Snap.parse" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2333 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2333">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Snap.parse-extra"></div>
@ -5709,7 +5739,7 @@ If key is not provided, removes all the data of the element.
<article id="Fragment.select">
<header>
<h3 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 2362 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2362">&#x27ad;</a></h3>
<h3 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 2365 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2365">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Fragment.select-extra"></div>
@ -5734,7 +5764,7 @@ If key is not provided, removes all the data of the element.
<article id="Fragment.selectAll">
<header>
<h3 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 2369 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2369">&#x27ad;</a></h3>
<h3 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 2372 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2372">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Fragment.selectAll-extra"></div>
@ -5759,7 +5789,7 @@ If key is not provided, removes all the data of the element.
<article id="Snap.fragment">
<header>
<h3 class="dr-method">Snap.fragment(varargs)<a href="#Snap.fragment" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2380 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2380">&#x27ad;</a></h3>
<h3 class="dr-method">Snap.fragment(varargs)<a href="#Snap.fragment" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2383 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2383">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Snap.fragment-extra"></div>
@ -5819,7 +5849,7 @@ If key is not provided, removes all the data of the element.
<article id="Paper.el">
<header>
<h3 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 2581 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2581">&#x27ad;</a></h3>
<h3 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 2590 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2590">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Paper.el-extra"></div>
@ -5897,6 +5927,12 @@ var c = paper.el("circle").attr({
cx: 10,
cy: 10,
r: 10
});
// and the same as
var c = paper.el("circle", {
cx: 10,
cy: 10,
r: 10
});</code></pre></section>
@ -5909,7 +5945,7 @@ var c = paper.el("circle").attr({
<article id="Paper.rect">
<header>
<h3 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 2604 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2604">&#x27ad;</a></h3>
<h3 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 2613 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2613">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Paper.rect-extra"></div>
@ -6009,7 +6045,7 @@ var c = paper.rect(40, 40, 50, 50, 10);</code></pre></section>
<article id="Paper.circle">
<header>
<h3 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 2641 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2641">&#x27ad;</a></h3>
<h3 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 2648 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2648">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Paper.circle-extra"></div>
@ -6097,7 +6133,7 @@ var c = paper.rect(40, 40, 50, 50, 10);</code></pre></section>
<article id="Paper.image">
<header>
<h3 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 2673 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2673">&#x27ad;</a></h3>
<h3 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 2680 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2680">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Paper.image-extra"></div>
@ -6185,7 +6221,7 @@ var c = paper.rect(40, 40, 50, 50, 10);</code></pre></section>
<em class="dr-type-object">object</em>
<span class="dr-description">Raphaël element object with type <code>image</code></span>
<span class="dr-description">Snap element object with type <code>image</code></span>
</p>
@ -6219,7 +6255,7 @@ var c = paper.rect(40, 40, 50, 50, 10);</code></pre></section>
<article id="Paper.ellipse">
<header>
<h3 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 2716 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2716">&#x27ad;</a></h3>
<h3 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 2723 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2723">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Paper.ellipse-extra"></div>
@ -6310,7 +6346,7 @@ var c = paper.rect(40, 40, 50, 50, 10);</code></pre></section>
<article id="Paper.path">
<header>
<h3 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 2761 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2761">&#x27ad;</a></h3>
<h3 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 2768 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2768">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Paper.path-extra"></div>
@ -6578,7 +6614,7 @@ Note: there is a special case when a path consists of only three commands: <code
<article id="Paper.g">
<header>
<h3 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 2792 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2792">&#x27ad;</a></h3>
<h3 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 2799 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2799">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Paper.g-extra"></div>
@ -6687,7 +6723,7 @@ g.add(c2, c1);</code></pre></section>
<article id="Paper.group">
<header>
<h3 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 2798 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2798">&#x27ad;</a></h3>
<h3 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 2805 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2805">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Paper.group-extra"></div>
@ -6712,7 +6748,7 @@ g.add(c2, c1);</code></pre></section>
<article id="Paper.text">
<header>
<h3 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 2826 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2826">&#x27ad;</a></h3>
<h3 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 2833 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2833">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Paper.text-extra"></div>
@ -6801,7 +6837,7 @@ var t2 = paper.text(50, 50, ["S","n","a","p"]);</code></pre></section>
<article id="Paper.line">
<header>
<h3 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 2854 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2854">&#x27ad;</a></h3>
<h3 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 2861 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2861">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Paper.line-extra"></div>
@ -6892,7 +6928,7 @@ var t2 = paper.text(50, 50, ["S","n","a","p"]);</code></pre></section>
<article id="Paper.polyline">
<header>
<h3 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 2883 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2883">&#x27ad;</a></h3>
<h3 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 2890 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2890">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Paper.polyline-extra"></div>
@ -7004,7 +7040,7 @@ var p2 = paper.polyline(10, 10, 100, 100);</code></pre></section>
<article id="Paper.polygon">
<header>
<h3 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 2903 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2903">&#x27ad;</a></h3>
<h3 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 2910 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2910">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Paper.polygon-extra"></div>
@ -7029,7 +7065,7 @@ var p2 = paper.polyline(10, 10, 100, 100);</code></pre></section>
<article id="Paper.gradient">
<header>
<h3 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 2956 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2956">&#x27ad;</a></h3>
<h3 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 2963 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2963">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Paper.gradient-extra"></div>
@ -7227,7 +7263,7 @@ half the width, from black to white:
<article id="Paper.toString">
<header>
<h3 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 2972 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2972">&#x27ad;</a></h3>
<h3 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 2979 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2979">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Paper.toString-extra"></div>
@ -7269,7 +7305,7 @@ half the width, from black to white:
<article id="Paper.clear">
<header>
<h3 class="dr-method">Paper.clear()<a href="#Paper.clear" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2990 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2990">&#x27ad;</a></h3>
<h3 class="dr-method">Paper.clear()<a href="#Paper.clear" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2997 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#2997">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Paper.clear-extra"></div>
@ -7294,7 +7330,7 @@ half the width, from black to white:
<article id="Snap.ajax">
<header>
<h3 class="dr-method">Snap.ajax(…)<a href="#Snap.ajax" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 3021 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#3021">&#x27ad;</a></h3>
<h3 class="dr-method">Snap.ajax(…)<a href="#Snap.ajax" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 3028 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#3028">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Snap.ajax-extra"></div>
@ -7398,7 +7434,7 @@ half the width, from black to white:
<article id="Snap.load">
<header>
<h3 class="dr-method">Snap.load(url, callback, [scope])<a href="#Snap.load" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 3067 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#3067">&#x27ad;</a></h3>
<h3 class="dr-method">Snap.load(url, callback, [scope])<a href="#Snap.load" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 3074 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#3074">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Snap.load-extra"></div>
@ -7447,7 +7483,7 @@ half the width, from black to white:
<article id="Snap.getElementByPoint">
<header>
<h3 class="dr-method">Snap.getElementByPoint(x, y)<a href="#Snap.getElementByPoint" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 3496 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#3496">&#x27ad;</a></h3>
<h3 class="dr-method">Snap.getElementByPoint(x, y)<a href="#Snap.getElementByPoint" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 3503 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#3503">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Snap.getElementByPoint-extra"></div>
@ -7532,7 +7568,7 @@ half the width, from black to white:
<article id="Snap.plugin">
<header>
<h3 class="dr-method">Snap.plugin(f)<a href="#Snap.plugin" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 3531 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#3531">&#x27ad;</a></h3>
<h3 class="dr-method">Snap.plugin(f)<a href="#Snap.plugin" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 3538 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#3538">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Snap.plugin-extra"></div>

View File

@ -123,7 +123,12 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
};
}
if (name == "transform" || name == "gradientTransform" || name == "patternTransform") {
// TODO: b could be an SVG transform string or matrix
if (b instanceof Snap.Matrix) {
b = b.toTransformString();
}
if (!Snap._.rgTransform.test(b)) {
b = Snap._.svgTransform2string(b);
}
return equaliseTransform(a, b, function () {
return el.getBBox(1);
});
@ -136,6 +141,15 @@ Snap.plugin(function (Snap, Element, Paper, glob) {
f: getPath(A[0])
};
}
if (name == "points") {
A = Str(a).split(",");
B = Str(b).split(",");
return {
from: A,
to: B,
f: function (val) { return val; }
};
}
var aUnit = a.match(reUnit),
bUnit = Str(b).match(reUnit);
if (aUnit && aUnit == bUnit) {

View File

@ -114,11 +114,11 @@ var mina = (function (eve) {
if (isArray(a.start)) {
res = [];
for (var j = 0, jj = a.start.length; j < jj; j++) {
res[j] = a.start[j] +
res[j] = +a.start[j] +
(a.end[j] - a.start[j]) * a.easing(a.s);
}
} else {
res = a.start + (a.end - a.start) * a.easing(a.s);
res = +a.start + (a.end - a.start) * a.easing(a.s);
}
a.set(res);
}

View File

@ -528,9 +528,6 @@ function Matrix(a, b, c, d, e, f) {
a[0] && (a[0] /= mag);
a[1] && (a[1] /= mag);
}
// SIERRA Matrix.split(): HTML formatting for the return value is scrambled. It should appear _Returns: {OBJECT} in format:..._
// SIERRA Matrix.split(): the _shear_ parameter needs to be detailed. Is it an angle? What does it affect?
// SIERRA Matrix.split(): The idea of _simple_ transforms needs to be detailed and contrasted with any alternatives.
/*\
* Matrix.split
[ method ]
@ -580,7 +577,6 @@ function Matrix(a, b, c, d, e, f) {
out.noRotation = !+out.shear.toFixed(9) && !out.rotate;
return out;
};
// SIERRA Matrix.toTransformString(): The format of the string needs to be detailed.
/*\
* Matrix.toTransformString
[ method ]
@ -602,7 +598,6 @@ function Matrix(a, b, c, d, e, f) {
}
};
})(Matrix.prototype);
// SIERRA Unclear the difference between the two matrix formats ("parameters" vs svgMatrix). See my comment about Element.matrix().
/*\
* Snap.Matrix
[ method ]
@ -1152,7 +1147,8 @@ function svgTransform2string(tstr) {
});
return res;
}
var rgTransform = new RegExp("^[a-z][" + spaces + "]*-?\\.?\\d", "i");
Snap._.svgTransform2string = svgTransform2string;
Snap._.rgTransform = new RegExp("^[a-z][" + spaces + "]*-?\\.?\\d", "i");
function transform2matrix(tstr, bbox) {
var tdata = parseTransformString(tstr),
m = new Matrix;
@ -1168,9 +1164,7 @@ function transform2matrix(tstr, bbox) {
x2,
y2,
bb;
if (command == "t" && tlen == 2){
m.translate(t[1], 0);
} else if (command == "t" && tlen == 3) {
if (command == "t" && tlen == 3) {
if (absolute) {
x1 = inver.x(0, 0);
y1 = inver.y(0, 0);
@ -1237,7 +1231,7 @@ function extractTransform(el, tstr) {
}
tstr = svgTransform2string(tstr);
} else {
if (!rgTransform.test(tstr)) {
if (!Snap._.rgTransform.test(tstr)) {
tstr = svgTransform2string(tstr);
} else {
tstr = Str(tstr).replace(/\.{3}|\u2026/g, el._.transform || E);
@ -2586,6 +2580,12 @@ function gradientRadial(defs, cx, cy, r, fx, fy) {
| cy: 10,
| r: 10
| });
| // and the same as
| var c = paper.el("circle", {
| cx: 10,
| cy: 10,
| r: 10
| });
\*/
proto.el = function (name, attr) {
return make(name, this.node).attr(attr);
@ -2611,27 +2611,25 @@ function gradientRadial(defs, cx, cy, r, fx, fy) {
| var c = paper.rect(40, 40, 50, 50, 10);
\*/
proto.rect = function (x, y, w, h, rx, ry) {
var el = make("rect", this.node);
var attr;
if (ry == null) {
ry = rx;
}
if (is(x, "object") && "x" in x) {
el.attr(x);
attr = x;
} else if (x != null) {
el.attr({
attr = {
x: x,
y: y,
width: w,
height: h
});
};
if (rx != null) {
el.attr({
rx: rx,
ry: ry
});
attr.rx = rx;
attr.ry = ry;
}
}
return el;
return this.el("rect", attr);
};
/*\
* Paper.circle
@ -2648,17 +2646,17 @@ function gradientRadial(defs, cx, cy, r, fx, fy) {
| var c = paper.circle(50, 50, 40);
\*/
proto.circle = function (cx, cy, r) {
var el = make("circle", this.node);
var attr;
if (is(cx, "object") && "cx" in cx) {
el.attr(cx);
attr = cx;
} else if (cx != null) {
el.attr({
attr = {
cx: cx,
cy: cy,
r: r
});
};
}
return el;
return this.el("circle", attr);
};
/*\
@ -2674,7 +2672,7 @@ function gradientRadial(defs, cx, cy, r, fx, fy) {
- height (number) height of the image
= (object) the `image` element
* or
= (object) Raphaël element object with type `image`
= (object) Snap element object with type `image`
**
> Usage
| var c = paper.image("apple.png", 10, 10, 80, 80);