\n * Note that `%` can be used any time: `rgb(20%, 255, 50%)`.\n = (object) RGB object in the following format:\n o {\n o r (number) red,\n o g (number) green,\n o b (number) blue,\n o hex (string) color in HTML/CSS format: #••••••,\n o error (boolean) true if string can't be parsed\n o }\n\\*/\nSnap.getRGB = cacher(function (colour) {\n if (!colour || !!((colour = Str(colour)).indexOf(\"-\") + 1)) {\n return {r: -1, g: -1, b: -1, hex: \"none\", error: 1, toString: rgbtoString};\n }\n if (colour == \"none\") {\n return {r: -1, g: -1, b: -1, hex: \"none\", toString: rgbtoString};\n }\n !(hsrg[has](colour.toLowerCase().substring(0, 2)) || colour.charAt() == \"#\") && (colour = toHex(colour));\n if (!colour) {\n return {r: -1, g: -1, b: -1, hex: \"none\", error: 1, toString: rgbtoString};\n }\n var res,\n red,\n green,\n blue,\n opacity,\n t,\n values,\n rgb = colour.match(colourRegExp);\n if (rgb) {\n if (rgb[2]) {\n blue = toInt(rgb[2].substring(5), 16);\n green = toInt(rgb[2].substring(3, 5), 16);\n red = toInt(rgb[2].substring(1, 3), 16);\n }\n if (rgb[3]) {\n blue = toInt((t = rgb[3].charAt(3)) + t, 16);\n green = toInt((t = rgb[3].charAt(2)) + t, 16);\n red = toInt((t = rgb[3].charAt(1)) + t, 16);\n }\n if (rgb[4]) {\n values = rgb[4].split(commaSpaces);\n red = toFloat(values[0]);\n values[0].slice(-1) == \"%\" && (red *= 2.55);\n green = toFloat(values[1]);\n values[1].slice(-1) == \"%\" && (green *= 2.55);\n blue = toFloat(values[2]);\n values[2].slice(-1) == \"%\" && (blue *= 2.55);\n rgb[1].toLowerCase().slice(0, 4) == \"rgba\" && (opacity = toFloat(values[3]));\n values[3] && values[3].slice(-1) == \"%\" && (opacity /= 100);\n }\n if (rgb[5]) {\n values = rgb[5].split(commaSpaces);\n red = toFloat(values[0]);\n values[0].slice(-1) == \"%\" && (red /= 100);\n green = toFloat(values[1]);\n values[1].slice(-1) == \"%\" && (green /= 100);\n blue = toFloat(values[2]);\n values[2].slice(-1) == \"%\" && (blue /= 100);\n (values[0].slice(-3) == \"deg\" || values[0].slice(-1) == \"\\xb0\") && (red /= 360);\n rgb[1].toLowerCase().slice(0, 4) == \"hsba\" && (opacity = toFloat(values[3]));\n values[3] && values[3].slice(-1) == \"%\" && (opacity /= 100);\n return Snap.hsb2rgb(red, green, blue, opacity);\n }\n if (rgb[6]) {\n values = rgb[6].split(commaSpaces);\n red = toFloat(values[0]);\n values[0].slice(-1) == \"%\" && (red /= 100);\n green = toFloat(values[1]);\n values[1].slice(-1) == \"%\" && (green /= 100);\n blue = toFloat(values[2]);\n values[2].slice(-1) == \"%\" && (blue /= 100);\n (values[0].slice(-3) == \"deg\" || values[0].slice(-1) == \"\\xb0\") && (red /= 360);\n rgb[1].toLowerCase().slice(0, 4) == \"hsla\" && (opacity = toFloat(values[3]));\n values[3] && values[3].slice(-1) == \"%\" && (opacity /= 100);\n return Snap.hsl2rgb(red, green, blue, opacity);\n }\n red = mmin(math.round(red), 255);\n green = mmin(math.round(green), 255);\n blue = mmin(math.round(blue), 255);\n opacity = mmin(mmax(opacity, 0), 1);\n rgb = {r: red, g: green, b: blue, toString: rgbtoString};\n rgb.hex = \"#\" + (16777216 | blue | green << 8 | red << 16).toString(16).slice(1);\n rgb.opacity = is(opacity, \"finite\") ? opacity : 1;\n return rgb;\n }\n return {r: -1, g: -1, b: -1, hex: \"none\", error: 1, toString: rgbtoString};\n}, Snap);\n/*\\\n * Snap.hsb\n [ method ]\n **\n * Converts HSB values to a hex representation of the color\n - h (number) hue\n - s (number) saturation\n - b (number) value or brightness\n = (string) hex representation of the color\n\\*/\nSnap.hsb = cacher(function (h, s, b) {\n return Snap.hsb2rgb(h, s, b).hex;\n});\n/*\\\n * Snap.hsl\n [ method ]\n **\n * Converts HSL values to a hex representation of the color\n - h (number) hue\n - s (number) saturation\n - l (number) luminosity\n = (string) hex representation of the color\n\\*/\nSnap.hsl = cacher(function (h, s, l) {\n return Snap.hsl2rgb(h, s, l).hex;\n});\n/*\\\n * Snap.rgb\n [ method ]\n **\n * Converts RGB values to a hex representation of the color\n - r (number) red\n - g (number) green\n - b (number) blue\n = (string) hex representation of the color\n\\*/\nSnap.rgb = cacher(function (r, g, b, o) {\n if (is(o, \"finite\")) {\n var round = math.round;\n return \"rgba(\" + [round(r), round(g), round(b), +o.toFixed(2)] + \")\";\n }\n return \"#\" + (16777216 | b | g << 8 | r << 16).toString(16).slice(1);\n});\nvar toHex = function (color) {\n var i = glob.doc.getElementsByTagName(\"head\")[0] || glob.doc.getElementsByTagName(\"svg\")[0],\n red = \"rgb(255, 0, 0)\";\n toHex = cacher(function (color) {\n if (color.toLowerCase() == \"red\") {\n return red;\n }\n i.style.color = red;\n i.style.color = color;\n var out = glob.doc.defaultView.getComputedStyle(i, E).getPropertyValue(\"color\");\n return out == red ? null : out;\n });\n return toHex(color);\n},\nhsbtoString = function () {\n return \"hsb(\" + [this.h, this.s, this.b] + \")\";\n},\nhsltoString = function () {\n return \"hsl(\" + [this.h, this.s, this.l] + \")\";\n},\nrgbtoString = function () {\n return this.opacity == 1 || this.opacity == null ?\n this.hex :\n \"rgba(\" + [this.r, this.g, this.b, this.opacity] + \")\";\n},\nprepareRGB = function (r, g, b) {\n if (g == null && is(r, \"object\") && \"r\" in r && \"g\" in r && \"b\" in r) {\n b = r.b;\n g = r.g;\n r = r.r;\n }\n if (g == null && is(r, string)) {\n var clr = Snap.getRGB(r);\n r = clr.r;\n g = clr.g;\n b = clr.b;\n }\n if (r > 1 || g > 1 || b > 1) {\n r /= 255;\n g /= 255;\n b /= 255;\n }\n\n return [r, g, b];\n},\npackageRGB = function (r, g, b, o) {\n r = math.round(r * 255);\n g = math.round(g * 255);\n b = math.round(b * 255);\n var rgb = {\n r: r,\n g: g,\n b: b,\n opacity: is(o, \"finite\") ? o : 1,\n hex: Snap.rgb(r, g, b),\n toString: rgbtoString\n };\n is(o, \"finite\") && (rgb.opacity = o);\n return rgb;\n};\n/*\\\n * Snap.color\n [ method ]\n **\n * Parses the color string and returns an object featuring the color's component values\n - clr (string) color string in one of the supported formats (see @Snap.getRGB)\n = (object) Combined RGB/HSB object in the following format:\n o {\n o r (number) red,\n o g (number) green,\n o b (number) blue,\n o hex (string) color in HTML/CSS format: #••••••,\n o error (boolean) `true` if string can't be parsed,\n o h (number) hue,\n o s (number) saturation,\n o v (number) value (brightness),\n o l (number) lightness\n o }\n\\*/\nSnap.color = function (clr) {\n var rgb;\n if (is(clr, \"object\") && \"h\" in clr && \"s\" in clr && \"b\" in clr) {\n rgb = Snap.hsb2rgb(clr);\n clr.r = rgb.r;\n clr.g = rgb.g;\n clr.b = rgb.b;\n clr.opacity = 1;\n clr.hex = rgb.hex;\n } else if (is(clr, \"object\") && \"h\" in clr && \"s\" in clr && \"l\" in clr) {\n rgb = Snap.hsl2rgb(clr);\n clr.r = rgb.r;\n clr.g = rgb.g;\n clr.b = rgb.b;\n clr.opacity = 1;\n clr.hex = rgb.hex;\n } else {\n if (is(clr, \"string\")) {\n clr = Snap.getRGB(clr);\n }\n if (is(clr, \"object\") && \"r\" in clr && \"g\" in clr && \"b\" in clr && !(\"error\" in clr)) {\n rgb = Snap.rgb2hsl(clr);\n clr.h = rgb.h;\n clr.s = rgb.s;\n clr.l = rgb.l;\n rgb = Snap.rgb2hsb(clr);\n clr.v = rgb.b;\n } else {\n clr = {hex: \"none\"};\n clr.r = clr.g = clr.b = clr.h = clr.s = clr.v = clr.l = -1;\n clr.error = 1;\n }\n }\n clr.toString = rgbtoString;\n return clr;\n};\n/*\\\n * Snap.hsb2rgb\n [ method ]\n **\n * Converts HSB values to an RGB object\n - h (number) hue\n - s (number) saturation\n - v (number) value or brightness\n = (object) RGB object in the following format:\n o {\n o r (number) red,\n o g (number) green,\n o b (number) blue,\n o hex (string) color in HTML/CSS format: #••••••\n o }\n\\*/\nSnap.hsb2rgb = function (h, s, v, o) {\n if (is(h, \"object\") && \"h\" in h && \"s\" in h && \"b\" in h) {\n v = h.b;\n s = h.s;\n o = h.o;\n h = h.h;\n }\n h *= 360;\n var R, G, B, X, C;\n h = h % 360 / 60;\n C = v * s;\n X = C * (1 - abs(h % 2 - 1));\n R = G = B = v - C;\n\n h = ~~h;\n R += [C, X, 0, 0, X, C][h];\n G += [X, C, C, X, 0, 0][h];\n B += [0, 0, X, C, C, X][h];\n return packageRGB(R, G, B, o);\n};\n/*\\\n * Snap.hsl2rgb\n [ method ]\n **\n * Converts HSL values to an RGB object\n - h (number) hue\n - s (number) saturation\n - l (number) luminosity\n = (object) RGB object in the following format:\n o {\n o r (number) red,\n o g (number) green,\n o b (number) blue,\n o hex (string) color in HTML/CSS format: #••••••\n o }\n\\*/\nSnap.hsl2rgb = function (h, s, l, o) {\n if (is(h, \"object\") && \"h\" in h && \"s\" in h && \"l\" in h) {\n l = h.l;\n s = h.s;\n h = h.h;\n }\n if (h > 1 || s > 1 || l > 1) {\n h /= 360;\n s /= 100;\n l /= 100;\n }\n h *= 360;\n var R, G, B, X, C;\n h = h % 360 / 60;\n C = 2 * s * (l < .5 ? l : 1 - l);\n X = C * (1 - abs(h % 2 - 1));\n R = G = B = l - C / 2;\n\n h = ~~h;\n R += [C, X, 0, 0, X, C][h];\n G += [X, C, C, X, 0, 0][h];\n B += [0, 0, X, C, C, X][h];\n return packageRGB(R, G, B, o);\n};\n/*\\\n * Snap.rgb2hsb\n [ method ]\n **\n * Converts RGB values to an HSB object\n - r (number) red\n - g (number) green\n - b (number) blue\n = (object) HSB object in the following format:\n o {\n o h (number) hue,\n o s (number) saturation,\n o b (number) brightness\n o }\n\\*/\nSnap.rgb2hsb = function (r, g, b) {\n b = prepareRGB(r, g, b);\n r = b[0];\n g = b[1];\n b = b[2];\n\n var H, S, V, C;\n V = mmax(r, g, b);\n C = V - mmin(r, g, b);\n H = C == 0 ? null :\n V == r ? (g - b) / C :\n V == g ? (b - r) / C + 2 :\n (r - g) / C + 4;\n H = (H + 360) % 6 * 60 / 360;\n S = C == 0 ? 0 : C / V;\n return {h: H, s: S, b: V, toString: hsbtoString};\n};\n/*\\\n * Snap.rgb2hsl\n [ method ]\n **\n * Converts RGB values to an HSL object\n - r (number) red\n - g (number) green\n - b (number) blue\n = (object) HSL object in the following format:\n o {\n o h (number) hue,\n o s (number) saturation,\n o l (number) luminosity\n o }\n\\*/\nSnap.rgb2hsl = function (r, g, b) {\n b = prepareRGB(r, g, b);\n r = b[0];\n g = b[1];\n b = b[2];\n\n var H, S, L, M, m, C;\n M = mmax(r, g, b);\n m = mmin(r, g, b);\n C = M - m;\n H = C == 0 ? null :\n M == r ? (g - b) / C :\n M == g ? (b - r) / C + 2 :\n (r - g) / C + 4;\n H = (H + 360) % 6 * 60 / 360;\n L = (M + m) / 2;\n S = C == 0 ? 0 :\n L < .5 ? C / (2 * L) :\n C / (2 - 2 * L);\n return {h: H, s: S, l: L, toString: hsltoString};\n};\n\n// Transformations\n/*\\\n * Snap.parsePathString\n [ method ]\n **\n * Utility method\n **\n * Parses given path string into an array of arrays of path segments\n - pathString (string|array) path string or array of segments (in the last case it is returned straight away)\n = (array) array of segments\n\\*/\nSnap.parsePathString = function (pathString) {\n if (!pathString) {\n return null;\n }\n var pth = Snap.path(pathString);\n if (pth.arr) {\n return Snap.path.clone(pth.arr);\n }\n\n var paramCounts = {a: 7, c: 6, o: 2, h: 1, l: 2, m: 2, r: 4, q: 4, s: 4, t: 2, v: 1, u: 3, z: 0},\n data = [];\n if (is(pathString, \"array\") && is(pathString[0], \"array\")) { // rough assumption\n data = Snap.path.clone(pathString);\n }\n if (!data.length) {\n Str(pathString).replace(pathCommand, function (a, b, c) {\n var params = [],\n name = b.toLowerCase();\n c.replace(pathValues, function (a, b) {\n b && params.push(+b);\n });\n if (name == \"m\" && params.length > 2) {\n data.push([b].concat(params.splice(0, 2)));\n name = \"l\";\n b = b == \"m\" ? \"l\" : \"L\";\n }\n if (name == \"o\" && params.length == 1) {\n data.push([b, params[0]]);\n }\n if (name == \"r\") {\n data.push([b].concat(params));\n } else while (params.length >= paramCounts[name]) {\n data.push([b].concat(params.splice(0, paramCounts[name])));\n if (!paramCounts[name]) {\n break;\n }\n }\n });\n }\n data.toString = Snap.path.toString;\n pth.arr = Snap.path.clone(data);\n return data;\n};\n/*\\\n * Snap.parseTransformString\n [ method ]\n **\n * Utility method\n **\n * Parses given transform string into an array of transformations\n - TString (string|array) transform string or array of transformations (in the last case it is returned straight away)\n = (array) array of transformations\n\\*/\nvar parseTransformString = Snap.parseTransformString = function (TString) {\n if (!TString) {\n return null;\n }\n var paramCounts = {r: 3, s: 4, t: 2, m: 6},\n data = [];\n if (is(TString, \"array\") && is(TString[0], \"array\")) { // rough assumption\n data = Snap.path.clone(TString);\n }\n if (!data.length) {\n Str(TString).replace(tCommand, function (a, b, c) {\n var params = [],\n name = b.toLowerCase();\n c.replace(pathValues, function (a, b) {\n b && params.push(+b);\n });\n data.push([b].concat(params));\n });\n }\n data.toString = Snap.path.toString;\n return data;\n};\nfunction svgTransform2string(tstr) {\n var res = [];\n tstr = tstr.replace(/(?:^|\\s)(\\w+)\\(([^)]+)\\)/g, function (all, name, params) {\n params = params.split(/\\s*,\\s*|\\s+/);\n if (name == \"rotate\" && params.length == 1) {\n params.push(0, 0);\n }\n if (name == \"scale\") {\n if (params.length > 2) {\n params = params.slice(0, 2);\n } else if (params.length == 2) {\n params.push(0, 0);\n }\n if (params.length == 1) {\n params.push(params[0], 0, 0);\n }\n }\n if (name == \"skewX\") {\n res.push([\"m\", 1, 0, math.tan(rad(params[0])), 1, 0, 0]);\n } else if (name == \"skewY\") {\n res.push([\"m\", 1, math.tan(rad(params[0])), 0, 1, 0, 0]);\n } else {\n res.push([name.charAt(0)].concat(params));\n }\n return all;\n });\n return res;\n}\nSnap._.svgTransform2string = svgTransform2string;\nSnap._.rgTransform = /^[a-z][\\s]*-?\\.?\\d/i;\nfunction transform2matrix(tstr, bbox) {\n var tdata = parseTransformString(tstr),\n m = new Snap.Matrix;\n if (tdata) {\n for (var i = 0, ii = tdata.length; i < ii; i++) {\n var t = tdata[i],\n tlen = t.length,\n command = Str(t[0]).toLowerCase(),\n absolute = t[0] != command,\n inver = absolute ? m.invert() : 0,\n x1,\n y1,\n x2,\n y2,\n bb;\n if (command == \"t\" && tlen == 2){\n m.translate(t[1], 0);\n } else if (command == \"t\" && tlen == 3) {\n if (absolute) {\n x1 = inver.x(0, 0);\n y1 = inver.y(0, 0);\n x2 = inver.x(t[1], t[2]);\n y2 = inver.y(t[1], t[2]);\n m.translate(x2 - x1, y2 - y1);\n } else {\n m.translate(t[1], t[2]);\n }\n } else if (command == \"r\") {\n if (tlen == 2) {\n bb = bb || bbox;\n m.rotate(t[1], bb.x + bb.width / 2, bb.y + bb.height / 2);\n } else if (tlen == 4) {\n if (absolute) {\n x2 = inver.x(t[2], t[3]);\n y2 = inver.y(t[2], t[3]);\n m.rotate(t[1], x2, y2);\n } else {\n m.rotate(t[1], t[2], t[3]);\n }\n }\n } else if (command == \"s\") {\n if (tlen == 2 || tlen == 3) {\n bb = bb || bbox;\n m.scale(t[1], t[tlen - 1], bb.x + bb.width / 2, bb.y + bb.height / 2);\n } else if (tlen == 4) {\n if (absolute) {\n x2 = inver.x(t[2], t[3]);\n y2 = inver.y(t[2], t[3]);\n m.scale(t[1], t[1], x2, y2);\n } else {\n m.scale(t[1], t[1], t[2], t[3]);\n }\n } else if (tlen == 5) {\n if (absolute) {\n x2 = inver.x(t[3], t[4]);\n y2 = inver.y(t[3], t[4]);\n m.scale(t[1], t[2], x2, y2);\n } else {\n m.scale(t[1], t[2], t[3], t[4]);\n }\n }\n } else if (command == \"m\" && tlen == 7) {\n m.add(t[1], t[2], t[3], t[4], t[5], t[6]);\n }\n }\n }\n return m;\n}\nSnap._.transform2matrix = transform2matrix;\nSnap._unit2px = unit2px;\nvar contains = glob.doc.contains || glob.doc.compareDocumentPosition ?\n function (a, b) {\n var adown = a.nodeType == 9 ? a.documentElement : a,\n bup = b && b.parentNode;\n return a == bup || !!(bup && bup.nodeType == 1 && (\n adown.contains ?\n adown.contains(bup) :\n a.compareDocumentPosition && a.compareDocumentPosition(bup) & 16\n ));\n } :\n function (a, b) {\n if (b) {\n while (b) {\n b = b.parentNode;\n if (b == a) {\n return true;\n }\n }\n }\n return false;\n };\nfunction getSomeDefs(el) {\n var p = el.node.ownerSVGElement && wrap(el.node.ownerSVGElement) ||\n el.node.parentNode && wrap(el.node.parentNode) ||\n Snap.select(\"svg\") ||\n Snap(0, 0),\n pdefs = p.select(\"defs\"),\n defs = pdefs == null ? false : pdefs.node;\n if (!defs) {\n defs = make(\"defs\", p.node).node;\n }\n return defs;\n}\nfunction getSomeSVG(el) {\n return el.node.ownerSVGElement && wrap(el.node.ownerSVGElement) || Snap.select(\"svg\");\n}\nSnap._.getSomeDefs = getSomeDefs;\nSnap._.getSomeSVG = getSomeSVG;\nfunction unit2px(el, name, value) {\n var svg = getSomeSVG(el).node,\n out = {},\n mgr = svg.querySelector(\".svg---mgr\");\n if (!mgr) {\n mgr = $(\"rect\");\n $(mgr, {x: -9e9, y: -9e9, width: 10, height: 10, \"class\": \"svg---mgr\", fill: \"none\"});\n svg.appendChild(mgr);\n }\n function getW(val) {\n if (val == null) {\n return E;\n }\n if (val == +val) {\n return val;\n }\n $(mgr, {width: val});\n try {\n return mgr.getBBox().width;\n } catch (e) {\n return 0;\n }\n }\n function getH(val) {\n if (val == null) {\n return E;\n }\n if (val == +val) {\n return val;\n }\n $(mgr, {height: val});\n try {\n return mgr.getBBox().height;\n } catch (e) {\n return 0;\n }\n }\n function set(nam, f) {\n if (name == null) {\n out[nam] = f(el.attr(nam) || 0);\n } else if (nam == name) {\n out = f(value == null ? el.attr(nam) || 0 : value);\n }\n }\n switch (el.type) {\n case \"rect\":\n set(\"rx\", getW);\n set(\"ry\", getH);\n case \"image\":\n set(\"width\", getW);\n set(\"height\", getH);\n case \"text\":\n set(\"x\", getW);\n set(\"y\", getH);\n break;\n case \"circle\":\n set(\"cx\", getW);\n set(\"cy\", getH);\n set(\"r\", getW);\n break;\n case \"ellipse\":\n set(\"cx\", getW);\n set(\"cy\", getH);\n set(\"rx\", getW);\n set(\"ry\", getH);\n break;\n case \"line\":\n set(\"x1\", getW);\n set(\"x2\", getW);\n set(\"y1\", getH);\n set(\"y2\", getH);\n break;\n case \"marker\":\n set(\"refX\", getW);\n set(\"markerWidth\", getW);\n set(\"refY\", getH);\n set(\"markerHeight\", getH);\n break;\n case \"radialGradient\":\n set(\"fx\", getW);\n set(\"fy\", getH);\n break;\n case \"tspan\":\n set(\"dx\", getW);\n set(\"dy\", getH);\n break;\n default:\n set(name, getW);\n }\n svg.removeChild(mgr);\n return out;\n}\n/*\\\n * Snap.select\n [ method ]\n **\n * Wraps a DOM element specified by CSS selector as @Element\n - query (string) CSS selector of the element\n = (Element) the current element\n\\*/\nSnap.select = function (query) {\n query = Str(query).replace(/([^\\\\]):/g, \"$1\\\\:\");\n return wrap(glob.doc.querySelector(query));\n};\n/*\\\n * Snap.selectAll\n [ method ]\n **\n * Wraps DOM elements specified by CSS selector as set or array of @Element\n - query (string) CSS selector of the element\n = (Element) the current element\n\\*/\nSnap.selectAll = function (query) {\n var nodelist = glob.doc.querySelectorAll(query),\n set = (Snap.set || Array)();\n for (var i = 0; i < nodelist.length; i++) {\n set.push(wrap(nodelist[i]));\n }\n return set;\n};\n\nfunction add2group(list) {\n if (!is(list, \"array\")) {\n list = Array.prototype.slice.call(arguments, 0);\n }\n var i = 0,\n j = 0,\n node = this.node;\n while (this[i]) delete this[i++];\n for (i = 0; i < list.length; i++) {\n if (list[i].type == \"set\") {\n list[i].forEach(function (el) {\n node.appendChild(el.node);\n });\n } else {\n node.appendChild(list[i].node);\n }\n }\n var children = node.childNodes;\n for (i = 0; i < children.length; i++) {\n this[j++] = wrap(children[i]);\n }\n return this;\n}\n// Hub garbage collector every 10s\nsetInterval(function () {\n for (var key in hub) if (hub[has](key)) {\n var el = hub[key],\n node = el.node;\n if (el.type != \"svg\" && !node.ownerSVGElement || el.type == \"svg\" && (!node.parentNode || \"ownerSVGElement\" in node.parentNode && !node.ownerSVGElement)) {\n delete hub[key];\n }\n }\n}, 1e4);\nfunction Element(el) {\n if (el.snap in hub) {\n return hub[el.snap];\n }\n var svg;\n try {\n svg = el.ownerSVGElement;\n } catch(e) {}\n /*\\\n * Element.node\n [ property (object) ]\n **\n * Gives you a reference to the DOM object, so you can assign event handlers or just mess around.\n > Usage\n | // draw a circle at coordinate 10,10 with radius of 10\n | var c = paper.circle(10, 10, 10);\n | c.node.onclick = function () {\n | c.attr(\"fill\", \"red\");\n | };\n \\*/\n this.node = el;\n if (svg) {\n this.paper = new Paper(svg);\n }\n /*\\\n * Element.type\n [ property (string) ]\n **\n * SVG tag name of the given element.\n \\*/\n this.type = el.tagName || el.nodeName;\n var id = this.id = ID(this);\n this.anims = {};\n this._ = {\n transform: []\n };\n el.snap = id;\n hub[id] = this;\n if (this.type == \"g\") {\n this.add = add2group;\n }\n if (this.type in {g: 1, mask: 1, pattern: 1, symbol: 1}) {\n for (var method in Paper.prototype) if (Paper.prototype[has](method)) {\n this[method] = Paper.prototype[method];\n }\n }\n}\n /*\\\n * Element.attr\n [ method ]\n **\n * Gets or sets given attributes of the element.\n **\n - params (object) contains key-value pairs of attributes you want to set\n * or\n - param (string) name of the attribute\n = (Element) the current element\n * or\n = (string) value of attribute\n > Usage\n | el.attr({\n | fill: \"#fc0\",\n | stroke: \"#000\",\n | strokeWidth: 2, // CamelCase...\n | \"fill-opacity\": 0.5, // or dash-separated names\n | width: \"*=2\" // prefixed values\n | });\n | console.log(el.attr(\"fill\")); // #fc0\n * Prefixed values in format `\"+=10\"` supported. All four operations\n * (`+`, `-`, `*` and `/`) could be used. Optionally you can use units for `+`\n * and `-`: `\"+=2em\"`.\n \\*/\n Element.prototype.attr = function (params, value) {\n var el = this,\n node = el.node;\n if (!params) {\n if (node.nodeType != 1) {\n return {\n text: node.nodeValue\n };\n }\n var attr = node.attributes,\n out = {};\n for (var i = 0, ii = attr.length; i < ii; i++) {\n out[attr[i].nodeName] = attr[i].nodeValue;\n }\n return out;\n }\n if (is(params, \"string\")) {\n if (arguments.length > 1) {\n var json = {};\n json[params] = value;\n params = json;\n } else {\n return eve(\"snap.util.getattr.\" + params, el).firstDefined();\n }\n }\n for (var att in params) {\n if (params[has](att)) {\n eve(\"snap.util.attr.\" + att, el, params[att]);\n }\n }\n return el;\n };\n/*\\\n * Snap.parse\n [ method ]\n **\n * Parses SVG fragment and converts it into a @Fragment\n **\n - svg (string) SVG string\n = (Fragment) the @Fragment\n\\*/\nSnap.parse = function (svg) {\n var f = glob.doc.createDocumentFragment(),\n full = true,\n div = glob.doc.createElement(\"div\");\n svg = Str(svg);\n if (!svg.match(/^\\s*<\\s*svg(?:\\s|>)/)) {\n svg = \"\";\n full = false;\n }\n div.innerHTML = svg;\n svg = div.getElementsByTagName(\"svg\")[0];\n if (svg) {\n if (full) {\n f = svg;\n } else {\n while (svg.firstChild) {\n f.appendChild(svg.firstChild);\n }\n }\n }\n return new Fragment(f);\n};\nfunction Fragment(frag) {\n this.node = frag;\n}\n/*\\\n * Snap.fragment\n [ method ]\n **\n * Creates a DOM fragment from a given list of elements or strings\n **\n - varargs (…) SVG string\n = (Fragment) the @Fragment\n\\*/\nSnap.fragment = function () {\n var args = Array.prototype.slice.call(arguments, 0),\n f = glob.doc.createDocumentFragment();\n for (var i = 0, ii = args.length; i < ii; i++) {\n var item = args[i];\n if (item.node && item.node.nodeType) {\n f.appendChild(item.node);\n }\n if (item.nodeType) {\n f.appendChild(item);\n }\n if (typeof item == \"string\") {\n f.appendChild(Snap.parse(item).node);\n }\n }\n return new Fragment(f);\n};\n\nfunction make(name, parent) {\n var res = $(name);\n parent.appendChild(res);\n var el = wrap(res);\n return el;\n}\nfunction Paper(w, h) {\n var res,\n desc,\n defs,\n proto = Paper.prototype;\n if (w && w.tagName && w.tagName.toLowerCase() == \"svg\") {\n if (w.snap in hub) {\n return hub[w.snap];\n }\n var doc = w.ownerDocument;\n res = new Element(w);\n desc = w.getElementsByTagName(\"desc\")[0];\n defs = w.getElementsByTagName(\"defs\")[0];\n if (!desc) {\n desc = $(\"desc\");\n desc.appendChild(doc.createTextNode(\"Created with Snap\"));\n res.node.appendChild(desc);\n }\n if (!defs) {\n defs = $(\"defs\");\n res.node.appendChild(defs);\n }\n res.defs = defs;\n for (var key in proto) if (proto[has](key)) {\n res[key] = proto[key];\n }\n res.paper = res.root = res;\n } else {\n res = make(\"svg\", glob.doc.body);\n $(res.node, {\n height: h,\n version: 1.1,\n width: w,\n xmlns: xmlns\n });\n }\n return res;\n}\nfunction wrap(dom) {\n if (!dom) {\n return dom;\n }\n if (dom instanceof Element || dom instanceof Fragment) {\n return dom;\n }\n if (dom.tagName && dom.tagName.toLowerCase() == \"svg\") {\n return new Paper(dom);\n }\n if (dom.tagName && dom.tagName.toLowerCase() == \"object\" && dom.type == \"image/svg+xml\") {\n return new Paper(dom.contentDocument.getElementsByTagName(\"svg\")[0]);\n }\n return new Element(dom);\n}\n\nSnap._.make = make;\nSnap._.wrap = wrap;\n/*\\\n * Paper.el\n [ method ]\n **\n * Creates an element on paper with a given name and no attributes\n **\n - name (string) tag name\n - attr (object) attributes\n = (Element) the current element\n > Usage\n | var c = paper.circle(10, 10, 10); // is the same as...\n | var c = paper.el(\"circle\").attr({\n | cx: 10,\n | cy: 10,\n | r: 10\n | });\n | // and the same as\n | var c = paper.el(\"circle\", {\n | cx: 10,\n | cy: 10,\n | r: 10\n | });\n\\*/\nPaper.prototype.el = function (name, attr) {\n var el = make(name, this.node);\n attr && el.attr(attr);\n return el;\n};\n/*\\\n * Element.children\n [ method ]\n **\n * Returns array of all the children of the element.\n = (array) array of Elements\n\\*/\nElement.prototype.children = function () {\n var out = [],\n ch = this.node.childNodes;\n for (var i = 0, ii = ch.length; i < ii; i++) {\n out[i] = Snap(ch[i]);\n }\n return out;\n};\nfunction jsonFiller(root, o) {\n for (var i = 0, ii = root.length; i < ii; i++) {\n var item = {\n type: root[i].type,\n attr: root[i].attr()\n },\n children = root[i].children();\n o.push(item);\n if (children.length) {\n jsonFiller(children, item.childNodes = []);\n }\n }\n}\n/*\\\n * Element.toJSON\n [ method ]\n **\n * Returns object representation of the given element and all its children.\n = (object) in format\n o {\n o type (string) this.type,\n o attr (object) attributes map,\n o childNodes (array) optional array of children in the same format\n o }\n\\*/\nElement.prototype.toJSON = function () {\n var out = [];\n jsonFiller([this], out);\n return out[0];\n};\n// default\neve.on(\"snap.util.getattr\", function () {\n var att = eve.nt();\n att = att.substring(att.lastIndexOf(\".\") + 1);\n var css = att.replace(/[A-Z]/g, function (letter) {\n return \"-\" + letter.toLowerCase();\n });\n if (cssAttr[has](css)) {\n return this.node.ownerDocument.defaultView.getComputedStyle(this.node, null).getPropertyValue(css);\n } else {\n return $(this.node, att);\n }\n});\nvar cssAttr = {\n \"alignment-baseline\": 0,\n \"baseline-shift\": 0,\n \"clip\": 0,\n \"clip-path\": 0,\n \"clip-rule\": 0,\n \"color\": 0,\n \"color-interpolation\": 0,\n \"color-interpolation-filters\": 0,\n \"color-profile\": 0,\n \"color-rendering\": 0,\n \"cursor\": 0,\n \"direction\": 0,\n \"display\": 0,\n \"dominant-baseline\": 0,\n \"enable-background\": 0,\n \"fill\": 0,\n \"fill-opacity\": 0,\n \"fill-rule\": 0,\n \"filter\": 0,\n \"flood-color\": 0,\n \"flood-opacity\": 0,\n \"font\": 0,\n \"font-family\": 0,\n \"font-size\": 0,\n \"font-size-adjust\": 0,\n \"font-stretch\": 0,\n \"font-style\": 0,\n \"font-variant\": 0,\n \"font-weight\": 0,\n \"glyph-orientation-horizontal\": 0,\n \"glyph-orientation-vertical\": 0,\n \"image-rendering\": 0,\n \"kerning\": 0,\n \"letter-spacing\": 0,\n \"lighting-color\": 0,\n \"marker\": 0,\n \"marker-end\": 0,\n \"marker-mid\": 0,\n \"marker-start\": 0,\n \"mask\": 0,\n \"opacity\": 0,\n \"overflow\": 0,\n \"pointer-events\": 0,\n \"shape-rendering\": 0,\n \"stop-color\": 0,\n \"stop-opacity\": 0,\n \"stroke\": 0,\n \"stroke-dasharray\": 0,\n \"stroke-dashoffset\": 0,\n \"stroke-linecap\": 0,\n \"stroke-linejoin\": 0,\n \"stroke-miterlimit\": 0,\n \"stroke-opacity\": 0,\n \"stroke-width\": 0,\n \"text-anchor\": 0,\n \"text-decoration\": 0,\n \"text-rendering\": 0,\n \"unicode-bidi\": 0,\n \"visibility\": 0,\n \"word-spacing\": 0,\n \"writing-mode\": 0\n};\n\neve.on(\"snap.util.attr\", function (value) {\n var att = eve.nt(),\n attr = {};\n att = att.substring(att.lastIndexOf(\".\") + 1);\n attr[att] = value;\n var style = att.replace(/-(\\w)/gi, function (all, letter) {\n return letter.toUpperCase();\n }),\n css = att.replace(/[A-Z]/g, function (letter) {\n return \"-\" + letter.toLowerCase();\n });\n if (cssAttr[has](css)) {\n this.node.style[style] = value == null ? E : value;\n } else {\n $(this.node, attr);\n }\n});\n(function (proto) {}(Paper.prototype));\n\n// simple ajax\n/*\\\n * Snap.ajax\n [ method ]\n **\n * Simple implementation of Ajax\n **\n - url (string) URL\n - postData (object|string) data for post request\n - callback (function) callback\n - scope (object) #optional scope of callback\n * or\n - url (string) URL\n - callback (function) callback\n - scope (object) #optional scope of callback\n = (XMLHttpRequest) the XMLHttpRequest object, just in case\n\\*/\nSnap.ajax = function (url, postData, callback, scope){\n var req = new XMLHttpRequest,\n id = ID();\n if (req) {\n if (is(postData, \"function\")) {\n scope = callback;\n callback = postData;\n postData = null;\n } else if (is(postData, \"object\")) {\n var pd = [];\n for (var key in postData) if (postData.hasOwnProperty(key)) {\n pd.push(encodeURIComponent(key) + \"=\" + encodeURIComponent(postData[key]));\n }\n postData = pd.join(\"&\");\n }\n req.open(postData ? \"POST\" : \"GET\", url, true);\n if (postData) {\n req.setRequestHeader(\"X-Requested-With\", \"XMLHttpRequest\");\n req.setRequestHeader(\"Content-type\", \"application/x-www-form-urlencoded\");\n }\n if (callback) {\n eve.once(\"snap.ajax.\" + id + \".0\", callback);\n eve.once(\"snap.ajax.\" + id + \".200\", callback);\n eve.once(\"snap.ajax.\" + id + \".304\", callback);\n }\n req.onreadystatechange = function() {\n if (req.readyState != 4) return;\n eve(\"snap.ajax.\" + id + \".\" + req.status, scope, req);\n };\n if (req.readyState == 4) {\n return req;\n }\n req.send(postData);\n return req;\n }\n};\n/*\\\n * Snap.load\n [ method ]\n **\n * Loads external SVG file as a @Fragment (see @Snap.ajax for more advanced AJAX)\n **\n - url (string) URL\n - callback (function) callback\n - scope (object) #optional scope of callback\n\\*/\nSnap.load = function (url, callback, scope) {\n Snap.ajax(url, function (req) {\n var f = Snap.parse(req.responseText);\n scope ? callback.call(scope, f) : callback(f);\n });\n};\nvar getOffset = function (elem) {\n var box = elem.getBoundingClientRect(),\n doc = elem.ownerDocument,\n body = doc.body,\n docElem = doc.documentElement,\n clientTop = docElem.clientTop || body.clientTop || 0, clientLeft = docElem.clientLeft || body.clientLeft || 0,\n top = box.top + (g.win.pageYOffset || docElem.scrollTop || body.scrollTop ) - clientTop,\n left = box.left + (g.win.pageXOffset || docElem.scrollLeft || body.scrollLeft) - clientLeft;\n return {\n y: top,\n x: left\n };\n};\n/*\\\n * Snap.getElementByPoint\n [ method ]\n **\n * Returns you topmost element under given point.\n **\n = (object) Snap element object\n - x (number) x coordinate from the top left corner of the window\n - y (number) y coordinate from the top left corner of the window\n > Usage\n | Snap.getElementByPoint(mouseX, mouseY).attr({stroke: \"#f00\"});\n\\*/\nSnap.getElementByPoint = function (x, y) {\n var paper = this,\n svg = paper.canvas,\n target = glob.doc.elementFromPoint(x, y);\n if (glob.win.opera && target.tagName == \"svg\") {\n var so = getOffset(target),\n sr = target.createSVGRect();\n sr.x = x - so.x;\n sr.y = y - so.y;\n sr.width = sr.height = 1;\n var hits = target.getIntersectionList(sr, null);\n if (hits.length) {\n target = hits[hits.length - 1];\n }\n }\n if (!target) {\n return null;\n }\n return wrap(target);\n};\n/*\\\n * Snap.plugin\n [ method ]\n **\n * Let you write plugins. You pass in a function with five arguments, like this:\n | Snap.plugin(function (Snap, Element, Paper, global, Fragment) {\n | Snap.newmethod = function () {};\n | Element.prototype.newmethod = function () {};\n | Paper.prototype.newmethod = function () {};\n | });\n * Inside the function you have access to all main objects (and their\n * prototypes). This allow you to extend anything you want.\n **\n - f (function) your plugin body\n\\*/\nSnap.plugin = function (f) {\n f(Snap, Element, Paper, glob, Fragment);\n};\nglob.win.Snap = Snap;\nreturn Snap;\n}(window || this));\n\n// Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved.\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nSnap.plugin(function (Snap, Element, Paper, glob, Fragment) {\n var elproto = Element.prototype,\n is = Snap.is,\n Str = String,\n unit2px = Snap._unit2px,\n $ = Snap._.$,\n make = Snap._.make,\n getSomeDefs = Snap._.getSomeDefs,\n has = \"hasOwnProperty\",\n wrap = Snap._.wrap;\n /*\\\n * Element.getBBox\n [ method ]\n **\n * Returns the bounding box descriptor for the given element\n **\n = (object) bounding box descriptor:\n o {\n o cx: (number) x of the center,\n o cy: (number) x of the center,\n o h: (number) height,\n o height: (number) height,\n o path: (string) path command for the box,\n o r0: (number) radius of a circle that fully encloses the box,\n o r1: (number) radius of the smallest circle that can be enclosed,\n o r2: (number) radius of the largest circle that can be enclosed,\n o vb: (string) box as a viewbox command,\n o w: (number) width,\n o width: (number) width,\n o x2: (number) x of the right side,\n o x: (number) x of the left side,\n o y2: (number) y of the bottom edge,\n o y: (number) y of the top edge\n o }\n \\*/\n elproto.getBBox = function (isWithoutTransform) {\n if (this.type == \"tspan\") {\n return Snap._.box(this.node.getClientRects().item(0));\n }\n if (!Snap.Matrix || !Snap.path) {\n return this.node.getBBox();\n }\n var el = this,\n m = new Snap.Matrix;\n if (el.removed) {\n return Snap._.box();\n }\n while (el.type == \"use\") {\n if (!isWithoutTransform) {\n m = m.add(el.transform().localMatrix.translate(el.attr(\"x\") || 0, el.attr(\"y\") || 0));\n }\n if (el.original) {\n el = el.original;\n } else {\n var href = el.attr(\"xlink:href\");\n el = el.original = el.node.ownerDocument.getElementById(href.substring(href.indexOf(\"#\") + 1));\n }\n }\n var _ = el._,\n pathfinder = Snap.path.get[el.type] || Snap.path.get.deflt;\n try {\n if (isWithoutTransform) {\n _.bboxwt = pathfinder ? Snap.path.getBBox(el.realPath = pathfinder(el)) : Snap._.box(el.node.getBBox());\n return Snap._.box(_.bboxwt);\n } else {\n el.realPath = pathfinder(el);\n el.matrix = el.transform().localMatrix;\n _.bbox = Snap.path.getBBox(Snap.path.map(el.realPath, m.add(el.matrix)));\n return Snap._.box(_.bbox);\n }\n } catch (e) {\n // Firefox doesn’t give you bbox of hidden element\n return Snap._.box();\n }\n };\n var propString = function () {\n return this.string;\n };\n function extractTransform(el, tstr) {\n if (tstr == null) {\n var doReturn = true;\n if (el.type == \"linearGradient\" || el.type == \"radialGradient\") {\n tstr = el.node.getAttribute(\"gradientTransform\");\n } else if (el.type == \"pattern\") {\n tstr = el.node.getAttribute(\"patternTransform\");\n } else {\n tstr = el.node.getAttribute(\"transform\");\n }\n if (!tstr) {\n return new Snap.Matrix;\n }\n tstr = Snap._.svgTransform2string(tstr);\n } else {\n if (!Snap._.rgTransform.test(tstr)) {\n tstr = Snap._.svgTransform2string(tstr);\n } else {\n tstr = Str(tstr).replace(/\\.{3}|\\u2026/g, el._.transform || \"\");\n }\n if (is(tstr, \"array\")) {\n tstr = Snap.path ? Snap.path.toString.call(tstr) : Str(tstr);\n }\n el._.transform = tstr;\n }\n var m = Snap._.transform2matrix(tstr, el.getBBox(1));\n if (doReturn) {\n return m;\n } else {\n el.matrix = m;\n }\n }\n /*\\\n * Element.transform\n [ method ]\n **\n * Gets or sets transformation of the element\n **\n - tstr (string) transform string in Snap or SVG format\n = (Element) the current element\n * or\n = (object) transformation descriptor:\n o {\n o string (string) transform string,\n o globalMatrix (Matrix) matrix of all transformations applied to element or its parents,\n o localMatrix (Matrix) matrix of transformations applied only to the element,\n o diffMatrix (Matrix) matrix of difference between global and local transformations,\n o global (string) global transformation as string,\n o local (string) local transformation as string,\n o toString (function) returns `string` property\n o }\n \\*/\n elproto.transform = function (tstr) {\n var _ = this._;\n if (tstr == null) {\n var papa = this,\n global = new Snap.Matrix(this.node.getCTM()),\n local = extractTransform(this),\n ms = [local],\n m = new Snap.Matrix,\n i,\n localString = local.toTransformString(),\n string = Str(local) == Str(this.matrix) ?\n Str(_.transform) : localString;\n while (papa.type != \"svg\" && (papa = papa.parent())) {\n ms.push(extractTransform(papa));\n }\n i = ms.length;\n while (i--) {\n m.add(ms[i]);\n }\n return {\n string: string,\n globalMatrix: global,\n totalMatrix: m,\n localMatrix: local,\n diffMatrix: global.clone().add(local.invert()),\n global: global.toTransformString(),\n total: m.toTransformString(),\n local: localString,\n toString: propString\n };\n }\n if (tstr instanceof Snap.Matrix) {\n this.matrix = tstr;\n this._.transform = tstr.toTransformString();\n } else {\n extractTransform(this, tstr);\n }\n\n if (this.node) {\n if (this.type == \"linearGradient\" || this.type == \"radialGradient\") {\n $(this.node, {gradientTransform: this.matrix});\n } else if (this.type == \"pattern\") {\n $(this.node, {patternTransform: this.matrix});\n } else {\n $(this.node, {transform: this.matrix});\n }\n }\n\n return this;\n };\n /*\\\n * Element.parent\n [ method ]\n **\n * Returns the element's parent\n **\n = (Element) the parent element\n \\*/\n elproto.parent = function () {\n return wrap(this.node.parentNode);\n };\n /*\\\n * Element.append\n [ method ]\n **\n * Appends the given element to current one\n **\n - el (Element|Set) element to append\n = (Element) the parent element\n \\*/\n /*\\\n * Element.add\n [ method ]\n **\n * See @Element.append\n \\*/\n elproto.append = elproto.add = function (el) {\n if (el) {\n if (el.type == \"set\") {\n var it = this;\n el.forEach(function (el) {\n it.add(el);\n });\n return this;\n }\n el = wrap(el);\n this.node.appendChild(el.node);\n el.paper = this.paper;\n }\n return this;\n };\n /*\\\n * Element.appendTo\n [ method ]\n **\n * Appends the current element to the given one\n **\n - el (Element) parent element to append to\n = (Element) the child element\n \\*/\n elproto.appendTo = function (el) {\n if (el) {\n el = wrap(el);\n el.append(this);\n }\n return this;\n };\n /*\\\n * Element.prepend\n [ method ]\n **\n * Prepends the given element to the current one\n **\n - el (Element) element to prepend\n = (Element) the parent element\n \\*/\n elproto.prepend = function (el) {\n if (el) {\n if (el.type == \"set\") {\n var it = this,\n first;\n el.forEach(function (el) {\n if (first) {\n first.after(el);\n } else {\n it.prepend(el);\n }\n first = el;\n });\n return this;\n }\n el = wrap(el);\n var parent = el.parent();\n this.node.insertBefore(el.node, this.node.firstChild);\n this.add && this.add();\n el.paper = this.paper;\n this.parent() && this.parent().add();\n parent && parent.add();\n }\n return this;\n };\n /*\\\n * Element.prependTo\n [ method ]\n **\n * Prepends the current element to the given one\n **\n - el (Element) parent element to prepend to\n = (Element) the child element\n \\*/\n elproto.prependTo = function (el) {\n el = wrap(el);\n el.prepend(this);\n return this;\n };\n /*\\\n * Element.before\n [ method ]\n **\n * Inserts given element before the current one\n **\n - el (Element) element to insert\n = (Element) the parent element\n \\*/\n elproto.before = function (el) {\n if (el.type == \"set\") {\n var it = this;\n el.forEach(function (el) {\n var parent = el.parent();\n it.node.parentNode.insertBefore(el.node, it.node);\n parent && parent.add();\n });\n this.parent().add();\n return this;\n }\n el = wrap(el);\n var parent = el.parent();\n this.node.parentNode.insertBefore(el.node, this.node);\n this.parent() && this.parent().add();\n parent && parent.add();\n el.paper = this.paper;\n return this;\n };\n /*\\\n * Element.after\n [ method ]\n **\n * Inserts given element after the current one\n **\n - el (Element) element to insert\n = (Element) the parent element\n \\*/\n elproto.after = function (el) {\n el = wrap(el);\n var parent = el.parent();\n if (this.node.nextSibling) {\n this.node.parentNode.insertBefore(el.node, this.node.nextSibling);\n } else {\n this.node.parentNode.appendChild(el.node);\n }\n this.parent() && this.parent().add();\n parent && parent.add();\n el.paper = this.paper;\n return this;\n };\n /*\\\n * Element.insertBefore\n [ method ]\n **\n * Inserts the element after the given one\n **\n - el (Element) element next to whom insert to\n = (Element) the parent element\n \\*/\n elproto.insertBefore = function (el) {\n el = wrap(el);\n var parent = this.parent();\n el.node.parentNode.insertBefore(this.node, el.node);\n this.paper = el.paper;\n parent && parent.add();\n el.parent() && el.parent().add();\n return this;\n };\n /*\\\n * Element.insertAfter\n [ method ]\n **\n * Inserts the element after the given one\n **\n - el (Element) element next to whom insert to\n = (Element) the parent element\n \\*/\n elproto.insertAfter = function (el) {\n el = wrap(el);\n var parent = this.parent();\n el.node.parentNode.insertBefore(this.node, el.node.nextSibling);\n this.paper = el.paper;\n parent && parent.add();\n el.parent() && el.parent().add();\n return this;\n };\n /*\\\n * Element.remove\n [ method ]\n **\n * Removes element from the DOM\n = (Element) the detached element\n \\*/\n elproto.remove = function () {\n var parent = this.parent();\n this.node.parentNode && this.node.parentNode.removeChild(this.node);\n delete this.paper;\n this.removed = true;\n parent && parent.add();\n return this;\n };\n /*\\\n * Element.select\n [ method ]\n **\n * Gathers the nested @Element matching the given set of CSS selectors\n **\n - query (string) CSS selector\n = (Element) result of query selection\n \\*/\n elproto.select = function (query) {\n return wrap(this.node.querySelector(query));\n };\n /*\\\n * Element.selectAll\n [ method ]\n **\n * Gathers nested @Element objects matching the given set of CSS selectors\n **\n - query (string) CSS selector\n = (Set|array) result of query selection\n \\*/\n elproto.selectAll = function (query) {\n var nodelist = this.node.querySelectorAll(query),\n set = (Snap.set || Array)();\n for (var i = 0; i < nodelist.length; i++) {\n set.push(wrap(nodelist[i]));\n }\n return set;\n };\n /*\\\n * Element.asPX\n [ method ]\n **\n * Returns given attribute of the element as a `px` value (not %, em, etc.)\n **\n - attr (string) attribute name\n - value (string) #optional attribute value\n = (Element) result of query selection\n \\*/\n elproto.asPX = function (attr, value) {\n if (value == null) {\n value = this.attr(attr);\n }\n return +unit2px(this, attr, value);\n };\n // SIERRA Element.use(): I suggest adding a note about how to access the original element the returned