diff options
| -rwxr-xr-x | CHANGELOG.md | 3 | ||||
| -rwxr-xr-x | README.md | 96 | ||||
| -rwxr-xr-x | Rakefile | 2 | ||||
| -rwxr-xr-x | dist/svg.js | 279 | ||||
| -rwxr-xr-x | dist/svg.min.js | 4 | ||||
| -rwxr-xr-x | src/bbox.js | 23 | ||||
| -rwxr-xr-x | src/default.js | 51 | ||||
| -rwxr-xr-x | src/element.js | 86 | ||||
| -rw-r--r-- | src/helpers.js | 7 | ||||
| -rwxr-xr-x | src/line.js | 69 | ||||
| -rw-r--r-- | src/matrix.js | 3 | ||||
| -rwxr-xr-x | src/pointarray.js | 9 | ||||
| -rw-r--r-- | src/pointed.js | 25 | ||||
| -rwxr-xr-x | src/poly.js | 24 | ||||
| -rwxr-xr-x | src/rbox.js | 11 |
15 files changed, 273 insertions, 419 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 8d143b9..e9c9e8e 100755 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,9 +12,10 @@ - changed `array` reference to `array()` method on `SVG.Polyline`, `SVG.Polygon` and `SVG.Path` - completely reworked `clone()` method to use the adoption system - added support to clone manually built text elements +- added `svg.wiml.js` plugin to plugins list +- completely reworked transformations to be chainable and more true to their nature -> __TODO!__ - changed `lines` reference to `lines()` on `SVG.Text` -> __TODO!__ - changed `track` reference to `track()` on `SVG.Text` -> __TODO!__ -- completely reworked transformations to be chainable and more true to their nature -> __TODO!__ - fixed a bug in clipping and masking where empty nodes persists after removal -> __TODO!__ - added raw svg import functionality with the `svg()` method -> __TODO!__ @@ -248,12 +248,14 @@ rect.radius(75, 50) __`returns`: `itself`__ ## Line -The line element always takes four arguments, `x1`, `y1`, `x2` and `y2`: +Create a line for point A to point B: ```javascript var line = draw.line(0, 0, 100, 150).stroke({ width: 1 }) ``` +Creating a line element can be done in four ways. Look at the `plot()` method to see all the possiblilities. + __`returns`: `SVG.Line`__ _Javascript inheritance stack: `SVG.Line` < `SVG.Shape` < `SVG.Element`_ @@ -265,8 +267,37 @@ Updating a line is done with the `plot()` method: line.plot(50, 30, 100, 150) ``` +Alternatively it also accepts a point string: + +```javascript +line.plot('0,0 100,150') +``` + +Or a point array: + +```javascript +line.plot([[0, 0], [100, 150]]) +``` + +Or an instance of `SVG.PointArray`: + +```javascript +var array = new SVG.PointArray([[0, 0], [100, 150]]) +line.plot(array) +``` + __`returns`: `itself`__ +### array() +References the `SVG.PointArray` instance. This method is rather intended for internal use: + +```javascript +polyline.array() +``` + +__`returns`: `SVG.PointArray`__ + + ## Polyline The polyline element defines a set of connected straight line segments. Typically, polyline elements define open shapes: @@ -1020,6 +1051,41 @@ rect.attr('fill', null) ### transform() +The `transform()` can act both as a getter or a setter. Let's start with the former but first a word about transforms. + +Transforms are cascading sequentially. Every transform you add will build further on the effects of all the previous transforms together. So for example, when you add the `translate(10, 10)` transform three times, the total translation will equal `translate(30, 30)`. + +We are going to use one node as an examle for this section: + +```xml +<rect width="100" height="100" transform="translate(10, 10) rotate(45, 100, 100) scale(0.5, 0.5) rotate(-10)" /> +``` + +#### get by index +A transform at a specific index: + +```javascript +rect.transform(1) +// -> returns { type: 'scale', x: 0.5, cy: 0.5 } +``` + +#### get by name +By default the first occurence of a given transform type will be returned: + +```javascript +rect.transform('rotate') +// -> returns { type: 'rotate', rotation: 45, cx: 100, cy: 100 } +``` + +If multiple occurences of a transform type exist they can be fetched with a number: + +```javascript +rect.transform('rotate', { at: 1 }) +// -> returns { type: 'rotate', rotation: -10 } +``` + + + With the `transform()` method elements can be scaled, rotated, translated and skewed: ```javascript @@ -1036,32 +1102,7 @@ You can also provide two arguments as property and value: rect.transform('matrix', '1,0.5,0.5,1,0,0') ``` -All available transformations are: -```javascript -rect.transform({ - x: [translation on x-axis] -, y: [translation on y-axis] - -, rotation: [degrees] -, cx: [x rotation point] -, cy: [y rotation point] - -, scaleX: [scaling on x-axis] -, scaleY: [scaling on y-axis] - -, skewX: [skewing on x-axis] -, skewY: [skewing on y-axis] - -, matrix: [a 6-digit matrix string; e.g. '1,0,0,1,0,0'] -, a: [the first matrix digit] -, b: [the second matrix digit] -, c: [the third matrix digit] -, d: [the fourth matrix digit] -, e: [the fifth matrix digit] -, f: [the sixth matrix digit] -}) -``` Note that you can also apply transformations directly using the `attr()` method: @@ -3182,6 +3223,9 @@ Here are a few nice plugins that are available for svg.js: ### topath [svg.topath.js](https://github.com/wout/svg.topath.js) to convert any other shape to a path. +### wiml +[svg.wiml.js](https://github.com/wout/svg.wiml.js) a templating language for svg output. + ## Contributing All contributions are very welcome but please make sure you: @@ -1,7 +1,7 @@ SVGJS_VERSION = '1.0.0-rc.10' # all available modules in the correct loading order -MODULES = %w[ svg inventor adopter regex utilities default color array pointarray patharray number viewbox bbox rbox element parent container fx relative event defs group arrange mask clip gradient pattern doc spof shape symbol use rect ellipse line poly path image text textpath nested hyperlink marker sugar set data memory selector loader helpers polyfill ] +MODULES = %w[ svg inventor adopter regex utilities default color array pointarray patharray number viewbox bbox rbox element parent container fx relative event defs group arrange mask clip gradient pattern doc spof shape symbol use rect ellipse line poly pointed path image text textpath nested hyperlink marker sugar set data memory selector loader helpers polyfill ] # how many bytes in a "kilobyte" KILO = 1024 diff --git a/dist/svg.js b/dist/svg.js index 6bed7fd..a11987b 100755 --- a/dist/svg.js +++ b/dist/svg.js @@ -1,4 +1,4 @@ -/* svg.js 1.0.0-rc.10-15-g2bc1909 - svg inventor adopter regex utilities default color array pointarray patharray number viewbox bbox rbox element parent container fx relative event defs group arrange mask clip gradient pattern doc spof shape symbol use rect ellipse line poly path image text textpath nested hyperlink marker sugar set data memory selector loader helpers polyfill - svgjs.com/license */ +/* svg.js 1.0.0-rc.10-17-g0d11ad2 - svg inventor adopter regex utilities default color array pointarray patharray number viewbox bbox rbox element parent container fx relative event defs group arrange mask clip gradient pattern doc spof shape symbol use rect ellipse line poly pointed path image text textpath nested hyperlink marker sugar set data memory selector loader helpers polyfill - svgjs.com/license */ ;(function() { var SVG = this.SVG = function(element) { @@ -193,11 +193,8 @@ } SVG.defaults = { - // Default matrix - matrix: '1 0 0 1 0 0' - // Default attribute values - , attrs: { + attrs: { /* fill and stroke */ 'fill-opacity': 1 , 'stroke-opacity': 1 @@ -228,30 +225,28 @@ , 'font-family': 'Helvetica, Arial, sans-serif' , 'text-anchor': 'start' } - - // Default transformation values - , trans: function() { - return { - /* translate */ - x: 0 - , y: 0 - /* scale */ - , scaleX: 1 - , scaleY: 1 - /* rotate */ - , rotation: 0 - /* skew */ - , skewX: 0 - , skewY: 0 - /* matrix */ - , matrix: this.matrix - , a: 1 - , b: 0 - , c: 0 - , d: 1 - , e: 0 - , f: 0 - } + + // Transforms + , trans: { + /* translate */ + x: 0 + , y: 0 + /* scale */ + , scaleX: 1 + , scaleY: 1 + /* rotate */ + , rotation: 0 + /* skew */ + , skewX: 0 + , skewY: 0 + /* matrix */ + , matrix: this.matrix + , a: 1 + , b: 0 + , c: 0 + , d: 1 + , e: 0 + , f: 0 } } @@ -458,6 +453,15 @@ return array.join(' ') } + // Convert array to line object + , toLine: function() { + return { + x1: this.value[0][0] + , y1: this.value[0][1] + , x2: this.value[1][0] + , y2: this.value[1][1] + } + } // Get morphed array at given position , at: function(pos) { /* make sure a destination is defined */ @@ -897,19 +901,19 @@ SVG.BBox = function(element) { var box - /* initialize zero box */ + // Initialize zero box this.x = 0 this.y = 0 this.width = 0 this.height = 0 - /* get values if element is given */ + // Get values if element is given if (element) { try { - /* actual, native bounding box */ + // Actual, native bounding box box = element.node.getBBox() } catch(e) { - /* fallback for some browsers */ + // Fallback for some browsers box = { x: element.node.clientLeft , y: element.node.clientTop @@ -918,16 +922,16 @@ } } - /* include translations on x an y */ + // Include translations on x an y this.x = box.x + element.trans.x this.y = box.y + element.trans.y - /* plain width and height */ + // Plain width and height this.width = box.width * element.trans.scaleX this.height = box.height * element.trans.scaleY } - /* add center, right and bottom */ + // Add center, right and bottom boxProperties(this) } @@ -936,18 +940,15 @@ SVG.extend(SVG.BBox, { // merge bounding box with another, return a new instance merge: function(box) { - var b = new SVG.BBox() + var b = new SVG.BBox - /* merge box */ + // Merge box b.x = Math.min(this.x, box.x) b.y = Math.min(this.y, box.y) b.width = Math.max(this.x + this.width, box.x + box.width) - b.x b.height = Math.max(this.y + this.height, box.y + box.height) - b.y - /* add center, right and bottom */ - boxProperties(b) - - return b + return boxProperties(b) } }) @@ -1000,8 +1001,8 @@ this.height = box.height /= zoom /* offset by window scroll position, because getBoundingClientRect changes when window is scrolled */ - this.x += window.scrollX; - this.y += window.scrollY; + this.x += window.scrollX + this.y += window.scrollY /* add center, right and bottom */ boxProperties(this) @@ -1019,11 +1020,8 @@ b.y = Math.min(this.y, box.y) b.width = Math.max(this.x + this.width, box.x + box.width) - b.x b.height = Math.max(this.y + this.height, box.y + box.height) - b.y - - /* add center, right and bottom */ - boxProperties(b) - - return b + + return boxProperties(b) } }) @@ -1032,16 +1030,16 @@ SVG.Element = SVG.invent({ // Initialize node create: function(node) { - /* make stroke value accessible dynamically */ + // Make stroke value accessible dynamically this._stroke = SVG.defaults.attrs.stroke - /* initialize transformation store with defaults */ - this.trans = SVG.defaults.trans() - - /* create circular reference */ + // Create circular reference if (this.node = node) { this.type = node.nodeName this.node.instance = this + + // Store current attribute value + this._stroke = node.getAttribute('stroke') || this._stroke } } @@ -1152,10 +1150,6 @@ SVG.regex.isNumber.test(v) ? parseFloat(v) : v - } else if (a == 'style') { - // Redirect to the style method - return this.style(v) - } else { // BUG FIX: some browsers will render a stroke if a color is given even though stroke width is 0 if (a == 'stroke-width') @@ -1206,76 +1200,12 @@ return this } // Manage transformations - , transform: function(o, v) { - - if (arguments.length == 0) { - /* act as a getter if no argument is given */ - return this.trans - - } else if (typeof o === 'string') { - /* act as a getter if only one string argument is given */ - if (arguments.length < 2) - return this.trans[o] - - /* apply transformations as object if key value arguments are given*/ - var transform = {} - transform[o] = v + , transform: function(t, v) { + // Get a transformation at a given position + if (typeof t === 'number') { - return this.transform(transform) } - - /* ... otherwise continue as a setter */ - var transform = [] - - /* parse matrix */ - o = parseMatrix(o) - - /* merge values */ - for (v in o) - if (o[v] != null) - this.trans[v] = o[v] - - /* compile matrix */ - this.trans.matrix = this.trans.a - + ' ' + this.trans.b - + ' ' + this.trans.c - + ' ' + this.trans.d - + ' ' + this.trans.e - + ' ' + this.trans.f - - /* alias current transformations */ - o = this.trans - - /* add matrix */ - if (o.matrix != SVG.defaults.matrix) - transform.push('matrix(' + o.matrix + ')') - - /* add rotation */ - if (o.rotation != 0) - transform.push('rotate(' + o.rotation + ' ' + (o.cx == null ? this.bbox().cx : o.cx) + ' ' + (o.cy == null ? this.bbox().cy : o.cy) + ')') - - /* add scale */ - if (o.scaleX != 1 || o.scaleY != 1) - transform.push('scale(' + o.scaleX + ' ' + o.scaleY + ')') - - /* add skew on x axis */ - if (o.skewX != 0) - transform.push('skewX(' + o.skewX + ')') - - /* add skew on y axis */ - if (o.skewY != 0) - transform.push('skewY(' + o.skewY + ')') - - /* add translation */ - if (o.x != 0 || o.y != 0) - transform.push('translate(' + new SVG.Number(o.x / o.scaleX) + ' ' + new SVG.Number(o.y / o.scaleY) + ')') - - /* update transformations, even if there are none */ - if (transform.length == 0) - this.node.removeAttribute('transform') - else - this.node.setAttribute('transform', transform.join(' ')) - + return this } // Dynamic style generator @@ -2747,60 +2677,31 @@ // Add class methods , extend: { - // Move over x-axis - x: function(x) { - var b = this.bbox() - - return x == null ? b.x : this.attr({ - x1: this.attr('x1') - b.x + x - , x2: this.attr('x2') - b.x + x - }) - } - // Move over y-axis - , y: function(y) { - var b = this.bbox() - - return y == null ? b.y : this.attr({ - y1: this.attr('y1') - b.y + y - , y2: this.attr('y2') - b.y + y - }) - } - // Move by center over x-axis - , cx: function(x) { - var half = this.bbox().width / 2 - return x == null ? this.x() + half : this.x(x - half) - } - // Move by center over y-axis - , cy: function(y) { - var half = this.bbox().height / 2 - return y == null ? this.y() + half : this.y(y - half) + // Get array + array: function() { + return (this._array = new SVG.PointArray([ + [ this.attr('x1'), this.attr('y1') ] + , [ this.attr('x2'), this.attr('y2') ] + ])) } - // Set width of element - , width: function(width) { - var b = this.bbox() + // Overwrite native plot() method + , plot: function(x1, y1, x2, y2) { + if (typeof x1 === 'number') + x1 = { x1: x1, y1: y1, x2: x2, y2: y2 } + else + x1 = (this._array = new SVG.PointArray(x1)).toLine() - return width == null ? b.width : this.attr(this.attr('x1') < this.attr('x2') ? 'x2' : 'x1', b.x + width) + return this.attr(x1) } - // Set height of element - , height: function(height) { - var b = this.bbox() - - return height == null ? b.height : this.attr(this.attr('y1') < this.attr('y2') ? 'y2' : 'y1', b.y + height) + // Move by left top corner + , move: function(x, y) { + return this.attr(this.array().move(x, y).toLine()) } - // Set line size by width and height + // Set element size to given width and height , size: function(width, height) { var p = proportionalSize(this.bbox(), width, height) - return this.width(p.width).height(p.height) - } - // Set path data - , plot: function(x1, y1, x2, y2) { - return this.attr({ - x1: x1 - , y1: y1 - , x2: x2 - , y2: y2 - }) + return this.attr(this.array().size(p.width, p.height).toLine()) } } @@ -2808,7 +2709,7 @@ , construct: { // Create a line element line: function(x1, y1, x2, y2) { - return this.put(new SVG.Line().plot(x1, y1, x2, y2)) + return this.put(new SVG.Line).plot(x1, y1, x2, y2) } } }) @@ -2848,10 +2749,8 @@ // Add polygon-specific functions SVG.extend(SVG.Polyline, SVG.Polygon, { - // Define morphable array - morphArray: SVG.PointArray // Get array - , array: function() { + array: function() { return this._array || (this._array = new SVG.PointArray(this.attr('points'))) } // Plot new path @@ -2862,6 +2761,18 @@ , move: function(x, y) { return this.attr('points', this.array().move(x, y)) } + // Set element size to given width and height + , size: function(width, height) { + var p = proportionalSize(this.bbox(), width, height) + + return this.attr('points', this.array().size(p.width, p.height)) + } + + }) + + SVG.extend(SVG.Line, SVG.Polyline, SVG.Polygon, { + // Define morphable array + morphArray: SVG.PointArray // Move by left top corner over x-axis , x: function(x) { return x == null ? this.bbox().x : this.move(x, this.bbox().y) @@ -2882,13 +2793,6 @@ return height == null ? b.height : this.size(b.width, height) } - // Set element size to given width and height - , size: function(width, height) { - var p = proportionalSize(this.bbox(), width, height) - - return this.attr('points', this.array().size(p.width, p.height)) - } - }) SVG.Path = SVG.invent({ @@ -3866,15 +3770,12 @@ // Deep new id assignment function assignNewId(node) { - // Adopt element and assign new id - var element = SVG.adopt(node).id(SVG.eid(node.nodeName)) - // Do the same for SVG child nodes as well for (var i = node.childNodes.length - 1; i >= 0; i--) if (node.childNodes[i] instanceof SVGElement) assignNewId(node.childNodes[i]) - return element + return SVG.adopt(node).id(SVG.eid(node.nodeName)) } // Add more bounding box properties @@ -3883,6 +3784,8 @@ b.y2 = b.y + b.height b.cx = b.x + b.width / 2 b.cy = b.y + b.height / 2 + + return b } // Parse a matrix string diff --git a/dist/svg.min.js b/dist/svg.min.js index 0b4b64d..992b7c1 100755 --- a/dist/svg.min.js +++ b/dist/svg.min.js @@ -1,2 +1,2 @@ -(function(){function t(t){return t.toLowerCase().replace(/-(.)/g,function(t,e){return e.toUpperCase()})}function e(t){return t.charAt(0).toUpperCase()+t.slice(1)}function i(t){return 4==t.length?["#",t.substring(1,2),t.substring(1,2),t.substring(2,3),t.substring(2,3),t.substring(3,4),t.substring(3,4)].join(""):t}function n(t){var e=t.toString(16);return 1==e.length?"0"+e:e}function r(t,e,i){return(null==e||null==i)&&(null==i?i=t.height/t.width*e:null==e&&(e=t.width/t.height*i)),{width:e,height:i}}function s(t,e){return"number"==typeof t.from?t.from+(t.to-t.from)*e:t instanceof f.Color||t instanceof f.Number?t.at(e):1>e?t.from:t.to}function h(t){for(var e=0,i=t.length,n="";i>e;e++)n+=t[e][0],null!=t[e][1]&&(n+=t[e][1],null!=t[e][2]&&(n+=" ",n+=t[e][2],null!=t[e][3]&&(n+=" ",n+=t[e][3],n+=" ",n+=t[e][4],null!=t[e][5]&&(n+=" ",n+=t[e][5],n+=" ",n+=t[e][6],null!=t[e][7]&&(n+=" ",n+=t[e][7])))));return n+" "}function o(t){for(var e=f.adopt(t).id(f.eid(t.nodeName)),i=t.childNodes.length-1;i>=0;i--)t.childNodes[i]instanceof SVGElement&&o(t.childNodes[i]);return e}function a(t){t.x2=t.x+t.width,t.y2=t.y+t.height,t.cx=t.x+t.width/2,t.cy=t.y+t.height/2}function u(t){if(t.matrix){var e=t.matrix.replace(/\s/g,"").split(",");6==e.length&&(t.a=parseFloat(e[0]),t.b=parseFloat(e[1]),t.c=parseFloat(e[2]),t.d=parseFloat(e[3]),t.e=parseFloat(e[4]),t.f=parseFloat(e[5]))}return t}function l(t){var e=t.toString().match(f.regex.reference);return e?e[1]:void 0}function c(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),i}var f=this.SVG=function(t){return f.supported?(t=new f.Doc(t),f.parser||f.prepare(t),t):void 0};if(f.ns="http://www.w3.org/2000/svg",f.xmlns="http://www.w3.org/2000/xmlns/",f.xlink="http://www.w3.org/1999/xlink",f.did=1e3,f.eid=function(t){return"Svgjs"+e(t)+f.did++},f.create=function(t){var e=document.createElementNS(this.ns,t);return e.setAttribute("id",this.eid(t)),e},f.extend=function(){var t,e,i,n;for(t=[].slice.call(arguments),e=t.pop(),n=t.length-1;n>=0;n--)if(t[n])for(i in e)t[n].prototype[i]=e[i];f.Set&&f.Set.inherit&&f.Set.inherit()},f.prepare=function(t){var e=document.getElementsByTagName("body")[0],i=(e?new f.Doc(e):t.nested()).size(2,0),n=f.create("path");i.node.appendChild(n),f.parser={body:e||t.parent(),draw:i.style("opacity:0;position:fixed;left:100%;top:100%;overflow:hidden"),poly:i.polyline().node,path:n}},f.supported=function(){return!!document.createElementNS&&!!document.createElementNS(f.ns,"svg").createSVGRect}(),!f.supported)return!1;f.invent=function(t){var e="function"==typeof t.create?t.create:function(){this.constructor.call(this,f.create(t.create))};return t.inherit&&(e.prototype=new t.inherit),t.extend&&f.extend(e,t.extend),t.construct&&f.extend(t.parent||f.Container,t.construct),e},f.adopt=function(t){if(t.instance)return t.instance;var i;return i="svg"==t.nodeName?t.parentNode instanceof SVGElement?new f.Nested:new f.Doc:"lineairGradient"==t.nodeName?new f.Gradient("lineair"):"radialGradient"==t.nodeName?new f.Gradient("radial"):f[e(t.nodeName)]?new(f[e(t.nodeName)]):new f.Element(t),i.type=t.nodeName,i.node=t,t.instance=i,i instanceof f.Doc&&i.namespace().defs(),i},f.regex={unit:/^(-?[\d\.]+)([a-z%]{0,2})$/,hex:/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i,rgb:/rgb\((\d+),(\d+),(\d+)\)/,reference:/#([a-z0-9\-_]+)/i,isHex:/^#[a-f0-9]{3,6}$/i,isRgb:/^rgb\(/,isCss:/[^:]+:[^;]+;?/,isBlank:/^(\s+)?$/,isNumber:/^-?[\d\.]+$/,isPercent:/^-?[\d\.]+%$/,isImage:/\.(jpg|jpeg|png|gif)(\?[^=]+.*)?/i,isEvent:/^[\w]+:[\w]+$/},f.utils={map:function(t,e){var i,n=t.length,r=[];for(i=0;n>i;i++)r.push(e(t[i]));return r}},f.defaults={matrix:"1 0 0 1 0 0",attrs:{"fill-opacity":1,"stroke-opacity":1,"stroke-width":0,"stroke-linejoin":"miter","stroke-linecap":"butt",fill:"#000000",stroke:"#000000",opacity:1,x:0,y:0,cx:0,cy:0,width:0,height:0,r:0,rx:0,ry:0,offset:0,"stop-opacity":1,"stop-color":"#000000","font-size":16,"font-family":"Helvetica, Arial, sans-serif","text-anchor":"start"},trans:function(){return{x:0,y:0,scaleX:1,scaleY:1,rotation:0,skewX:0,skewY:0,matrix:this.matrix,a:1,b:0,c:0,d:1,e:0,f:0}}},f.Color=function(t){var e;this.r=0,this.g=0,this.b=0,"string"==typeof t?f.regex.isRgb.test(t)?(e=f.regex.rgb.exec(t.replace(/\s/g,"")),this.r=parseInt(e[1]),this.g=parseInt(e[2]),this.b=parseInt(e[3])):f.regex.isHex.test(t)&&(e=f.regex.hex.exec(i(t)),this.r=parseInt(e[1],16),this.g=parseInt(e[2],16),this.b=parseInt(e[3],16)):"object"==typeof t&&(this.r=t.r,this.g=t.g,this.b=t.b)},f.extend(f.Color,{toString:function(){return this.toHex()},toHex:function(){return"#"+n(this.r)+n(this.g)+n(this.b)},toRgb:function(){return"rgb("+[this.r,this.g,this.b].join()+")"},brightness:function(){return this.r/255*.3+this.g/255*.59+this.b/255*.11},morph:function(t){return this.destination=new f.Color(t),this},at:function(t){return this.destination?(t=0>t?0:t>1?1:t,new f.Color({r:~~(this.r+(this.destination.r-this.r)*t),g:~~(this.g+(this.destination.g-this.g)*t),b:~~(this.b+(this.destination.b-this.b)*t)})):this}}),f.Color.test=function(t){return t+="",f.regex.isHex.test(t)||f.regex.isRgb.test(t)},f.Color.isRgb=function(t){return t&&"number"==typeof t.r&&"number"==typeof t.g&&"number"==typeof t.b},f.Color.isColor=function(t){return f.Color.isRgb(t)||f.Color.test(t)},f.Array=function(t,e){t=(t||[]).valueOf(),0==t.length&&e&&(t=e.valueOf()),this.value=this.parse(t)},f.extend(f.Array,{morph:function(t){if(this.destination=this.parse(t),this.value.length!=this.destination.length){for(var e=this.value[this.value.length-1],i=this.destination[this.destination.length-1];this.value.length>this.destination.length;)this.destination.push(i);for(;this.value.length<this.destination.length;)this.value.push(e)}return this},settle:function(){for(var t=0,e=this.value.length,i=[];e>t;t++)-1==i.indexOf(this.value[t])&&i.push(this.value[t]);return this.value=i},at:function(t){if(!this.destination)return this;for(var e=0,i=this.value.length,n=[];i>e;e++)n.push(this.value[e]+(this.destination[e]-this.value[e])*t);return new f.Array(n)},toString:function(){return this.value.join(" ")},valueOf:function(){return this.value},parse:function(t){return t=t.valueOf(),Array.isArray(t)?t:this.split(t)},split:function(t){return t.replace(/\s+/g," ").replace(/^\s+|\s+$/g,"").split(" ")},reverse:function(){return this.value.reverse(),this}}),f.PointArray=function(t,e){this.constructor.call(this,t,e||[[0,0]])},f.PointArray.prototype=new f.Array,f.extend(f.PointArray,{toString:function(){for(var t=0,e=this.value.length,i=[];e>t;t++)i.push(this.value[t].join(","));return i.join(" ")},at:function(t){if(!this.destination)return this;for(var e=0,i=this.value.length,n=[];i>e;e++)n.push([this.value[e][0]+(this.destination[e][0]-this.value[e][0])*t,this.value[e][1]+(this.destination[e][1]-this.value[e][1])*t]);return new f.PointArray(n)},parse:function(t){if(t=t.valueOf(),Array.isArray(t))return t;t=this.split(t);for(var e,i=0,n=t.length,r=[];n>i;i++)e=t[i].split(","),r.push([parseFloat(e[0]),parseFloat(e[1])]);return r},move:function(t,e){var i=this.bbox();if(t-=i.x,e-=i.y,!isNaN(t)&&!isNaN(e))for(var n=this.value.length-1;n>=0;n--)this.value[n]=[this.value[n][0]+t,this.value[n][1]+e];return this},size:function(t,e){var i,n=this.bbox();for(i=this.value.length-1;i>=0;i--)this.value[i][0]=(this.value[i][0]-n.x)*t/n.width+n.x,this.value[i][1]=(this.value[i][1]-n.y)*e/n.height+n.y;return this},bbox:function(){return f.parser.poly.setAttribute("points",this.toString()),f.parser.poly.getBBox()}}),f.PathArray=function(t,e){this.constructor.call(this,t,e||[["M",0,0]])},f.PathArray.prototype=new f.Array,f.extend(f.PathArray,{toString:function(){return h(this.value)},move:function(t,e){var i=this.bbox();if(t-=i.x,e-=i.y,!isNaN(t)&&!isNaN(e))for(var n,r=this.value.length-1;r>=0;r--)n=this.value[r][0],"M"==n||"L"==n||"T"==n?(this.value[r][1]+=t,this.value[r][2]+=e):"H"==n?this.value[r][1]+=t:"V"==n?this.value[r][1]+=e:"C"==n||"S"==n||"Q"==n?(this.value[r][1]+=t,this.value[r][2]+=e,this.value[r][3]+=t,this.value[r][4]+=e,"C"==n&&(this.value[r][5]+=t,this.value[r][6]+=e)):"A"==n&&(this.value[r][6]+=t,this.value[r][7]+=e);return this},size:function(t,e){var i,n,r=this.bbox();for(i=this.value.length-1;i>=0;i--)n=this.value[i][0],"M"==n||"L"==n||"T"==n?(this.value[i][1]=(this.value[i][1]-r.x)*t/r.width+r.x,this.value[i][2]=(this.value[i][2]-r.y)*e/r.height+r.y):"H"==n?this.value[i][1]=(this.value[i][1]-r.x)*t/r.width+r.x:"V"==n?this.value[i][1]=(this.value[i][1]-r.y)*e/r.height+r.y:"C"==n||"S"==n||"Q"==n?(this.value[i][1]=(this.value[i][1]-r.x)*t/r.width+r.x,this.value[i][2]=(this.value[i][2]-r.y)*e/r.height+r.y,this.value[i][3]=(this.value[i][3]-r.x)*t/r.width+r.x,this.value[i][4]=(this.value[i][4]-r.y)*e/r.height+r.y,"C"==n&&(this.value[i][5]=(this.value[i][5]-r.x)*t/r.width+r.x,this.value[i][6]=(this.value[i][6]-r.y)*e/r.height+r.y)):"A"==n&&(this.value[i][1]=this.value[i][1]*t/r.width,this.value[i][2]=this.value[i][2]*e/r.height,this.value[i][6]=(this.value[i][6]-r.x)*t/r.width+r.x,this.value[i][7]=(this.value[i][7]-r.y)*e/r.height+r.y);return this},parse:function(t){if(t instanceof f.PathArray)return t.valueOf();var e,i,n,r,s,o,a,u,l,c,d,p=0,m=0;for(f.parser.path.setAttribute("d","string"==typeof t?t:h(t)),d=f.parser.path.pathSegList,e=0,i=d.numberOfItems;i>e;++e)c=d.getItem(e),l=c.pathSegTypeAsLetter,"M"==l||"L"==l||"H"==l||"V"==l||"C"==l||"S"==l||"Q"==l||"T"==l||"A"==l?("x"in c&&(p=c.x),"y"in c&&(m=c.y)):("x1"in c&&(s=p+c.x1),"x2"in c&&(a=p+c.x2),"y1"in c&&(o=m+c.y1),"y2"in c&&(u=m+c.y2),"x"in c&&(p+=c.x),"y"in c&&(m+=c.y),"m"==l?d.replaceItem(f.parser.path.createSVGPathSegMovetoAbs(p,m),e):"l"==l?d.replaceItem(f.parser.path.createSVGPathSegLinetoAbs(p,m),e):"h"==l?d.replaceItem(f.parser.path.createSVGPathSegLinetoHorizontalAbs(p),e):"v"==l?d.replaceItem(f.parser.path.createSVGPathSegLinetoVerticalAbs(m),e):"c"==l?d.replaceItem(f.parser.path.createSVGPathSegCurvetoCubicAbs(p,m,s,o,a,u),e):"s"==l?d.replaceItem(f.parser.path.createSVGPathSegCurvetoCubicSmoothAbs(p,m,a,u),e):"q"==l?d.replaceItem(f.parser.path.createSVGPathSegCurvetoQuadraticAbs(p,m,s,o),e):"t"==l?d.replaceItem(f.parser.path.createSVGPathSegCurvetoQuadraticSmoothAbs(p,m),e):"a"==l?d.replaceItem(f.parser.path.createSVGPathSegArcAbs(p,m,c.r1,c.r2,c.angle,c.largeArcFlag,c.sweepFlag),e):("z"==l||"Z"==l)&&(p=n,m=r)),("M"==l||"m"==l)&&(n=p,r=m);for(t=[],d=f.parser.path.pathSegList,e=0,i=d.numberOfItems;i>e;++e)c=d.getItem(e),l=c.pathSegTypeAsLetter,p=[l],"M"==l||"L"==l||"T"==l?p.push(c.x,c.y):"H"==l?p.push(c.x):"V"==l?p.push(c.y):"C"==l?p.push(c.x1,c.y1,c.x2,c.y2,c.x,c.y):"S"==l?p.push(c.x2,c.y2,c.x,c.y):"Q"==l?p.push(c.x1,c.y1,c.x,c.y):"A"==l&&p.push(c.r1,c.r2,c.angle,0|c.largeArcFlag,0|c.sweepFlag,c.x,c.y),t.push(p);return t},bbox:function(){return f.parser.path.setAttribute("d",this.toString()),f.parser.path.getBBox()}}),f.Number=function(t){if(this.value=0,this.unit="","number"==typeof t)this.value=isNaN(t)?0:isFinite(t)?t:0>t?-3.4e38:3.4e38;else if("string"==typeof t){var e=t.match(f.regex.unit);e&&(this.value=parseFloat(e[1]),"%"==e[2]?this.value/=100:"s"==e[2]&&(this.value*=1e3),this.unit=e[2])}else t instanceof f.Number&&(this.value=t.value,this.unit=t.unit)},f.extend(f.Number,{toString:function(){return("%"==this.unit?~~(1e8*this.value)/1e6:"s"==this.unit?this.value/1e3:this.value)+this.unit},valueOf:function(){return this.value},plus:function(t){return this.value=this+new f.Number(t),this},minus:function(t){return this.plus(-new f.Number(t))},times:function(t){return this.value=this*new f.Number(t),this},divide:function(t){return this.value=this/new f.Number(t),this},to:function(t){return"string"==typeof t&&(this.unit=t),this},morph:function(t){return this.destination=new f.Number(t),this},at:function(t){return this.destination?new f.Number(this.destination).minus(this).times(t).plus(this):this}}),f.ViewBox=function(t){var e,i,n,r,s=1,h=1,o=t.bbox(),a=(t.attr("viewBox")||"").match(/-?[\d\.]+/g),u=t,l=t;for(n=new f.Number(t.width()),r=new f.Number(t.height());"%"==n.unit;)s*=n.value,n=new f.Number(u instanceof f.Doc?u.parent().offsetWidth:u.parent().width()),u=u.parent();for(;"%"==r.unit;)h*=r.value,r=new f.Number(l instanceof f.Doc?l.parent().offsetHeight:l.parent().height()),l=l.parent();this.x=o.x,this.y=o.y,this.width=n*s,this.height=r*h,this.zoom=1,a&&(e=parseFloat(a[0]),i=parseFloat(a[1]),n=parseFloat(a[2]),r=parseFloat(a[3]),this.zoom=this.width/this.height>n/r?this.height/r:this.width/n,this.x=e,this.y=i,this.width=n,this.height=r)},f.extend(f.ViewBox,{toString:function(){return this.x+" "+this.y+" "+this.width+" "+this.height}}),f.BBox=function(t){var e;if(this.x=0,this.y=0,this.width=0,this.height=0,t){try{e=t.node.getBBox()}catch(i){e={x:t.node.clientLeft,y:t.node.clientTop,width:t.node.clientWidth,height:t.node.clientHeight}}this.x=e.x+t.trans.x,this.y=e.y+t.trans.y,this.width=e.width*t.trans.scaleX,this.height=e.height*t.trans.scaleY}a(this)},f.extend(f.BBox,{merge:function(t){var e=new f.BBox;return e.x=Math.min(this.x,t.x),e.y=Math.min(this.y,t.y),e.width=Math.max(this.x+this.width,t.x+t.width)-e.x,e.height=Math.max(this.y+this.height,t.y+t.height)-e.y,a(e),e}}),f.RBox=function(t){var e,i,n={};if(this.x=0,this.y=0,this.width=0,this.height=0,t){for(e=t.doc().parent(),i=t.doc().viewbox().zoom,n=t.node.getBoundingClientRect(),this.x=n.left,this.y=n.top,this.x-=e.offsetLeft,this.y-=e.offsetTop;e=e.offsetParent;)this.x-=e.offsetLeft,this.y-=e.offsetTop;for(e=t;e.parent&&(e=e.parent());)"svg"==e.type&&e.viewbox&&(i*=e.viewbox().zoom,this.x-=e.x()||0,this.y-=e.y()||0)}this.x/=i,this.y/=i,this.width=n.width/=i,this.height=n.height/=i,this.x+=window.scrollX,this.y+=window.scrollY,a(this)},f.extend(f.RBox,{merge:function(t){var e=new f.RBox;return e.x=Math.min(this.x,t.x),e.y=Math.min(this.y,t.y),e.width=Math.max(this.x+this.width,t.x+t.width)-e.x,e.height=Math.max(this.y+this.height,t.y+t.height)-e.y,a(e),e}}),f.Element=f.invent({create:function(t){this._stroke=f.defaults.attrs.stroke,this.trans=f.defaults.trans(),(this.node=t)&&(this.type=t.nodeName,this.node.instance=this)},extend:{x:function(t){return null!=t&&(t=new f.Number(t),t.value/=this.trans.scaleX),this.attr("x",t)},y:function(t){return null!=t&&(t=new f.Number(t),t.value/=this.trans.scaleY),this.attr("y",t)},cx:function(t){return null==t?this.x()+this.width()/2:this.x(t-this.width()/2)},cy:function(t){return null==t?this.y()+this.height()/2:this.y(t-this.height()/2)},move:function(t,e){return this.x(t).y(e)},center:function(t,e){return this.cx(t).cy(e)},width:function(t){return this.attr("width",t)},height:function(t){return this.attr("height",t)},size:function(t,e){var i=r(this.bbox(),t,e);return this.width(new f.Number(i.width)).height(new f.Number(i.height))},clone:function(){return o(this.node.cloneNode(!0))},remove:function(){return this.parent()&&this.parent().removeElement(this),this},replace:function(t){return this.after(t).remove(),t},addTo:function(t){return t.put(this)},putIn:function(t){return t.add(this)},doc:function(t){return this.parent(t||f.Doc)},attr:function(t,e,i){if(null==t){for(t={},e=this.node.attributes,i=e.length-1;i>=0;i--)t[e[i].nodeName]=f.regex.isNumber.test(e[i].nodeValue)?parseFloat(e[i].nodeValue):e[i].nodeValue;return t}if("object"==typeof t)for(e in t)this.attr(e,t[e]);else if(null===e)this.node.removeAttribute(t);else{if(null==e)return e=this.node.getAttribute(t),null==e?f.defaults.attrs[t]:f.regex.isNumber.test(e)?parseFloat(e):e;if("style"==t)return this.style(e);"stroke-width"==t?this.attr("stroke",parseFloat(e)>0?this._stroke:null):"stroke"==t&&(this._stroke=e),("fill"==t||"stroke"==t)&&(f.regex.isImage.test(e)&&(e=this.doc().defs().image(e,0,0)),e instanceof f.Image&&(e=this.doc().defs().pattern(0,0,function(){this.add(e)}))),"number"==typeof e?e=new f.Number(e):f.Color.isColor(e)?e=new f.Color(e):Array.isArray(e)&&(e=new f.Array(e)),"leading"==t?this.leading&&this.leading(e):"string"==typeof i?this.node.setAttributeNS(i,t,e.toString()):this.node.setAttribute(t,e.toString()),!this.rebuild||"font-size"!=t&&"x"!=t||this.rebuild(t,e)}return this},transform:function(t,e){if(0==arguments.length)return this.trans;if("string"==typeof t){if(arguments.length<2)return this.trans[t];var i={};return i[t]=e,this.transform(i)}var i=[];t=u(t);for(e in t)null!=t[e]&&(this.trans[e]=t[e]);return this.trans.matrix=this.trans.a+" "+this.trans.b+" "+this.trans.c+" "+this.trans.d+" "+this.trans.e+" "+this.trans.f,t=this.trans,t.matrix!=f.defaults.matrix&&i.push("matrix("+t.matrix+")"),0!=t.rotation&&i.push("rotate("+t.rotation+" "+(null==t.cx?this.bbox().cx:t.cx)+" "+(null==t.cy?this.bbox().cy:t.cy)+")"),(1!=t.scaleX||1!=t.scaleY)&&i.push("scale("+t.scaleX+" "+t.scaleY+")"),0!=t.skewX&&i.push("skewX("+t.skewX+")"),0!=t.skewY&&i.push("skewY("+t.skewY+")"),(0!=t.x||0!=t.y)&&i.push("translate("+new f.Number(t.x/t.scaleX)+" "+new f.Number(t.y/t.scaleY)+")"),0==i.length?this.node.removeAttribute("transform"):this.node.setAttribute("transform",i.join(" ")),this},style:function(e,i){if(0==arguments.length)return this.node.style.cssText||"";if(arguments.length<2)if("object"==typeof e)for(i in e)this.style(i,e[i]);else{if(!f.regex.isCss.test(e))return this.node.style[t(e)];e=e.split(";");for(var n=0;n<e.length;n++)i=e[n].split(":"),this.style(i[0].replace(/\s+/g,""),i[1])}else this.node.style[t(e)]=null===i||f.regex.isBlank.test(i)?"":i;return this},id:function(t){return this.attr("id",t)},bbox:function(){return new f.BBox(this)},rbox:function(){return new f.RBox(this)},inside:function(t,e){var i=this.bbox();return t>i.x&&e>i.y&&t<i.x+i.width&&e<i.y+i.height},show:function(){return this.style("display","")},hide:function(){return this.style("display","none")},visible:function(){return"none"!=this.style("display")},toString:function(){return this.attr("id")},classes:function(){var t=this.attr("class");return null==t?[]:t.trim().split(/\s+/)},hasClass:function(t){return-1!=this.classes().indexOf(t)},addClass:function(t){if(!this.hasClass(t)){var e=this.classes();e.push(t),this.attr("class",e.join(" "))}return this},removeClass:function(t){if(this.hasClass(t)){var e=this.classes().filter(function(e){return e!=t});this.attr("class",e.join(" "))}return this},toggleClass:function(t){return this.hasClass(t)?this.removeClass(t):this.addClass(t)},reference:function(t){return f.get(this.attr(t))},parent:function(t){var e=f.adopt(this.node.parentNode);if(t)for(;!(e instanceof t);)e=f.adopt(e.node.parentNode);return e}}}),f.Parent=f.invent({create:function(t){this.constructor.call(this,t)},inherit:f.Element,extend:{children:function(){return f.utils.map(this.node.childNodes,function(t){return f.adopt(t)})},add:function(t,e){return this.has(t)||(e=null==e?this.children().length:e,this.node.insertBefore(t.node,this.node.childNodes[e]||null)),this},put:function(t,e){return this.add(t,e),t},has:function(t){return this.index(t)>=0},index:function(t){return this.children().indexOf(t)},get:function(t){return this.children()[t]},first:function(){return this.children()[0]},last:function(){return this.children()[this.children().length-1]},each:function(t,e){var i,n,r=this.children();for(i=0,n=r.length;n>i;i++)r[i]instanceof f.Element&&t.apply(r[i],[i,r]),e&&r[i]instanceof f.Container&&r[i].each(t,e);return this},removeElement:function(t){return this.node.removeChild(t.node),this},clear:function(){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return delete this._defs,this},defs:function(){return this.doc().defs()}}}),f.Container=f.invent({create:function(t){this.constructor.call(this,t)},inherit:f.Parent,extend:{viewbox:function(t){return 0==arguments.length?new f.ViewBox(this):(t=1==arguments.length?[t.x,t.y,t.width,t.height]:[].slice.call(arguments),this.attr("viewBox",t))}}}),f.FX=f.invent({create:function(t){this.target=t},extend:{animate:function(t,e,i){var n,r,h,o,a=this.target,u=this;return"object"==typeof t&&(i=t.delay,e=t.ease,t=t.duration),t="="==t?t:null==t?1e3:new f.Number(t).valueOf(),e=e||"<>",u.to=function(t){var i;if(t=0>t?0:t>1?1:t,null==n){n=[];for(o in u.attrs)n.push(o);if(a.morphArray&&(u._plot||n.indexOf("points")>-1)){var l,c=new a.morphArray(u._plot||u.attrs.points||a.array);u._size&&c.size(u._size.width.to,u._size.height.to),l=c.bbox(),u._x?c.move(u._x.to,l.y):u._cx&&c.move(u._cx.to-l.width/2,l.y),l=c.bbox(),u._y?c.move(l.x,u._y.to):u._cy&&c.move(l.x,u._cy.to-l.height/2),delete u._x,delete u._y,delete u._cx,delete u._cy,delete u._size,u._plot=a.array.morph(c)}}if(null==r){r=[];for(o in u.trans)r.push(o)}if(null==h){h=[];for(o in u.styles)h.push(o)}for(t="<>"==e?-Math.cos(t*Math.PI)/2+.5:">"==e?Math.sin(t*Math.PI/2):"<"==e?-Math.cos(t*Math.PI/2)+1:"-"==e?t:"function"==typeof e?e(t):t,u._plot?a.plot(u._plot.at(t)):(u._x?a.x(u._x.at(t)):u._cx&&a.cx(u._cx.at(t)),u._y?a.y(u._y.at(t)):u._cy&&a.cy(u._cy.at(t)),u._size&&a.size(u._size.width.at(t),u._size.height.at(t))),u._viewbox&&a.viewbox(u._viewbox.x.at(t),u._viewbox.y.at(t),u._viewbox.width.at(t),u._viewbox.height.at(t)),u._leading&&a.leading(u._leading.at(t)),i=n.length-1;i>=0;i--)a.attr(n[i],s(u.attrs[n[i]],t));for(i=r.length-1;i>=0;i--)a.transform(r[i],s(u.trans[r[i]],t));for(i=h.length-1;i>=0;i--)a.style(h[i],s(u.styles[h[i]],t));u._during&&u._during.call(a,t,function(e,i){return s({from:e,to:i},t)})},"number"==typeof t&&(this.timeout=setTimeout(function(){var n=(new Date).getTime();u.situation={interval:1e3/60,start:n,play:!0,finish:n+t,duration:t},u.render=function(){if(u.situation.play===!0){var n=(new Date).getTime(),r=n>u.situation.finish?1:(n-u.situation.start)/t;u.to(r),n>u.situation.finish?(u._plot&&a.plot(new f.PointArray(u._plot.destination).settle()),u._loop===!0||"number"==typeof u._loop&&u._loop>1?("number"==typeof u._loop&&--u._loop,u.animate(t,e,i)):u._after?u._after.apply(a,[u]):u.stop()):requestAnimFrame(u.render)}else requestAnimFrame(u.render)},u.render()},new f.Number(i).valueOf())),this},bbox:function(){return this.target.bbox()},attr:function(t,e){if("object"==typeof t)for(var i in t)this.attr(i,t[i]);else{var n=this.target.attr(t);this.attrs[t]=f.Color.isColor(n)?new f.Color(n).morph(e):f.regex.unit.test(n)?new f.Number(n).morph(e):{from:n,to:e}}return this},transform:function(t,e){if(1==arguments.length){t=u(t),delete t.matrix;for(e in t)this.trans[e]={from:this.target.trans[e],to:t[e]}}else{var i={};i[t]=e,this.transform(i)}return this},style:function(t,e){if("object"==typeof t)for(var i in t)this.style(i,t[i]);else this.styles[t]={from:this.target.style(t),to:e};return this},x:function(t){return this._x=new f.Number(this.target.x()).morph(t),this},y:function(t){return this._y=new f.Number(this.target.y()).morph(t),this},cx:function(t){return this._cx=new f.Number(this.target.cx()).morph(t),this},cy:function(t){return this._cy=new f.Number(this.target.cy()).morph(t),this},move:function(t,e){return this.x(t).y(e)},center:function(t,e){return this.cx(t).cy(e)},size:function(t,e){if(this.target instanceof f.Text)this.attr("font-size",t);else{var i=this.target.bbox();this._size={width:new f.Number(i.width).morph(t),height:new f.Number(i.height).morph(e)}}return this},plot:function(t){return this._plot=t,this},leading:function(t){return this.target._leading&&(this._leading=new f.Number(this.target._leading).morph(t)),this},viewbox:function(t,e,i,n){if(this.target instanceof f.Container){var r=this.target.viewbox();this._viewbox={x:new f.Number(r.x).morph(t),y:new f.Number(r.y).morph(e),width:new f.Number(r.width).morph(i),height:new f.Number(r.height).morph(n)}}return this},update:function(t){return this.target instanceof f.Stop&&(null!=t.opacity&&this.attr("stop-opacity",t.opacity),null!=t.color&&this.attr("stop-color",t.color),null!=t.offset&&this.attr("offset",new f.Number(t.offset))),this},during:function(t){return this._during=t,this},after:function(t){return this._after=t,this},loop:function(t){return this._loop=t||!0,this},stop:function(t){return t===!0?(this.animate(0),this._after&&this._after.apply(this.target,[this])):(clearTimeout(this.timeout),this.attrs={},this.trans={},this.styles={},this.situation={},delete this._x,delete this._y,delete this._cx,delete this._cy,delete this._size,delete this._plot,delete this._loop,delete this._after,delete this._during,delete this._leading,delete this._viewbox),this},pause:function(){return this.situation.play===!0&&(this.situation.play=!1,this.situation.pause=(new Date).getTime()),this},play:function(){if(this.situation.play===!1){var t=(new Date).getTime()-this.situation.pause;this.situation.finish+=t,this.situation.start+=t,this.situation.play=!0}return this}},parent:f.Element,construct:{animate:function(t,e,i){return(this.fx||(this.fx=new f.FX(this))).stop().animate(t,e,i)},stop:function(t){return this.fx&&this.fx.stop(t),this},pause:function(){return this.fx&&this.fx.pause(),this},play:function(){return this.fx&&this.fx.play(),this}}}),f.extend(f.Element,f.FX,{dx:function(t){return this.x((this.target||this).x()+t)},dy:function(t){return this.y((this.target||this).y()+t)},dmove:function(t,e){return this.dx(t).dy(e)}}),["click","dblclick","mousedown","mouseup","mouseover","mouseout","mousemove","mouseenter","mouseleave","touchstart","touchmove","touchleave","touchend","touchcancel"].forEach(function(t){f.Element.prototype[t]=function(e){var i=this;return this.node["on"+t]="function"==typeof e?function(){return e.apply(i,arguments)}:null,this}}),f.events={},f.listeners={},f.registerEvent=function(t){f.events[t]||(f.events[t]=new c(t))},f.on=function(t,e,i){var n=i.bind(t.instance||t);f.listeners[i]=n,t.addEventListener(e,n,!1)},f.off=function(t,e,i){t.removeEventListener(e,f.listeners[i],!1),delete f.listeners[i]},f.extend(f.Element,{on:function(t,e){return f.on(this.node,t,e),this},off:function(t,e){return f.off(this.node,t,e),this},fire:function(t,e){return f.events[t].detail=e,this.node.dispatchEvent(f.events[t]),delete f.events[t].detail,this}}),f.Defs=f.invent({create:"defs",inherit:f.Container}),f.G=f.invent({create:"g",inherit:f.Container,extend:{x:function(t){return null==t?this.trans.x:this.transform("x",t)},y:function(t){return null==t?this.trans.y:this.transform("y",t)},cx:function(t){return null==t?this.bbox().cx:this.x(t-this.bbox().width/2)},cy:function(t){return null==t?this.bbox().cy:this.y(t-this.bbox().height/2)}},construct:{group:function(){return this.put(new f.G)}}}),f.extend(f.Element,{siblings:function(){return this.parent().children()},position:function(){return this.parent().index(this)},next:function(){return this.siblings()[this.position()+1]},previous:function(){return this.siblings()[this.position()-1]},forward:function(){var t=this.position()+1,e=this.parent();return e.removeElement(this).add(this,t),e instanceof f.Doc&&e.node.appendChild(e.defs().node),this},backward:function(){var t=this.position();return t>0&&this.parent().removeElement(this).add(this,t-1),this},front:function(){var t=this.parent();return t.node.appendChild(this.node),t instanceof f.Doc&&t.node.appendChild(t.defs().node),this},back:function(){return this.position()>0&&this.parent().removeElement(this).add(this,0),this},before:function(t){t.remove();var e=this.position();return this.parent().add(t,e),this},after:function(t){t.remove();var e=this.position();return this.parent().add(t,e+1),this}}),f.Mask=f.invent({create:function(){this.constructor.call(this,f.create("mask")),this.targets=[]},inherit:f.Container,extend:{remove:function(){for(var t=this.targets.length-1;t>=0;t--)this.targets[t]&&this.targets[t].unmask();return delete this.targets,this.parent().removeElement(this),this}},construct:{mask:function(){return this.defs().put(new f.Mask)}}}),f.extend(f.Element,{maskWith:function(t){return this.masker=t instanceof f.Mask?t:this.parent().mask().add(t),this.masker.targets.push(this),this.attr("mask",'url("#'+this.masker.attr("id")+'")')},unmask:function(){return delete this.masker,this.attr("mask",null)}}),f.ClipPath=f.invent({create:function(){this.constructor.call(this,f.create("clipPath")),this.targets=[]},inherit:f.Container,extend:{remove:function(){for(var t=this.targets.length-1;t>=0;t--)this.targets[t]&&this.targets[t].unclip();return delete this.targets,this.parent().removeElement(this),this}},construct:{clip:function(){return this.defs().put(new f.ClipPath)}}}),f.extend(f.Element,{clipWith:function(t){return this.clipper=t instanceof f.ClipPath?t:this.parent().clip().add(t),this.clipper.targets.push(this),this.attr("clip-path",'url("#'+this.clipper.attr("id")+'")')},unclip:function(){return delete this.clipper,this.attr("clip-path",null)}}),f.Gradient=f.invent({create:function(t){this.constructor.call(this,f.create(t+"Gradient")),this.type=t},inherit:f.Container,extend:{from:function(t,e){return"radial"==this.type?this.attr({fx:new f.Number(t),fy:new f.Number(e)}):this.attr({x1:new f.Number(t),y1:new f.Number(e)})},to:function(t,e){return"radial"==this.type?this.attr({cx:new f.Number(t),cy:new f.Number(e)}):this.attr({x2:new f.Number(t),y2:new f.Number(e)})},radius:function(t){return"radial"==this.type?this.attr({r:new f.Number(t)}):this},at:function(t,e,i){return this.put(new f.Stop).update(t,e,i)},update:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this},fill:function(){return"url(#"+this.id()+")"},toString:function(){return this.fill()}},construct:{gradient:function(t,e){return this.defs().gradient(t,e)}}}),f.extend(f.Defs,{gradient:function(t,e){return this.put(new f.Gradient(t)).update(e)}}),f.Stop=f.invent({create:"stop",inherit:f.Element,extend:{update:function(t){return("number"==typeof t||t instanceof f.Number)&&(t={offset:arguments[0],color:arguments[1],opacity:arguments[2]}),null!=t.opacity&&this.attr("stop-opacity",t.opacity),null!=t.color&&this.attr("stop-color",t.color),null!=t.offset&&this.attr("offset",new f.Number(t.offset)),this}}}),f.Pattern=f.invent({create:"pattern",inherit:f.Container,extend:{fill:function(){return"url(#"+this.id()+")"},update:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this},toString:function(){return this.fill()}},construct:{pattern:function(t,e,i){return this.defs().pattern(t,e,i)}}}),f.extend(f.Defs,{pattern:function(t,e,i){return this.put(new f.Pattern).update(i).attr({x:0,y:0,width:t,height:e,patternUnits:"userSpaceOnUse"})}}),f.Doc=f.invent({create:function(t){t&&(t="string"==typeof t?document.getElementById(t):t,"svg"==t.nodeName?this.constructor.call(this,t):(this.constructor.call(this,f.create("svg")),t.appendChild(this.node)),this.namespace().size("100%","100%").defs())},inherit:f.Container,extend:{namespace:function(){return this.attr({xmlns:f.ns,version:"1.1"}).attr("xmlns:xlink",f.xlink,f.xmlns)},defs:function(){if(!this._defs){var t;this._defs=(t=this.node.getElementsByTagName("defs")[0])?f.adopt(t):new f.Defs,this.node.appendChild(this._defs.node)}return this._defs},parent:function(){return"#document"==this.node.parentNode.nodeName?null:this.node.parentNode}}}),f.extend(f.Doc,{spof:function(){if(this.doSpof){var t=this.node.getScreenCTM();t&&this.style("left",-t.e%1+"px").style("top",-t.f%1+"px")}return this},fixSubPixelOffset:function(){var t=this;return this.doSpof=!0,f.on(window,"resize",function(){t.spof()}),this.spof()}}),f.Shape=f.invent({create:function(t){this.constructor.call(this,t)},inherit:f.Element}),f.Symbol=f.invent({create:"symbol",inherit:f.Container,construct:{symbol:function(){return this.defs().put(new f.Symbol)}}}),f.Use=f.invent({create:"use",inherit:f.Shape,extend:{element:function(t){return this.target=t,this.attr("href","#"+t,f.xlink)}},construct:{use:function(t){return this.put(new f.Use).element(t)}}}),f.Rect=f.invent({create:"rect",inherit:f.Shape,construct:{rect:function(t,e){return this.put((new f.Rect).size(t,e))}}}),f.Circle=f.invent({create:"circle",inherit:f.Shape,construct:{circle:function(t){return this.put(new f.Circle).rx(new f.Number(t).divide(2)).move(0,0)}}}),f.extend(f.Circle,f.FX,{rx:function(t){return this.attr("r",t)},ry:function(t){return this.rx(t)}}),f.Ellipse=f.invent({create:"ellipse",inherit:f.Shape,construct:{ellipse:function(t,e){return this.put(new f.Ellipse).size(t,e).move(0,0)}}}),f.extend(f.Ellipse,f.Rect,f.FX,{rx:function(t){return this.attr("rx",t)},ry:function(t){return this.attr("ry",t)}}),f.extend(f.Circle,f.Ellipse,{x:function(t){return null==t?this.cx()-this.rx():this.cx(t+this.rx())},y:function(t){return null==t?this.cy()-this.ry():this.cy(t+this.ry())},cx:function(t){return null==t?this.attr("cx"):this.attr("cx",new f.Number(t).divide(this.trans.scaleX))},cy:function(t){return null==t?this.attr("cy"):this.attr("cy",new f.Number(t).divide(this.trans.scaleY))},width:function(t){return null==t?2*this.rx():this.rx(new f.Number(t).divide(2)) -},height:function(t){return null==t?2*this.ry():this.ry(new f.Number(t).divide(2))},size:function(t,e){var i=r(this.bbox(),t,e);return this.rx(new f.Number(i.width).divide(2)).ry(new f.Number(i.height).divide(2))}}),f.Line=f.invent({create:"line",inherit:f.Shape,extend:{x:function(t){var e=this.bbox();return null==t?e.x:this.attr({x1:this.attr("x1")-e.x+t,x2:this.attr("x2")-e.x+t})},y:function(t){var e=this.bbox();return null==t?e.y:this.attr({y1:this.attr("y1")-e.y+t,y2:this.attr("y2")-e.y+t})},cx:function(t){var e=this.bbox().width/2;return null==t?this.x()+e:this.x(t-e)},cy:function(t){var e=this.bbox().height/2;return null==t?this.y()+e:this.y(t-e)},width:function(t){var e=this.bbox();return null==t?e.width:this.attr(this.attr("x1")<this.attr("x2")?"x2":"x1",e.x+t)},height:function(t){var e=this.bbox();return null==t?e.height:this.attr(this.attr("y1")<this.attr("y2")?"y2":"y1",e.y+t)},size:function(t,e){var i=r(this.bbox(),t,e);return this.width(i.width).height(i.height)},plot:function(t,e,i,n){return this.attr({x1:t,y1:e,x2:i,y2:n})}},construct:{line:function(t,e,i,n){return this.put((new f.Line).plot(t,e,i,n))}}}),f.Polyline=f.invent({create:"polyline",inherit:f.Shape,construct:{polyline:function(t){return this.put(new f.Polyline).plot(t)}}}),f.Polygon=f.invent({create:"polygon",inherit:f.Shape,construct:{polygon:function(t){return this.put(new f.Polygon).plot(t)}}}),f.extend(f.Polyline,f.Polygon,{morphArray:f.PointArray,array:function(){return this._array||(this._array=new f.PointArray(this.attr("points")))},plot:function(t){return this.attr("points",this._array=new f.PointArray(t))},move:function(t,e){return this.attr("points",this.array().move(t,e))},x:function(t){return null==t?this.bbox().x:this.move(t,this.bbox().y)},y:function(t){return null==t?this.bbox().y:this.move(this.bbox().x,t)},width:function(t){var e=this.bbox();return null==t?e.width:this.size(t,e.height)},height:function(t){var e=this.bbox();return null==t?e.height:this.size(e.width,t)},size:function(t,e){var i=r(this.bbox(),t,e);return this.attr("points",this.array().size(i.width,i.height))}}),f.Path=f.invent({create:"path",inherit:f.Shape,extend:{morphArray:f.PathArray,array:function(){return this._array||(this._array=new f.PathArray(this.attr("d")))},plot:function(t){return this.attr("d",this._array=new f.PathArray(t))},move:function(t,e){return this.attr("d",this.array().move(t,e))},x:function(t){return null==t?this.bbox().x:this.move(t,this.bbox().y)},y:function(t){return null==t?this.bbox().y:this.move(this.bbox().x,t)},size:function(t,e){var i=r(this.bbox(),t,e);return this.attr("d",this.array().size(i.width,i.height))},width:function(t){return null==t?this.bbox().width:this.size(t,this.bbox().height)},height:function(t){return null==t?this.bbox().height:this.size(this.bbox().width,t)}},construct:{path:function(t){return this.put(new f.Path).plot(t)}}}),f.Image=f.invent({create:"image",inherit:f.Shape,extend:{load:function(t){if(!t)return this;var e=this,i=document.createElement("img");return i.onload=function(){var n=e.doc(f.Pattern);0==e.width()&&0==e.height()&&e.size(i.width,i.height),n&&0==n.width()&&0==n.height()&&n.size(e.width(),e.height()),"function"==typeof e._loaded&&e._loaded.call(e,{width:i.width,height:i.height,ratio:i.width/i.height,url:t})},this.attr("href",i.src=this.src=t,f.xlink)},loaded:function(t){return this._loaded=t,this}},construct:{image:function(t,e,i){return this.put(new f.Image).load(t).size(e||0,i||e||0)}}}),f.Text=f.invent({create:function(){this.constructor.call(this,f.create("text")),this._leading=new f.Number(1.3),this._rebuild=!0,this._build=!1,this.attr("font-family",f.defaults.attrs["font-family"])},inherit:f.Shape,extend:{x:function(t){return null==t?this.attr("x"):(this.textPath||this.lines.each(function(){this.newLined&&this.x(t)}),this.attr("x",t))},y:function(t){var e=this.attr("y"),i="number"==typeof e?e-this.bbox().y:0;return null==t?"number"==typeof e?e-i:e:this.attr("y","number"==typeof t?t+i:t)},cx:function(t){return null==t?this.bbox().cx:this.x(t-this.bbox().width/2)},cy:function(t){return null==t?this.bbox().cy:this.y(t-this.bbox().height/2)},text:function(t){if("undefined"==typeof t)return this.content;if(this.clear().build(!0),"function"==typeof t)t.call(this,this);else{t=(this.content=t).split("\n");for(var e=0,i=t.length;i>e;e++)this.tspan(t[e]).newLine()}return this.build(!1).rebuild()},size:function(t){return this.attr("font-size",t).rebuild()},leading:function(t){return null==t?this._leading:(this._leading=new f.Number(t),this.rebuild())},rebuild:function(t){if("boolean"==typeof t&&(this._rebuild=t),this._rebuild){var e=this;this.lines.each(function(){this.newLined&&(this.textPath||this.attr("x",e.attr("x")),this.attr("dy",e._leading*new f.Number(e.attr("font-size"))))}),this.fire("rebuild")}return this},build:function(t){return this._build=!!t,this}},construct:{text:function(t){return this.put(new f.Text).text(t)},plain:function(t){return this.put(new f.Text).plain(t)}}}),f.Tspan=f.invent({create:"tspan",inherit:f.Shape,extend:{text:function(t){return"function"==typeof t?t.call(this,this):this.plain(t),this},dx:function(t){return this.attr("dx",t)},dy:function(t){return this.attr("dy",t)},newLine:function(){var t=this.doc(f.Text);return this.newLined=!0,this.dy(t._leading*t.attr("font-size")).attr("x",t.x())}}}),f.extend(f.Text,f.Tspan,{plain:function(t){return this._build===!1&&this.clear(),this.node.appendChild(document.createTextNode(this.content=t)),this},tspan:function(t){var e=(this.textPath||this).node,i=new f.Tspan;return this._build===!1&&this.clear(),e.appendChild(i.node),this instanceof f.Text&&this.lines.add(i),i.text(t)},clear:function(){for(var t=(this.textPath||this).node;t.hasChildNodes();)t.removeChild(t.lastChild);return this instanceof f.Text&&(delete this.lines,this.lines=new f.Set,this.content=""),this},length:function(){return this.node.getComputedTextLength()}}),f.registerEvent("rebuild"),f.TextPath=f.invent({create:"textPath",inherit:f.Element,parent:f.Text,construct:{path:function(t){for(this.textPath=new f.TextPath;this.node.hasChildNodes();)this.textPath.node.appendChild(this.node.firstChild);return this.node.appendChild(this.textPath.node),this.track=this.doc().defs().path(t),this.textPath.parent=this,this.textPath.attr("href","#"+this.track,f.xlink),this},plot:function(t){return this.track&&this.track.plot(t),this}}}),f.Nested=f.invent({create:function(){this.constructor.call(this,f.create("svg")),this.style("overflow","visible")},inherit:f.Container,construct:{nested:function(){return this.put(new f.Nested)}}}),f.A=f.invent({create:"a",inherit:f.Container,extend:{to:function(t){return this.attr("href",t,f.xlink)},show:function(t){return this.attr("show",t,f.xlink)},target:function(t){return this.attr("target",t)}},construct:{link:function(t){return this.put(new f.A).to(t)}}}),f.extend(f.Element,{linkTo:function(t){var e=new f.A;return"function"==typeof t?t.call(e,e):e.to(t),this.parent().put(e).put(this)}}),f.Marker=f.invent({create:"marker",inherit:f.Container,extend:{width:function(t){return this.attr("markerWidth",t)},height:function(t){return this.attr("markerHeight",t)},ref:function(t,e){return this.attr("refX",t).attr("refY",e)},update:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this},toString:function(){return"url(#"+this.id()+")"}},construct:{marker:function(t,e,i){return this.defs().marker(t,e,i)}}}),f.extend(f.Defs,{marker:function(t,e,i){return this.put(new f.Marker).size(t,e).ref(t/2,e/2).viewbox(0,0,t,e).attr("orient","auto").update(i)}}),f.extend(f.Line,f.Polyline,f.Polygon,f.Path,{marker:function(t,e,i,n){var r=["marker"];return"all"!=t&&r.push(t),r=r.join("-"),t=arguments[1]instanceof f.Marker?arguments[1]:this.doc().marker(e,i,n),this.attr(r,t)}});var d={stroke:["color","width","opacity","linecap","linejoin","miterlimit","dasharray","dashoffset"],fill:["color","opacity","rule"],prefix:function(t,e){return"color"==e?t:t+"-"+e}};["fill","stroke"].forEach(function(t){var e,i={};i[t]=function(i){if("string"==typeof i||f.Color.isRgb(i)||i&&"function"==typeof i.fill)this.attr(t,i);else for(e=d[t].length-1;e>=0;e--)null!=i[d[t][e]]&&this.attr(d.prefix(t,d[t][e]),i[d[t][e]]);return this},f.extend(f.Element,f.FX,i)}),f.extend(f.Element,f.FX,{rotate:function(t,e,i){return this.transform({rotation:t||0,cx:e,cy:i})},skew:function(t,e){return this.transform({skewX:t||0,skewY:e||0})},scale:function(t,e){return this.transform({scaleX:t,scaleY:null==e?t:e})},translate:function(t,e){return this.transform({x:t,y:e})},matrix:function(t){return this.transform({matrix:t})},opacity:function(t){return this.attr("opacity",t)}}),f.extend(f.Rect,f.Ellipse,f.Circle,f.FX,{radius:function(t,e){return this.rx(t).ry(null==e?t:e)}}),f.extend(f.Path,{length:function(){return this.node.getTotalLength()},pointAt:function(t){return this.node.getPointAtLength(t)}}),f.extend(f.Parent,f.Text,f.FX,{font:function(t){for(var e in t)"leading"==e?this.leading(t[e]):"anchor"==e?this.attr("text-anchor",t[e]):"size"==e||"family"==e||"weight"==e||"stretch"==e||"variant"==e||"style"==e?this.attr("font-"+e,t[e]):this.attr(e,t[e]);return this}}),f.Set=f.invent({create:function(t){Array.isArray(t)?this.members=t:this.clear()},extend:{add:function(){var t,e,i=[].slice.call(arguments);for(t=0,e=i.length;e>t;t++)this.members.push(i[t]);return this},remove:function(t){var e=this.index(t);return e>-1&&this.members.splice(e,1),this},each:function(t){for(var e=0,i=this.members.length;i>e;e++)t.apply(this.members[e],[e,this.members]);return this},clear:function(){return this.members=[],this},has:function(t){return this.index(t)>=0},index:function(t){return this.members.indexOf(t)},get:function(t){return this.members[t]},first:function(){return this.get(0)},last:function(){return this.get(this.members.length-1)},valueOf:function(){return this.members},bbox:function(){var t=new f.BBox;if(0==this.members.length)return t;var e=this.members[0].rbox();return t.x=e.x,t.y=e.y,t.width=e.width,t.height=e.height,this.each(function(){t=t.merge(this.rbox())}),t}},construct:{set:function(t){return new f.Set(t)}}}),f.SetFX=f.invent({create:function(t){this.set=t}}),f.Set.inherit=function(){var t,e=[];for(var t in f.Shape.prototype)"function"==typeof f.Shape.prototype[t]&&"function"!=typeof f.Set.prototype[t]&&e.push(t);e.forEach(function(t){f.Set.prototype[t]=function(){for(var e=0,i=this.members.length;i>e;e++)this.members[e]&&"function"==typeof this.members[e][t]&&this.members[e][t].apply(this.members[e],arguments);return"animate"==t?this.fx||(this.fx=new f.SetFX(this)):this}}),e=[];for(var t in f.FX.prototype)"function"==typeof f.FX.prototype[t]&&"function"!=typeof f.SetFX.prototype[t]&&e.push(t);e.forEach(function(t){f.SetFX.prototype[t]=function(){for(var e=0,i=this.set.members.length;i>e;e++)this.set.members[e].fx[t].apply(this.set.members[e].fx,arguments);return this}})},f.extend(f.Element,{data:function(t,e,i){if("object"==typeof t)for(e in t)this.data(e,t[e]);else if(arguments.length<2)try{return JSON.parse(this.attr("data-"+t))}catch(n){return this.attr("data-"+t)}else this.attr("data-"+t,null===e?null:i===!0||"string"==typeof e||"number"==typeof e?e:JSON.stringify(e));return this}}),f.extend(f.Element,{remember:function(t,e){if("object"==typeof arguments[0])for(var e in t)this.remember(e,t[e]);else{if(1==arguments.length)return this.memory()[t];this.memory()[t]=e}return this},forget:function(){if(0==arguments.length)this._memory={};else for(var t=arguments.length-1;t>=0;t--)delete this.memory()[arguments[t]];return this},memory:function(){return this._memory||(this._memory={})}}),f.get=function(t){var e=document.getElementById(l(t)||t);return e?f.adopt(e):void 0},f.select=function(t,e){return new f.Set(f.utils.map((e||document).querySelectorAll(t),function(t){return f.adopt(t)}))},f.extend(f.Parent,{select:function(t){return f.select(t,this.node)}}),"function"==typeof define&&define.amd?define(function(){return f}):"undefined"!=typeof exports&&(exports.SVG=f),window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof c&&(c.prototype=window.Event.prototype,window.CustomEvent=c)}).call(this);
\ No newline at end of file +(function(){function t(t){return t.toLowerCase().replace(/-(.)/g,function(t,e){return e.toUpperCase()})}function e(t){return t.charAt(0).toUpperCase()+t.slice(1)}function i(t){return 4==t.length?["#",t.substring(1,2),t.substring(1,2),t.substring(2,3),t.substring(2,3),t.substring(3,4),t.substring(3,4)].join(""):t}function n(t){var e=t.toString(16);return 1==e.length?"0"+e:e}function r(t,e,i){return(null==e||null==i)&&(null==i?i=t.height/t.width*e:null==e&&(e=t.width/t.height*i)),{width:e,height:i}}function s(t,e){return"number"==typeof t.from?t.from+(t.to-t.from)*e:t instanceof f.Color||t instanceof f.Number?t.at(e):1>e?t.from:t.to}function h(t){for(var e=0,i=t.length,n="";i>e;e++)n+=t[e][0],null!=t[e][1]&&(n+=t[e][1],null!=t[e][2]&&(n+=" ",n+=t[e][2],null!=t[e][3]&&(n+=" ",n+=t[e][3],n+=" ",n+=t[e][4],null!=t[e][5]&&(n+=" ",n+=t[e][5],n+=" ",n+=t[e][6],null!=t[e][7]&&(n+=" ",n+=t[e][7])))));return n+" "}function o(t){for(var e=t.childNodes.length-1;e>=0;e--)t.childNodes[e]instanceof SVGElement&&o(t.childNodes[e]);return f.adopt(t).id(f.eid(t.nodeName))}function a(t){return t.x2=t.x+t.width,t.y2=t.y+t.height,t.cx=t.x+t.width/2,t.cy=t.y+t.height/2,t}function u(t){if(t.matrix){var e=t.matrix.replace(/\s/g,"").split(",");6==e.length&&(t.a=parseFloat(e[0]),t.b=parseFloat(e[1]),t.c=parseFloat(e[2]),t.d=parseFloat(e[3]),t.e=parseFloat(e[4]),t.f=parseFloat(e[5]))}return t}function l(t){var e=t.toString().match(f.regex.reference);return e?e[1]:void 0}function c(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),i}var f=this.SVG=function(t){return f.supported?(t=new f.Doc(t),f.parser||f.prepare(t),t):void 0};if(f.ns="http://www.w3.org/2000/svg",f.xmlns="http://www.w3.org/2000/xmlns/",f.xlink="http://www.w3.org/1999/xlink",f.did=1e3,f.eid=function(t){return"Svgjs"+e(t)+f.did++},f.create=function(t){var e=document.createElementNS(this.ns,t);return e.setAttribute("id",this.eid(t)),e},f.extend=function(){var t,e,i,n;for(t=[].slice.call(arguments),e=t.pop(),n=t.length-1;n>=0;n--)if(t[n])for(i in e)t[n].prototype[i]=e[i];f.Set&&f.Set.inherit&&f.Set.inherit()},f.prepare=function(t){var e=document.getElementsByTagName("body")[0],i=(e?new f.Doc(e):t.nested()).size(2,0),n=f.create("path");i.node.appendChild(n),f.parser={body:e||t.parent(),draw:i.style("opacity:0;position:fixed;left:100%;top:100%;overflow:hidden"),poly:i.polyline().node,path:n}},f.supported=function(){return!!document.createElementNS&&!!document.createElementNS(f.ns,"svg").createSVGRect}(),!f.supported)return!1;f.invent=function(t){var e="function"==typeof t.create?t.create:function(){this.constructor.call(this,f.create(t.create))};return t.inherit&&(e.prototype=new t.inherit),t.extend&&f.extend(e,t.extend),t.construct&&f.extend(t.parent||f.Container,t.construct),e},f.adopt=function(t){if(t.instance)return t.instance;var i;return i="svg"==t.nodeName?t.parentNode instanceof SVGElement?new f.Nested:new f.Doc:"lineairGradient"==t.nodeName?new f.Gradient("lineair"):"radialGradient"==t.nodeName?new f.Gradient("radial"):f[e(t.nodeName)]?new(f[e(t.nodeName)]):new f.Element(t),i.type=t.nodeName,i.node=t,t.instance=i,i instanceof f.Doc&&i.namespace().defs(),i},f.regex={unit:/^(-?[\d\.]+)([a-z%]{0,2})$/,hex:/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i,rgb:/rgb\((\d+),(\d+),(\d+)\)/,reference:/#([a-z0-9\-_]+)/i,isHex:/^#[a-f0-9]{3,6}$/i,isRgb:/^rgb\(/,isCss:/[^:]+:[^;]+;?/,isBlank:/^(\s+)?$/,isNumber:/^-?[\d\.]+$/,isPercent:/^-?[\d\.]+%$/,isImage:/\.(jpg|jpeg|png|gif)(\?[^=]+.*)?/i,isEvent:/^[\w]+:[\w]+$/},f.utils={map:function(t,e){var i,n=t.length,r=[];for(i=0;n>i;i++)r.push(e(t[i]));return r}},f.defaults={attrs:{"fill-opacity":1,"stroke-opacity":1,"stroke-width":0,"stroke-linejoin":"miter","stroke-linecap":"butt",fill:"#000000",stroke:"#000000",opacity:1,x:0,y:0,cx:0,cy:0,width:0,height:0,r:0,rx:0,ry:0,offset:0,"stop-opacity":1,"stop-color":"#000000","font-size":16,"font-family":"Helvetica, Arial, sans-serif","text-anchor":"start"},trans:{x:0,y:0,scaleX:1,scaleY:1,rotation:0,skewX:0,skewY:0,matrix:this.matrix,a:1,b:0,c:0,d:1,e:0,f:0}},f.Color=function(t){var e;this.r=0,this.g=0,this.b=0,"string"==typeof t?f.regex.isRgb.test(t)?(e=f.regex.rgb.exec(t.replace(/\s/g,"")),this.r=parseInt(e[1]),this.g=parseInt(e[2]),this.b=parseInt(e[3])):f.regex.isHex.test(t)&&(e=f.regex.hex.exec(i(t)),this.r=parseInt(e[1],16),this.g=parseInt(e[2],16),this.b=parseInt(e[3],16)):"object"==typeof t&&(this.r=t.r,this.g=t.g,this.b=t.b)},f.extend(f.Color,{toString:function(){return this.toHex()},toHex:function(){return"#"+n(this.r)+n(this.g)+n(this.b)},toRgb:function(){return"rgb("+[this.r,this.g,this.b].join()+")"},brightness:function(){return this.r/255*.3+this.g/255*.59+this.b/255*.11},morph:function(t){return this.destination=new f.Color(t),this},at:function(t){return this.destination?(t=0>t?0:t>1?1:t,new f.Color({r:~~(this.r+(this.destination.r-this.r)*t),g:~~(this.g+(this.destination.g-this.g)*t),b:~~(this.b+(this.destination.b-this.b)*t)})):this}}),f.Color.test=function(t){return t+="",f.regex.isHex.test(t)||f.regex.isRgb.test(t)},f.Color.isRgb=function(t){return t&&"number"==typeof t.r&&"number"==typeof t.g&&"number"==typeof t.b},f.Color.isColor=function(t){return f.Color.isRgb(t)||f.Color.test(t)},f.Array=function(t,e){t=(t||[]).valueOf(),0==t.length&&e&&(t=e.valueOf()),this.value=this.parse(t)},f.extend(f.Array,{morph:function(t){if(this.destination=this.parse(t),this.value.length!=this.destination.length){for(var e=this.value[this.value.length-1],i=this.destination[this.destination.length-1];this.value.length>this.destination.length;)this.destination.push(i);for(;this.value.length<this.destination.length;)this.value.push(e)}return this},settle:function(){for(var t=0,e=this.value.length,i=[];e>t;t++)-1==i.indexOf(this.value[t])&&i.push(this.value[t]);return this.value=i},at:function(t){if(!this.destination)return this;for(var e=0,i=this.value.length,n=[];i>e;e++)n.push(this.value[e]+(this.destination[e]-this.value[e])*t);return new f.Array(n)},toString:function(){return this.value.join(" ")},valueOf:function(){return this.value},parse:function(t){return t=t.valueOf(),Array.isArray(t)?t:this.split(t)},split:function(t){return t.replace(/\s+/g," ").replace(/^\s+|\s+$/g,"").split(" ")},reverse:function(){return this.value.reverse(),this}}),f.PointArray=function(t,e){this.constructor.call(this,t,e||[[0,0]])},f.PointArray.prototype=new f.Array,f.extend(f.PointArray,{toString:function(){for(var t=0,e=this.value.length,i=[];e>t;t++)i.push(this.value[t].join(","));return i.join(" ")},toLine:function(){return{x1:this.value[0][0],y1:this.value[0][1],x2:this.value[1][0],y2:this.value[1][1]}},at:function(t){if(!this.destination)return this;for(var e=0,i=this.value.length,n=[];i>e;e++)n.push([this.value[e][0]+(this.destination[e][0]-this.value[e][0])*t,this.value[e][1]+(this.destination[e][1]-this.value[e][1])*t]);return new f.PointArray(n)},parse:function(t){if(t=t.valueOf(),Array.isArray(t))return t;t=this.split(t);for(var e,i=0,n=t.length,r=[];n>i;i++)e=t[i].split(","),r.push([parseFloat(e[0]),parseFloat(e[1])]);return r},move:function(t,e){var i=this.bbox();if(t-=i.x,e-=i.y,!isNaN(t)&&!isNaN(e))for(var n=this.value.length-1;n>=0;n--)this.value[n]=[this.value[n][0]+t,this.value[n][1]+e];return this},size:function(t,e){var i,n=this.bbox();for(i=this.value.length-1;i>=0;i--)this.value[i][0]=(this.value[i][0]-n.x)*t/n.width+n.x,this.value[i][1]=(this.value[i][1]-n.y)*e/n.height+n.y;return this},bbox:function(){return f.parser.poly.setAttribute("points",this.toString()),f.parser.poly.getBBox()}}),f.PathArray=function(t,e){this.constructor.call(this,t,e||[["M",0,0]])},f.PathArray.prototype=new f.Array,f.extend(f.PathArray,{toString:function(){return h(this.value)},move:function(t,e){var i=this.bbox();if(t-=i.x,e-=i.y,!isNaN(t)&&!isNaN(e))for(var n,r=this.value.length-1;r>=0;r--)n=this.value[r][0],"M"==n||"L"==n||"T"==n?(this.value[r][1]+=t,this.value[r][2]+=e):"H"==n?this.value[r][1]+=t:"V"==n?this.value[r][1]+=e:"C"==n||"S"==n||"Q"==n?(this.value[r][1]+=t,this.value[r][2]+=e,this.value[r][3]+=t,this.value[r][4]+=e,"C"==n&&(this.value[r][5]+=t,this.value[r][6]+=e)):"A"==n&&(this.value[r][6]+=t,this.value[r][7]+=e);return this},size:function(t,e){var i,n,r=this.bbox();for(i=this.value.length-1;i>=0;i--)n=this.value[i][0],"M"==n||"L"==n||"T"==n?(this.value[i][1]=(this.value[i][1]-r.x)*t/r.width+r.x,this.value[i][2]=(this.value[i][2]-r.y)*e/r.height+r.y):"H"==n?this.value[i][1]=(this.value[i][1]-r.x)*t/r.width+r.x:"V"==n?this.value[i][1]=(this.value[i][1]-r.y)*e/r.height+r.y:"C"==n||"S"==n||"Q"==n?(this.value[i][1]=(this.value[i][1]-r.x)*t/r.width+r.x,this.value[i][2]=(this.value[i][2]-r.y)*e/r.height+r.y,this.value[i][3]=(this.value[i][3]-r.x)*t/r.width+r.x,this.value[i][4]=(this.value[i][4]-r.y)*e/r.height+r.y,"C"==n&&(this.value[i][5]=(this.value[i][5]-r.x)*t/r.width+r.x,this.value[i][6]=(this.value[i][6]-r.y)*e/r.height+r.y)):"A"==n&&(this.value[i][1]=this.value[i][1]*t/r.width,this.value[i][2]=this.value[i][2]*e/r.height,this.value[i][6]=(this.value[i][6]-r.x)*t/r.width+r.x,this.value[i][7]=(this.value[i][7]-r.y)*e/r.height+r.y);return this},parse:function(t){if(t instanceof f.PathArray)return t.valueOf();var e,i,n,r,s,o,a,u,l,c,d,p=0,m=0;for(f.parser.path.setAttribute("d","string"==typeof t?t:h(t)),d=f.parser.path.pathSegList,e=0,i=d.numberOfItems;i>e;++e)c=d.getItem(e),l=c.pathSegTypeAsLetter,"M"==l||"L"==l||"H"==l||"V"==l||"C"==l||"S"==l||"Q"==l||"T"==l||"A"==l?("x"in c&&(p=c.x),"y"in c&&(m=c.y)):("x1"in c&&(s=p+c.x1),"x2"in c&&(a=p+c.x2),"y1"in c&&(o=m+c.y1),"y2"in c&&(u=m+c.y2),"x"in c&&(p+=c.x),"y"in c&&(m+=c.y),"m"==l?d.replaceItem(f.parser.path.createSVGPathSegMovetoAbs(p,m),e):"l"==l?d.replaceItem(f.parser.path.createSVGPathSegLinetoAbs(p,m),e):"h"==l?d.replaceItem(f.parser.path.createSVGPathSegLinetoHorizontalAbs(p),e):"v"==l?d.replaceItem(f.parser.path.createSVGPathSegLinetoVerticalAbs(m),e):"c"==l?d.replaceItem(f.parser.path.createSVGPathSegCurvetoCubicAbs(p,m,s,o,a,u),e):"s"==l?d.replaceItem(f.parser.path.createSVGPathSegCurvetoCubicSmoothAbs(p,m,a,u),e):"q"==l?d.replaceItem(f.parser.path.createSVGPathSegCurvetoQuadraticAbs(p,m,s,o),e):"t"==l?d.replaceItem(f.parser.path.createSVGPathSegCurvetoQuadraticSmoothAbs(p,m),e):"a"==l?d.replaceItem(f.parser.path.createSVGPathSegArcAbs(p,m,c.r1,c.r2,c.angle,c.largeArcFlag,c.sweepFlag),e):("z"==l||"Z"==l)&&(p=n,m=r)),("M"==l||"m"==l)&&(n=p,r=m);for(t=[],d=f.parser.path.pathSegList,e=0,i=d.numberOfItems;i>e;++e)c=d.getItem(e),l=c.pathSegTypeAsLetter,p=[l],"M"==l||"L"==l||"T"==l?p.push(c.x,c.y):"H"==l?p.push(c.x):"V"==l?p.push(c.y):"C"==l?p.push(c.x1,c.y1,c.x2,c.y2,c.x,c.y):"S"==l?p.push(c.x2,c.y2,c.x,c.y):"Q"==l?p.push(c.x1,c.y1,c.x,c.y):"A"==l&&p.push(c.r1,c.r2,c.angle,0|c.largeArcFlag,0|c.sweepFlag,c.x,c.y),t.push(p);return t},bbox:function(){return f.parser.path.setAttribute("d",this.toString()),f.parser.path.getBBox()}}),f.Number=function(t){if(this.value=0,this.unit="","number"==typeof t)this.value=isNaN(t)?0:isFinite(t)?t:0>t?-3.4e38:3.4e38;else if("string"==typeof t){var e=t.match(f.regex.unit);e&&(this.value=parseFloat(e[1]),"%"==e[2]?this.value/=100:"s"==e[2]&&(this.value*=1e3),this.unit=e[2])}else t instanceof f.Number&&(this.value=t.value,this.unit=t.unit)},f.extend(f.Number,{toString:function(){return("%"==this.unit?~~(1e8*this.value)/1e6:"s"==this.unit?this.value/1e3:this.value)+this.unit},valueOf:function(){return this.value},plus:function(t){return this.value=this+new f.Number(t),this},minus:function(t){return this.plus(-new f.Number(t))},times:function(t){return this.value=this*new f.Number(t),this},divide:function(t){return this.value=this/new f.Number(t),this},to:function(t){return"string"==typeof t&&(this.unit=t),this},morph:function(t){return this.destination=new f.Number(t),this},at:function(t){return this.destination?new f.Number(this.destination).minus(this).times(t).plus(this):this}}),f.ViewBox=function(t){var e,i,n,r,s=1,h=1,o=t.bbox(),a=(t.attr("viewBox")||"").match(/-?[\d\.]+/g),u=t,l=t;for(n=new f.Number(t.width()),r=new f.Number(t.height());"%"==n.unit;)s*=n.value,n=new f.Number(u instanceof f.Doc?u.parent().offsetWidth:u.parent().width()),u=u.parent();for(;"%"==r.unit;)h*=r.value,r=new f.Number(l instanceof f.Doc?l.parent().offsetHeight:l.parent().height()),l=l.parent();this.x=o.x,this.y=o.y,this.width=n*s,this.height=r*h,this.zoom=1,a&&(e=parseFloat(a[0]),i=parseFloat(a[1]),n=parseFloat(a[2]),r=parseFloat(a[3]),this.zoom=this.width/this.height>n/r?this.height/r:this.width/n,this.x=e,this.y=i,this.width=n,this.height=r)},f.extend(f.ViewBox,{toString:function(){return this.x+" "+this.y+" "+this.width+" "+this.height}}),f.BBox=function(t){var e;if(this.x=0,this.y=0,this.width=0,this.height=0,t){try{e=t.node.getBBox()}catch(i){e={x:t.node.clientLeft,y:t.node.clientTop,width:t.node.clientWidth,height:t.node.clientHeight}}this.x=e.x+t.trans.x,this.y=e.y+t.trans.y,this.width=e.width*t.trans.scaleX,this.height=e.height*t.trans.scaleY}a(this)},f.extend(f.BBox,{merge:function(t){var e=new f.BBox;return e.x=Math.min(this.x,t.x),e.y=Math.min(this.y,t.y),e.width=Math.max(this.x+this.width,t.x+t.width)-e.x,e.height=Math.max(this.y+this.height,t.y+t.height)-e.y,a(e)}}),f.RBox=function(t){var e,i,n={};if(this.x=0,this.y=0,this.width=0,this.height=0,t){for(e=t.doc().parent(),i=t.doc().viewbox().zoom,n=t.node.getBoundingClientRect(),this.x=n.left,this.y=n.top,this.x-=e.offsetLeft,this.y-=e.offsetTop;e=e.offsetParent;)this.x-=e.offsetLeft,this.y-=e.offsetTop;for(e=t;e.parent&&(e=e.parent());)"svg"==e.type&&e.viewbox&&(i*=e.viewbox().zoom,this.x-=e.x()||0,this.y-=e.y()||0)}this.x/=i,this.y/=i,this.width=n.width/=i,this.height=n.height/=i,this.x+=window.scrollX,this.y+=window.scrollY,a(this)},f.extend(f.RBox,{merge:function(t){var e=new f.RBox;return e.x=Math.min(this.x,t.x),e.y=Math.min(this.y,t.y),e.width=Math.max(this.x+this.width,t.x+t.width)-e.x,e.height=Math.max(this.y+this.height,t.y+t.height)-e.y,a(e)}}),f.Element=f.invent({create:function(t){this._stroke=f.defaults.attrs.stroke,(this.node=t)&&(this.type=t.nodeName,this.node.instance=this,this._stroke=t.getAttribute("stroke")||this._stroke)},extend:{x:function(t){return null!=t&&(t=new f.Number(t),t.value/=this.trans.scaleX),this.attr("x",t)},y:function(t){return null!=t&&(t=new f.Number(t),t.value/=this.trans.scaleY),this.attr("y",t)},cx:function(t){return null==t?this.x()+this.width()/2:this.x(t-this.width()/2)},cy:function(t){return null==t?this.y()+this.height()/2:this.y(t-this.height()/2)},move:function(t,e){return this.x(t).y(e)},center:function(t,e){return this.cx(t).cy(e)},width:function(t){return this.attr("width",t)},height:function(t){return this.attr("height",t)},size:function(t,e){var i=r(this.bbox(),t,e);return this.width(new f.Number(i.width)).height(new f.Number(i.height))},clone:function(){return o(this.node.cloneNode(!0))},remove:function(){return this.parent()&&this.parent().removeElement(this),this},replace:function(t){return this.after(t).remove(),t},addTo:function(t){return t.put(this)},putIn:function(t){return t.add(this)},doc:function(t){return this.parent(t||f.Doc)},attr:function(t,e,i){if(null==t){for(t={},e=this.node.attributes,i=e.length-1;i>=0;i--)t[e[i].nodeName]=f.regex.isNumber.test(e[i].nodeValue)?parseFloat(e[i].nodeValue):e[i].nodeValue;return t}if("object"==typeof t)for(e in t)this.attr(e,t[e]);else if(null===e)this.node.removeAttribute(t);else{if(null==e)return e=this.node.getAttribute(t),null==e?f.defaults.attrs[t]:f.regex.isNumber.test(e)?parseFloat(e):e;"stroke-width"==t?this.attr("stroke",parseFloat(e)>0?this._stroke:null):"stroke"==t&&(this._stroke=e),("fill"==t||"stroke"==t)&&(f.regex.isImage.test(e)&&(e=this.doc().defs().image(e,0,0)),e instanceof f.Image&&(e=this.doc().defs().pattern(0,0,function(){this.add(e)}))),"number"==typeof e?e=new f.Number(e):f.Color.isColor(e)?e=new f.Color(e):Array.isArray(e)&&(e=new f.Array(e)),"leading"==t?this.leading&&this.leading(e):"string"==typeof i?this.node.setAttributeNS(i,t,e.toString()):this.node.setAttribute(t,e.toString()),!this.rebuild||"font-size"!=t&&"x"!=t||this.rebuild(t,e)}return this},transform:function(t){return this},style:function(e,i){if(0==arguments.length)return this.node.style.cssText||"";if(arguments.length<2)if("object"==typeof e)for(i in e)this.style(i,e[i]);else{if(!f.regex.isCss.test(e))return this.node.style[t(e)];e=e.split(";");for(var n=0;n<e.length;n++)i=e[n].split(":"),this.style(i[0].replace(/\s+/g,""),i[1])}else this.node.style[t(e)]=null===i||f.regex.isBlank.test(i)?"":i;return this},id:function(t){return this.attr("id",t)},bbox:function(){return new f.BBox(this)},rbox:function(){return new f.RBox(this)},inside:function(t,e){var i=this.bbox();return t>i.x&&e>i.y&&t<i.x+i.width&&e<i.y+i.height},show:function(){return this.style("display","")},hide:function(){return this.style("display","none")},visible:function(){return"none"!=this.style("display")},toString:function(){return this.attr("id")},classes:function(){var t=this.attr("class");return null==t?[]:t.trim().split(/\s+/)},hasClass:function(t){return-1!=this.classes().indexOf(t)},addClass:function(t){if(!this.hasClass(t)){var e=this.classes();e.push(t),this.attr("class",e.join(" "))}return this},removeClass:function(t){if(this.hasClass(t)){var e=this.classes().filter(function(e){return e!=t});this.attr("class",e.join(" "))}return this},toggleClass:function(t){return this.hasClass(t)?this.removeClass(t):this.addClass(t)},reference:function(t){return f.get(this.attr(t))},parent:function(t){var e=f.adopt(this.node.parentNode);if(t)for(;!(e instanceof t);)e=f.adopt(e.node.parentNode);return e}}}),f.Parent=f.invent({create:function(t){this.constructor.call(this,t)},inherit:f.Element,extend:{children:function(){return f.utils.map(this.node.childNodes,function(t){return f.adopt(t)})},add:function(t,e){return this.has(t)||(e=null==e?this.children().length:e,this.node.insertBefore(t.node,this.node.childNodes[e]||null)),this},put:function(t,e){return this.add(t,e),t},has:function(t){return this.index(t)>=0},index:function(t){return this.children().indexOf(t)},get:function(t){return this.children()[t]},first:function(){return this.children()[0]},last:function(){return this.children()[this.children().length-1]},each:function(t,e){var i,n,r=this.children();for(i=0,n=r.length;n>i;i++)r[i]instanceof f.Element&&t.apply(r[i],[i,r]),e&&r[i]instanceof f.Container&&r[i].each(t,e);return this},removeElement:function(t){return this.node.removeChild(t.node),this},clear:function(){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return delete this._defs,this},defs:function(){return this.doc().defs()}}}),f.Container=f.invent({create:function(t){this.constructor.call(this,t)},inherit:f.Parent,extend:{viewbox:function(t){return 0==arguments.length?new f.ViewBox(this):(t=1==arguments.length?[t.x,t.y,t.width,t.height]:[].slice.call(arguments),this.attr("viewBox",t))}}}),f.FX=f.invent({create:function(t){this.target=t},extend:{animate:function(t,e,i){var n,r,h,o,a=this.target,u=this;return"object"==typeof t&&(i=t.delay,e=t.ease,t=t.duration),t="="==t?t:null==t?1e3:new f.Number(t).valueOf(),e=e||"<>",u.to=function(t){var i;if(t=0>t?0:t>1?1:t,null==n){n=[];for(o in u.attrs)n.push(o);if(a.morphArray&&(u._plot||n.indexOf("points")>-1)){var l,c=new a.morphArray(u._plot||u.attrs.points||a.array);u._size&&c.size(u._size.width.to,u._size.height.to),l=c.bbox(),u._x?c.move(u._x.to,l.y):u._cx&&c.move(u._cx.to-l.width/2,l.y),l=c.bbox(),u._y?c.move(l.x,u._y.to):u._cy&&c.move(l.x,u._cy.to-l.height/2),delete u._x,delete u._y,delete u._cx,delete u._cy,delete u._size,u._plot=a.array.morph(c)}}if(null==r){r=[];for(o in u.trans)r.push(o)}if(null==h){h=[];for(o in u.styles)h.push(o)}for(t="<>"==e?-Math.cos(t*Math.PI)/2+.5:">"==e?Math.sin(t*Math.PI/2):"<"==e?-Math.cos(t*Math.PI/2)+1:"-"==e?t:"function"==typeof e?e(t):t,u._plot?a.plot(u._plot.at(t)):(u._x?a.x(u._x.at(t)):u._cx&&a.cx(u._cx.at(t)),u._y?a.y(u._y.at(t)):u._cy&&a.cy(u._cy.at(t)),u._size&&a.size(u._size.width.at(t),u._size.height.at(t))),u._viewbox&&a.viewbox(u._viewbox.x.at(t),u._viewbox.y.at(t),u._viewbox.width.at(t),u._viewbox.height.at(t)),u._leading&&a.leading(u._leading.at(t)),i=n.length-1;i>=0;i--)a.attr(n[i],s(u.attrs[n[i]],t));for(i=r.length-1;i>=0;i--)a.transform(r[i],s(u.trans[r[i]],t));for(i=h.length-1;i>=0;i--)a.style(h[i],s(u.styles[h[i]],t));u._during&&u._during.call(a,t,function(e,i){return s({from:e,to:i},t)})},"number"==typeof t&&(this.timeout=setTimeout(function(){var n=(new Date).getTime();u.situation={interval:1e3/60,start:n,play:!0,finish:n+t,duration:t},u.render=function(){if(u.situation.play===!0){var n=(new Date).getTime(),r=n>u.situation.finish?1:(n-u.situation.start)/t;u.to(r),n>u.situation.finish?(u._plot&&a.plot(new f.PointArray(u._plot.destination).settle()),u._loop===!0||"number"==typeof u._loop&&u._loop>1?("number"==typeof u._loop&&--u._loop,u.animate(t,e,i)):u._after?u._after.apply(a,[u]):u.stop()):requestAnimFrame(u.render)}else requestAnimFrame(u.render)},u.render()},new f.Number(i).valueOf())),this},bbox:function(){return this.target.bbox()},attr:function(t,e){if("object"==typeof t)for(var i in t)this.attr(i,t[i]);else{var n=this.target.attr(t);this.attrs[t]=f.Color.isColor(n)?new f.Color(n).morph(e):f.regex.unit.test(n)?new f.Number(n).morph(e):{from:n,to:e}}return this},transform:function(t,e){if(1==arguments.length){t=u(t),delete t.matrix;for(e in t)this.trans[e]={from:this.target.trans[e],to:t[e]}}else{var i={};i[t]=e,this.transform(i)}return this},style:function(t,e){if("object"==typeof t)for(var i in t)this.style(i,t[i]);else this.styles[t]={from:this.target.style(t),to:e};return this},x:function(t){return this._x=new f.Number(this.target.x()).morph(t),this},y:function(t){return this._y=new f.Number(this.target.y()).morph(t),this},cx:function(t){return this._cx=new f.Number(this.target.cx()).morph(t),this},cy:function(t){return this._cy=new f.Number(this.target.cy()).morph(t),this},move:function(t,e){return this.x(t).y(e)},center:function(t,e){return this.cx(t).cy(e)},size:function(t,e){if(this.target instanceof f.Text)this.attr("font-size",t);else{var i=this.target.bbox();this._size={width:new f.Number(i.width).morph(t),height:new f.Number(i.height).morph(e)}}return this},plot:function(t){return this._plot=t,this},leading:function(t){return this.target._leading&&(this._leading=new f.Number(this.target._leading).morph(t)),this},viewbox:function(t,e,i,n){if(this.target instanceof f.Container){var r=this.target.viewbox();this._viewbox={x:new f.Number(r.x).morph(t),y:new f.Number(r.y).morph(e),width:new f.Number(r.width).morph(i),height:new f.Number(r.height).morph(n)}}return this},update:function(t){return this.target instanceof f.Stop&&(null!=t.opacity&&this.attr("stop-opacity",t.opacity),null!=t.color&&this.attr("stop-color",t.color),null!=t.offset&&this.attr("offset",new f.Number(t.offset))),this},during:function(t){return this._during=t,this},after:function(t){return this._after=t,this},loop:function(t){return this._loop=t||!0,this},stop:function(t){return t===!0?(this.animate(0),this._after&&this._after.apply(this.target,[this])):(clearTimeout(this.timeout),this.attrs={},this.trans={},this.styles={},this.situation={},delete this._x,delete this._y,delete this._cx,delete this._cy,delete this._size,delete this._plot,delete this._loop,delete this._after,delete this._during,delete this._leading,delete this._viewbox),this},pause:function(){return this.situation.play===!0&&(this.situation.play=!1,this.situation.pause=(new Date).getTime()),this},play:function(){if(this.situation.play===!1){var t=(new Date).getTime()-this.situation.pause;this.situation.finish+=t,this.situation.start+=t,this.situation.play=!0}return this}},parent:f.Element,construct:{animate:function(t,e,i){return(this.fx||(this.fx=new f.FX(this))).stop().animate(t,e,i)},stop:function(t){return this.fx&&this.fx.stop(t),this},pause:function(){return this.fx&&this.fx.pause(),this},play:function(){return this.fx&&this.fx.play(),this}}}),f.extend(f.Element,f.FX,{dx:function(t){return this.x((this.target||this).x()+t)},dy:function(t){return this.y((this.target||this).y()+t)},dmove:function(t,e){return this.dx(t).dy(e)}}),["click","dblclick","mousedown","mouseup","mouseover","mouseout","mousemove","mouseenter","mouseleave","touchstart","touchmove","touchleave","touchend","touchcancel"].forEach(function(t){f.Element.prototype[t]=function(e){var i=this;return this.node["on"+t]="function"==typeof e?function(){return e.apply(i,arguments)}:null,this}}),f.events={},f.listeners={},f.registerEvent=function(t){f.events[t]||(f.events[t]=new c(t))},f.on=function(t,e,i){var n=i.bind(t.instance||t);f.listeners[i]=n,t.addEventListener(e,n,!1)},f.off=function(t,e,i){t.removeEventListener(e,f.listeners[i],!1),delete f.listeners[i]},f.extend(f.Element,{on:function(t,e){return f.on(this.node,t,e),this},off:function(t,e){return f.off(this.node,t,e),this},fire:function(t,e){return f.events[t].detail=e,this.node.dispatchEvent(f.events[t]),delete f.events[t].detail,this}}),f.Defs=f.invent({create:"defs",inherit:f.Container}),f.G=f.invent({create:"g",inherit:f.Container,extend:{x:function(t){return null==t?this.trans.x:this.transform("x",t)},y:function(t){return null==t?this.trans.y:this.transform("y",t)},cx:function(t){return null==t?this.bbox().cx:this.x(t-this.bbox().width/2)},cy:function(t){return null==t?this.bbox().cy:this.y(t-this.bbox().height/2)}},construct:{group:function(){return this.put(new f.G)}}}),f.extend(f.Element,{siblings:function(){return this.parent().children()},position:function(){return this.parent().index(this)},next:function(){return this.siblings()[this.position()+1]},previous:function(){return this.siblings()[this.position()-1]},forward:function(){var t=this.position()+1,e=this.parent();return e.removeElement(this).add(this,t),e instanceof f.Doc&&e.node.appendChild(e.defs().node),this},backward:function(){var t=this.position();return t>0&&this.parent().removeElement(this).add(this,t-1),this},front:function(){var t=this.parent();return t.node.appendChild(this.node),t instanceof f.Doc&&t.node.appendChild(t.defs().node),this},back:function(){return this.position()>0&&this.parent().removeElement(this).add(this,0),this},before:function(t){t.remove();var e=this.position();return this.parent().add(t,e),this},after:function(t){t.remove();var e=this.position();return this.parent().add(t,e+1),this}}),f.Mask=f.invent({create:function(){this.constructor.call(this,f.create("mask")),this.targets=[]},inherit:f.Container,extend:{remove:function(){for(var t=this.targets.length-1;t>=0;t--)this.targets[t]&&this.targets[t].unmask();return delete this.targets,this.parent().removeElement(this),this}},construct:{mask:function(){return this.defs().put(new f.Mask)}}}),f.extend(f.Element,{maskWith:function(t){return this.masker=t instanceof f.Mask?t:this.parent().mask().add(t),this.masker.targets.push(this),this.attr("mask",'url("#'+this.masker.attr("id")+'")')},unmask:function(){return delete this.masker,this.attr("mask",null)}}),f.ClipPath=f.invent({create:function(){this.constructor.call(this,f.create("clipPath")),this.targets=[]},inherit:f.Container,extend:{remove:function(){for(var t=this.targets.length-1;t>=0;t--)this.targets[t]&&this.targets[t].unclip();return delete this.targets,this.parent().removeElement(this),this}},construct:{clip:function(){return this.defs().put(new f.ClipPath)}}}),f.extend(f.Element,{clipWith:function(t){return this.clipper=t instanceof f.ClipPath?t:this.parent().clip().add(t),this.clipper.targets.push(this),this.attr("clip-path",'url("#'+this.clipper.attr("id")+'")')},unclip:function(){return delete this.clipper,this.attr("clip-path",null)}}),f.Gradient=f.invent({create:function(t){this.constructor.call(this,f.create(t+"Gradient")),this.type=t},inherit:f.Container,extend:{from:function(t,e){return"radial"==this.type?this.attr({fx:new f.Number(t),fy:new f.Number(e)}):this.attr({x1:new f.Number(t),y1:new f.Number(e)})},to:function(t,e){return"radial"==this.type?this.attr({cx:new f.Number(t),cy:new f.Number(e)}):this.attr({x2:new f.Number(t),y2:new f.Number(e)})},radius:function(t){return"radial"==this.type?this.attr({r:new f.Number(t)}):this},at:function(t,e,i){return this.put(new f.Stop).update(t,e,i)},update:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this},fill:function(){return"url(#"+this.id()+")"},toString:function(){return this.fill()}},construct:{gradient:function(t,e){return this.defs().gradient(t,e)}}}),f.extend(f.Defs,{gradient:function(t,e){return this.put(new f.Gradient(t)).update(e)}}),f.Stop=f.invent({create:"stop",inherit:f.Element,extend:{update:function(t){return("number"==typeof t||t instanceof f.Number)&&(t={offset:arguments[0],color:arguments[1],opacity:arguments[2]}),null!=t.opacity&&this.attr("stop-opacity",t.opacity),null!=t.color&&this.attr("stop-color",t.color),null!=t.offset&&this.attr("offset",new f.Number(t.offset)),this}}}),f.Pattern=f.invent({create:"pattern",inherit:f.Container,extend:{fill:function(){return"url(#"+this.id()+")"},update:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this},toString:function(){return this.fill()}},construct:{pattern:function(t,e,i){return this.defs().pattern(t,e,i)}}}),f.extend(f.Defs,{pattern:function(t,e,i){return this.put(new f.Pattern).update(i).attr({x:0,y:0,width:t,height:e,patternUnits:"userSpaceOnUse"})}}),f.Doc=f.invent({create:function(t){t&&(t="string"==typeof t?document.getElementById(t):t,"svg"==t.nodeName?this.constructor.call(this,t):(this.constructor.call(this,f.create("svg")),t.appendChild(this.node)),this.namespace().size("100%","100%").defs())},inherit:f.Container,extend:{namespace:function(){return this.attr({xmlns:f.ns,version:"1.1"}).attr("xmlns:xlink",f.xlink,f.xmlns)},defs:function(){if(!this._defs){var t;this._defs=(t=this.node.getElementsByTagName("defs")[0])?f.adopt(t):new f.Defs,this.node.appendChild(this._defs.node)}return this._defs},parent:function(){return"#document"==this.node.parentNode.nodeName?null:this.node.parentNode}}}),f.extend(f.Doc,{spof:function(){if(this.doSpof){var t=this.node.getScreenCTM();t&&this.style("left",-t.e%1+"px").style("top",-t.f%1+"px")}return this},fixSubPixelOffset:function(){var t=this;return this.doSpof=!0,f.on(window,"resize",function(){t.spof()}),this.spof()}}),f.Shape=f.invent({create:function(t){this.constructor.call(this,t)},inherit:f.Element}),f.Symbol=f.invent({create:"symbol",inherit:f.Container,construct:{symbol:function(){return this.defs().put(new f.Symbol)}}}),f.Use=f.invent({create:"use",inherit:f.Shape,extend:{element:function(t){return this.target=t,this.attr("href","#"+t,f.xlink)}},construct:{use:function(t){return this.put(new f.Use).element(t)}}}),f.Rect=f.invent({create:"rect",inherit:f.Shape,construct:{rect:function(t,e){return this.put((new f.Rect).size(t,e))}}}),f.Circle=f.invent({create:"circle",inherit:f.Shape,construct:{circle:function(t){return this.put(new f.Circle).rx(new f.Number(t).divide(2)).move(0,0)}}}),f.extend(f.Circle,f.FX,{rx:function(t){return this.attr("r",t)},ry:function(t){return this.rx(t)}}),f.Ellipse=f.invent({create:"ellipse",inherit:f.Shape,construct:{ellipse:function(t,e){return this.put(new f.Ellipse).size(t,e).move(0,0)}}}),f.extend(f.Ellipse,f.Rect,f.FX,{rx:function(t){return this.attr("rx",t)},ry:function(t){return this.attr("ry",t)}}),f.extend(f.Circle,f.Ellipse,{x:function(t){return null==t?this.cx()-this.rx():this.cx(t+this.rx())},y:function(t){return null==t?this.cy()-this.ry():this.cy(t+this.ry())},cx:function(t){return null==t?this.attr("cx"):this.attr("cx",new f.Number(t).divide(this.trans.scaleX))},cy:function(t){return null==t?this.attr("cy"):this.attr("cy",new f.Number(t).divide(this.trans.scaleY))},width:function(t){return null==t?2*this.rx():this.rx(new f.Number(t).divide(2))},height:function(t){return null==t?2*this.ry():this.ry(new f.Number(t).divide(2))},size:function(t,e){var i=r(this.bbox(),t,e);return this.rx(new f.Number(i.width).divide(2)).ry(new f.Number(i.height).divide(2))}}),f.Line=f.invent({create:"line",inherit:f.Shape,extend:{array:function(){return this._array=new f.PointArray([[this.attr("x1"),this.attr("y1")],[this.attr("x2"),this.attr("y2")]])},plot:function(t,e,i,n){return t="number"==typeof t?{x1:t,y1:e,x2:i,y2:n}:(this._array=new f.PointArray(t)).toLine(),this.attr(t)},move:function(t,e){return this.attr(this.array().move(t,e).toLine())},size:function(t,e){var i=r(this.bbox(),t,e);return this.attr(this.array().size(i.width,i.height).toLine())}},construct:{line:function(t,e,i,n){return this.put(new f.Line).plot(t,e,i,n)}}}),f.Polyline=f.invent({create:"polyline",inherit:f.Shape,construct:{polyline:function(t){return this.put(new f.Polyline).plot(t) +}}}),f.Polygon=f.invent({create:"polygon",inherit:f.Shape,construct:{polygon:function(t){return this.put(new f.Polygon).plot(t)}}}),f.extend(f.Polyline,f.Polygon,{array:function(){return this._array||(this._array=new f.PointArray(this.attr("points")))},plot:function(t){return this.attr("points",this._array=new f.PointArray(t))},move:function(t,e){return this.attr("points",this.array().move(t,e))},size:function(t,e){var i=r(this.bbox(),t,e);return this.attr("points",this.array().size(i.width,i.height))}}),f.extend(f.Line,f.Polyline,f.Polygon,{morphArray:f.PointArray,x:function(t){return null==t?this.bbox().x:this.move(t,this.bbox().y)},y:function(t){return null==t?this.bbox().y:this.move(this.bbox().x,t)},width:function(t){var e=this.bbox();return null==t?e.width:this.size(t,e.height)},height:function(t){var e=this.bbox();return null==t?e.height:this.size(e.width,t)}}),f.Path=f.invent({create:"path",inherit:f.Shape,extend:{morphArray:f.PathArray,array:function(){return this._array||(this._array=new f.PathArray(this.attr("d")))},plot:function(t){return this.attr("d",this._array=new f.PathArray(t))},move:function(t,e){return this.attr("d",this.array().move(t,e))},x:function(t){return null==t?this.bbox().x:this.move(t,this.bbox().y)},y:function(t){return null==t?this.bbox().y:this.move(this.bbox().x,t)},size:function(t,e){var i=r(this.bbox(),t,e);return this.attr("d",this.array().size(i.width,i.height))},width:function(t){return null==t?this.bbox().width:this.size(t,this.bbox().height)},height:function(t){return null==t?this.bbox().height:this.size(this.bbox().width,t)}},construct:{path:function(t){return this.put(new f.Path).plot(t)}}}),f.Image=f.invent({create:"image",inherit:f.Shape,extend:{load:function(t){if(!t)return this;var e=this,i=document.createElement("img");return i.onload=function(){var n=e.doc(f.Pattern);0==e.width()&&0==e.height()&&e.size(i.width,i.height),n&&0==n.width()&&0==n.height()&&n.size(e.width(),e.height()),"function"==typeof e._loaded&&e._loaded.call(e,{width:i.width,height:i.height,ratio:i.width/i.height,url:t})},this.attr("href",i.src=this.src=t,f.xlink)},loaded:function(t){return this._loaded=t,this}},construct:{image:function(t,e,i){return this.put(new f.Image).load(t).size(e||0,i||e||0)}}}),f.Text=f.invent({create:function(){this.constructor.call(this,f.create("text")),this._leading=new f.Number(1.3),this._rebuild=!0,this._build=!1,this.attr("font-family",f.defaults.attrs["font-family"])},inherit:f.Shape,extend:{x:function(t){return null==t?this.attr("x"):(this.textPath||this.lines.each(function(){this.newLined&&this.x(t)}),this.attr("x",t))},y:function(t){var e=this.attr("y"),i="number"==typeof e?e-this.bbox().y:0;return null==t?"number"==typeof e?e-i:e:this.attr("y","number"==typeof t?t+i:t)},cx:function(t){return null==t?this.bbox().cx:this.x(t-this.bbox().width/2)},cy:function(t){return null==t?this.bbox().cy:this.y(t-this.bbox().height/2)},text:function(t){if("undefined"==typeof t)return this.content;if(this.clear().build(!0),"function"==typeof t)t.call(this,this);else{t=(this.content=t).split("\n");for(var e=0,i=t.length;i>e;e++)this.tspan(t[e]).newLine()}return this.build(!1).rebuild()},size:function(t){return this.attr("font-size",t).rebuild()},leading:function(t){return null==t?this._leading:(this._leading=new f.Number(t),this.rebuild())},rebuild:function(t){if("boolean"==typeof t&&(this._rebuild=t),this._rebuild){var e=this;this.lines.each(function(){this.newLined&&(this.textPath||this.attr("x",e.attr("x")),this.attr("dy",e._leading*new f.Number(e.attr("font-size"))))}),this.fire("rebuild")}return this},build:function(t){return this._build=!!t,this}},construct:{text:function(t){return this.put(new f.Text).text(t)},plain:function(t){return this.put(new f.Text).plain(t)}}}),f.Tspan=f.invent({create:"tspan",inherit:f.Shape,extend:{text:function(t){return"function"==typeof t?t.call(this,this):this.plain(t),this},dx:function(t){return this.attr("dx",t)},dy:function(t){return this.attr("dy",t)},newLine:function(){var t=this.doc(f.Text);return this.newLined=!0,this.dy(t._leading*t.attr("font-size")).attr("x",t.x())}}}),f.extend(f.Text,f.Tspan,{plain:function(t){return this._build===!1&&this.clear(),this.node.appendChild(document.createTextNode(this.content=t)),this},tspan:function(t){var e=(this.textPath||this).node,i=new f.Tspan;return this._build===!1&&this.clear(),e.appendChild(i.node),this instanceof f.Text&&this.lines.add(i),i.text(t)},clear:function(){for(var t=(this.textPath||this).node;t.hasChildNodes();)t.removeChild(t.lastChild);return this instanceof f.Text&&(delete this.lines,this.lines=new f.Set,this.content=""),this},length:function(){return this.node.getComputedTextLength()}}),f.registerEvent("rebuild"),f.TextPath=f.invent({create:"textPath",inherit:f.Element,parent:f.Text,construct:{path:function(t){for(this.textPath=new f.TextPath;this.node.hasChildNodes();)this.textPath.node.appendChild(this.node.firstChild);return this.node.appendChild(this.textPath.node),this.track=this.doc().defs().path(t),this.textPath.parent=this,this.textPath.attr("href","#"+this.track,f.xlink),this},plot:function(t){return this.track&&this.track.plot(t),this}}}),f.Nested=f.invent({create:function(){this.constructor.call(this,f.create("svg")),this.style("overflow","visible")},inherit:f.Container,construct:{nested:function(){return this.put(new f.Nested)}}}),f.A=f.invent({create:"a",inherit:f.Container,extend:{to:function(t){return this.attr("href",t,f.xlink)},show:function(t){return this.attr("show",t,f.xlink)},target:function(t){return this.attr("target",t)}},construct:{link:function(t){return this.put(new f.A).to(t)}}}),f.extend(f.Element,{linkTo:function(t){var e=new f.A;return"function"==typeof t?t.call(e,e):e.to(t),this.parent().put(e).put(this)}}),f.Marker=f.invent({create:"marker",inherit:f.Container,extend:{width:function(t){return this.attr("markerWidth",t)},height:function(t){return this.attr("markerHeight",t)},ref:function(t,e){return this.attr("refX",t).attr("refY",e)},update:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this},toString:function(){return"url(#"+this.id()+")"}},construct:{marker:function(t,e,i){return this.defs().marker(t,e,i)}}}),f.extend(f.Defs,{marker:function(t,e,i){return this.put(new f.Marker).size(t,e).ref(t/2,e/2).viewbox(0,0,t,e).attr("orient","auto").update(i)}}),f.extend(f.Line,f.Polyline,f.Polygon,f.Path,{marker:function(t,e,i,n){var r=["marker"];return"all"!=t&&r.push(t),r=r.join("-"),t=arguments[1]instanceof f.Marker?arguments[1]:this.doc().marker(e,i,n),this.attr(r,t)}});var d={stroke:["color","width","opacity","linecap","linejoin","miterlimit","dasharray","dashoffset"],fill:["color","opacity","rule"],prefix:function(t,e){return"color"==e?t:t+"-"+e}};["fill","stroke"].forEach(function(t){var e,i={};i[t]=function(i){if("string"==typeof i||f.Color.isRgb(i)||i&&"function"==typeof i.fill)this.attr(t,i);else for(e=d[t].length-1;e>=0;e--)null!=i[d[t][e]]&&this.attr(d.prefix(t,d[t][e]),i[d[t][e]]);return this},f.extend(f.Element,f.FX,i)}),f.extend(f.Element,f.FX,{rotate:function(t,e,i){return this.transform({rotation:t||0,cx:e,cy:i})},skew:function(t,e){return this.transform({skewX:t||0,skewY:e||0})},scale:function(t,e){return this.transform({scaleX:t,scaleY:null==e?t:e})},translate:function(t,e){return this.transform({x:t,y:e})},matrix:function(t){return this.transform({matrix:t})},opacity:function(t){return this.attr("opacity",t)}}),f.extend(f.Rect,f.Ellipse,f.Circle,f.FX,{radius:function(t,e){return this.rx(t).ry(null==e?t:e)}}),f.extend(f.Path,{length:function(){return this.node.getTotalLength()},pointAt:function(t){return this.node.getPointAtLength(t)}}),f.extend(f.Parent,f.Text,f.FX,{font:function(t){for(var e in t)"leading"==e?this.leading(t[e]):"anchor"==e?this.attr("text-anchor",t[e]):"size"==e||"family"==e||"weight"==e||"stretch"==e||"variant"==e||"style"==e?this.attr("font-"+e,t[e]):this.attr(e,t[e]);return this}}),f.Set=f.invent({create:function(t){Array.isArray(t)?this.members=t:this.clear()},extend:{add:function(){var t,e,i=[].slice.call(arguments);for(t=0,e=i.length;e>t;t++)this.members.push(i[t]);return this},remove:function(t){var e=this.index(t);return e>-1&&this.members.splice(e,1),this},each:function(t){for(var e=0,i=this.members.length;i>e;e++)t.apply(this.members[e],[e,this.members]);return this},clear:function(){return this.members=[],this},has:function(t){return this.index(t)>=0},index:function(t){return this.members.indexOf(t)},get:function(t){return this.members[t]},first:function(){return this.get(0)},last:function(){return this.get(this.members.length-1)},valueOf:function(){return this.members},bbox:function(){var t=new f.BBox;if(0==this.members.length)return t;var e=this.members[0].rbox();return t.x=e.x,t.y=e.y,t.width=e.width,t.height=e.height,this.each(function(){t=t.merge(this.rbox())}),t}},construct:{set:function(t){return new f.Set(t)}}}),f.SetFX=f.invent({create:function(t){this.set=t}}),f.Set.inherit=function(){var t,e=[];for(var t in f.Shape.prototype)"function"==typeof f.Shape.prototype[t]&&"function"!=typeof f.Set.prototype[t]&&e.push(t);e.forEach(function(t){f.Set.prototype[t]=function(){for(var e=0,i=this.members.length;i>e;e++)this.members[e]&&"function"==typeof this.members[e][t]&&this.members[e][t].apply(this.members[e],arguments);return"animate"==t?this.fx||(this.fx=new f.SetFX(this)):this}}),e=[];for(var t in f.FX.prototype)"function"==typeof f.FX.prototype[t]&&"function"!=typeof f.SetFX.prototype[t]&&e.push(t);e.forEach(function(t){f.SetFX.prototype[t]=function(){for(var e=0,i=this.set.members.length;i>e;e++)this.set.members[e].fx[t].apply(this.set.members[e].fx,arguments);return this}})},f.extend(f.Element,{data:function(t,e,i){if("object"==typeof t)for(e in t)this.data(e,t[e]);else if(arguments.length<2)try{return JSON.parse(this.attr("data-"+t))}catch(n){return this.attr("data-"+t)}else this.attr("data-"+t,null===e?null:i===!0||"string"==typeof e||"number"==typeof e?e:JSON.stringify(e));return this}}),f.extend(f.Element,{remember:function(t,e){if("object"==typeof arguments[0])for(var e in t)this.remember(e,t[e]);else{if(1==arguments.length)return this.memory()[t];this.memory()[t]=e}return this},forget:function(){if(0==arguments.length)this._memory={};else for(var t=arguments.length-1;t>=0;t--)delete this.memory()[arguments[t]];return this},memory:function(){return this._memory||(this._memory={})}}),f.get=function(t){var e=document.getElementById(l(t)||t);return e?f.adopt(e):void 0},f.select=function(t,e){return new f.Set(f.utils.map((e||document).querySelectorAll(t),function(t){return f.adopt(t)}))},f.extend(f.Parent,{select:function(t){return f.select(t,this.node)}}),"function"==typeof define&&define.amd?define(function(){return f}):"undefined"!=typeof exports&&(exports.SVG=f),window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof c&&(c.prototype=window.Event.prototype,window.CustomEvent=c)}).call(this);
\ No newline at end of file diff --git a/src/bbox.js b/src/bbox.js index c68bec5..1632a02 100755 --- a/src/bbox.js +++ b/src/bbox.js @@ -2,19 +2,19 @@ SVG.BBox = function(element) { var box - /* initialize zero box */ + // Initialize zero box this.x = 0 this.y = 0 this.width = 0 this.height = 0 - /* get values if element is given */ + // Get values if element is given if (element) { try { - /* actual, native bounding box */ + // Actual, native bounding box box = element.node.getBBox() } catch(e) { - /* fallback for some browsers */ + // Fallback for some browsers box = { x: element.node.clientLeft , y: element.node.clientTop @@ -23,16 +23,16 @@ SVG.BBox = function(element) { } } - /* include translations on x an y */ + // Include translations on x an y this.x = box.x + element.trans.x this.y = box.y + element.trans.y - /* plain width and height */ + // Plain width and height this.width = box.width * element.trans.scaleX this.height = box.height * element.trans.scaleY } - /* add center, right and bottom */ + // Add center, right and bottom boxProperties(this) } @@ -41,18 +41,15 @@ SVG.BBox = function(element) { SVG.extend(SVG.BBox, { // merge bounding box with another, return a new instance merge: function(box) { - var b = new SVG.BBox() + var b = new SVG.BBox - /* merge box */ + // Merge box b.x = Math.min(this.x, box.x) b.y = Math.min(this.y, box.y) b.width = Math.max(this.x + this.width, box.x + box.width) - b.x b.height = Math.max(this.y + this.height, box.y + box.height) - b.y - /* add center, right and bottom */ - boxProperties(b) - - return b + return boxProperties(b) } })
\ No newline at end of file diff --git a/src/default.js b/src/default.js index b9819a7..0c9ba33 100755 --- a/src/default.js +++ b/src/default.js @@ -1,10 +1,7 @@ SVG.defaults = { - // Default matrix - matrix: '1 0 0 1 0 0' - // Default attribute values -, attrs: { + attrs: { /* fill and stroke */ 'fill-opacity': 1 , 'stroke-opacity': 1 @@ -35,30 +32,28 @@ SVG.defaults = { , 'font-family': 'Helvetica, Arial, sans-serif' , 'text-anchor': 'start' } - - // Default transformation values -, trans: function() { - return { - /* translate */ - x: 0 - , y: 0 - /* scale */ - , scaleX: 1 - , scaleY: 1 - /* rotate */ - , rotation: 0 - /* skew */ - , skewX: 0 - , skewY: 0 - /* matrix */ - , matrix: this.matrix - , a: 1 - , b: 0 - , c: 0 - , d: 1 - , e: 0 - , f: 0 - } + + // Transforms +, trans: { + /* translate */ + x: 0 + , y: 0 + /* scale */ + , scaleX: 1 + , scaleY: 1 + /* rotate */ + , rotation: 0 + /* skew */ + , skewX: 0 + , skewY: 0 + /* matrix */ + , matrix: this.matrix + , a: 1 + , b: 0 + , c: 0 + , d: 1 + , e: 0 + , f: 0 } }
\ No newline at end of file diff --git a/src/element.js b/src/element.js index 069c487..3d7de12 100755 --- a/src/element.js +++ b/src/element.js @@ -2,16 +2,16 @@ SVG.Element = SVG.invent({ // Initialize node create: function(node) { - /* make stroke value accessible dynamically */ + // Make stroke value accessible dynamically this._stroke = SVG.defaults.attrs.stroke - /* initialize transformation store with defaults */ - this.trans = SVG.defaults.trans() - - /* create circular reference */ + // Create circular reference if (this.node = node) { this.type = node.nodeName this.node.instance = this + + // Store current attribute value + this._stroke = node.getAttribute('stroke') || this._stroke } } @@ -122,10 +122,6 @@ SVG.Element = SVG.invent({ SVG.regex.isNumber.test(v) ? parseFloat(v) : v - } else if (a == 'style') { - // Redirect to the style method - return this.style(v) - } else { // BUG FIX: some browsers will render a stroke if a color is given even though stroke width is 0 if (a == 'stroke-width') @@ -176,76 +172,12 @@ SVG.Element = SVG.invent({ return this } // Manage transformations - , transform: function(o, v) { - - if (arguments.length == 0) { - /* act as a getter if no argument is given */ - return this.trans - - } else if (typeof o === 'string') { - /* act as a getter if only one string argument is given */ - if (arguments.length < 2) - return this.trans[o] + , transform: function(t, v) { + // Get a transformation at a given position + if (typeof t === 'number') { - /* apply transformations as object if key value arguments are given*/ - var transform = {} - transform[o] = v - - return this.transform(transform) } - - /* ... otherwise continue as a setter */ - var transform = [] - - /* parse matrix */ - o = parseMatrix(o) - - /* merge values */ - for (v in o) - if (o[v] != null) - this.trans[v] = o[v] - - /* compile matrix */ - this.trans.matrix = this.trans.a - + ' ' + this.trans.b - + ' ' + this.trans.c - + ' ' + this.trans.d - + ' ' + this.trans.e - + ' ' + this.trans.f - - /* alias current transformations */ - o = this.trans - - /* add matrix */ - if (o.matrix != SVG.defaults.matrix) - transform.push('matrix(' + o.matrix + ')') - - /* add rotation */ - if (o.rotation != 0) - transform.push('rotate(' + o.rotation + ' ' + (o.cx == null ? this.bbox().cx : o.cx) + ' ' + (o.cy == null ? this.bbox().cy : o.cy) + ')') - - /* add scale */ - if (o.scaleX != 1 || o.scaleY != 1) - transform.push('scale(' + o.scaleX + ' ' + o.scaleY + ')') - - /* add skew on x axis */ - if (o.skewX != 0) - transform.push('skewX(' + o.skewX + ')') - - /* add skew on y axis */ - if (o.skewY != 0) - transform.push('skewY(' + o.skewY + ')') - - /* add translation */ - if (o.x != 0 || o.y != 0) - transform.push('translate(' + new SVG.Number(o.x / o.scaleX) + ' ' + new SVG.Number(o.y / o.scaleY) + ')') - - /* update transformations, even if there are none */ - if (transform.length == 0) - this.node.removeAttribute('transform') - else - this.node.setAttribute('transform', transform.join(' ')) - + return this } // Dynamic style generator diff --git a/src/helpers.js b/src/helpers.js index ad73fde..9411e5e 100644 --- a/src/helpers.js +++ b/src/helpers.js @@ -93,15 +93,12 @@ function arrayToString(a) { // Deep new id assignment function assignNewId(node) { - // Adopt element and assign new id - var element = SVG.adopt(node).id(SVG.eid(node.nodeName)) - // Do the same for SVG child nodes as well for (var i = node.childNodes.length - 1; i >= 0; i--) if (node.childNodes[i] instanceof SVGElement) assignNewId(node.childNodes[i]) - return element + return SVG.adopt(node).id(SVG.eid(node.nodeName)) } // Add more bounding box properties @@ -110,6 +107,8 @@ function boxProperties(b) { b.y2 = b.y + b.height b.cx = b.x + b.width / 2 b.cy = b.y + b.height / 2 + + return b } // Parse a matrix string diff --git a/src/line.js b/src/line.js index c11a734..d76f891 100755 --- a/src/line.js +++ b/src/line.js @@ -7,60 +7,31 @@ SVG.Line = SVG.invent({ // Add class methods , extend: { - // Move over x-axis - x: function(x) { - var b = this.bbox() - - return x == null ? b.x : this.attr({ - x1: this.attr('x1') - b.x + x - , x2: this.attr('x2') - b.x + x - }) - } - // Move over y-axis - , y: function(y) { - var b = this.bbox() - - return y == null ? b.y : this.attr({ - y1: this.attr('y1') - b.y + y - , y2: this.attr('y2') - b.y + y - }) - } - // Move by center over x-axis - , cx: function(x) { - var half = this.bbox().width / 2 - return x == null ? this.x() + half : this.x(x - half) - } - // Move by center over y-axis - , cy: function(y) { - var half = this.bbox().height / 2 - return y == null ? this.y() + half : this.y(y - half) - } - // Set width of element - , width: function(width) { - var b = this.bbox() + // Get array + array: function() { + return (this._array = new SVG.PointArray([ + [ this.attr('x1'), this.attr('y1') ] + , [ this.attr('x2'), this.attr('y2') ] + ])) + } + // Overwrite native plot() method + , plot: function(x1, y1, x2, y2) { + if (typeof x1 === 'number') + x1 = { x1: x1, y1: y1, x2: x2, y2: y2 } + else + x1 = (this._array = new SVG.PointArray(x1)).toLine() - return width == null ? b.width : this.attr(this.attr('x1') < this.attr('x2') ? 'x2' : 'x1', b.x + width) + return this.attr(x1) } - // Set height of element - , height: function(height) { - var b = this.bbox() - - return height == null ? b.height : this.attr(this.attr('y1') < this.attr('y2') ? 'y2' : 'y1', b.y + height) + // Move by left top corner + , move: function(x, y) { + return this.attr(this.array().move(x, y).toLine()) } - // Set line size by width and height + // Set element size to given width and height , size: function(width, height) { var p = proportionalSize(this.bbox(), width, height) - return this.width(p.width).height(p.height) - } - // Set path data - , plot: function(x1, y1, x2, y2) { - return this.attr({ - x1: x1 - , y1: y1 - , x2: x2 - , y2: y2 - }) + return this.attr(this.array().size(p.width, p.height).toLine()) } } @@ -68,7 +39,7 @@ SVG.Line = SVG.invent({ , construct: { // Create a line element line: function(x1, y1, x2, y2) { - return this.put(new SVG.Line().plot(x1, y1, x2, y2)) + return this.put(new SVG.Line).plot(x1, y1, x2, y2) } } }) diff --git a/src/matrix.js b/src/matrix.js new file mode 100644 index 0000000..2202011 --- /dev/null +++ b/src/matrix.js @@ -0,0 +1,3 @@ +SVG.Matrix = function() { + +}
\ No newline at end of file diff --git a/src/pointarray.js b/src/pointarray.js index 67b6ad4..f43234c 100755 --- a/src/pointarray.js +++ b/src/pointarray.js @@ -15,6 +15,15 @@ SVG.extend(SVG.PointArray, { return array.join(' ') } + // Convert array to line object +, toLine: function() { + return { + x1: this.value[0][0] + , y1: this.value[0][1] + , x2: this.value[1][0] + , y2: this.value[1][1] + } + } // Get morphed array at given position , at: function(pos) { /* make sure a destination is defined */ diff --git a/src/pointed.js b/src/pointed.js new file mode 100644 index 0000000..02ff44e --- /dev/null +++ b/src/pointed.js @@ -0,0 +1,25 @@ +// unify all point to point elements +SVG.extend(SVG.Line, SVG.Polyline, SVG.Polygon, { + // Define morphable array + morphArray: SVG.PointArray + // Move by left top corner over x-axis +, x: function(x) { + return x == null ? this.bbox().x : this.move(x, this.bbox().y) + } + // Move by left top corner over y-axis +, y: function(y) { + return y == null ? this.bbox().y : this.move(this.bbox().x, y) + } + // Set width of element +, width: function(width) { + var b = this.bbox() + + return width == null ? b.width : this.size(width, b.height) + } + // Set height of element +, height: function(height) { + var b = this.bbox() + + return height == null ? b.height : this.size(b.width, height) + } +})
\ No newline at end of file diff --git a/src/poly.js b/src/poly.js index 2bf0b57..0f3b1e6 100755 --- a/src/poly.js +++ b/src/poly.js @@ -32,10 +32,8 @@ SVG.Polygon = SVG.invent({ // Add polygon-specific functions SVG.extend(SVG.Polyline, SVG.Polygon, { - // Define morphable array - morphArray: SVG.PointArray // Get array -, array: function() { + array: function() { return this._array || (this._array = new SVG.PointArray(this.attr('points'))) } // Plot new path @@ -46,26 +44,6 @@ SVG.extend(SVG.Polyline, SVG.Polygon, { , move: function(x, y) { return this.attr('points', this.array().move(x, y)) } - // Move by left top corner over x-axis -, x: function(x) { - return x == null ? this.bbox().x : this.move(x, this.bbox().y) - } - // Move by left top corner over y-axis -, y: function(y) { - return y == null ? this.bbox().y : this.move(this.bbox().x, y) - } - // Set width of element -, width: function(width) { - var b = this.bbox() - - return width == null ? b.width : this.size(width, b.height) - } - // Set height of element -, height: function(height) { - var b = this.bbox() - - return height == null ? b.height : this.size(b.width, height) - } // Set element size to given width and height , size: function(width, height) { var p = proportionalSize(this.bbox(), width, height) diff --git a/src/rbox.js b/src/rbox.js index fe6a9fa..6ede8ae 100755 --- a/src/rbox.js +++ b/src/rbox.js @@ -47,8 +47,8 @@ SVG.RBox = function(element) { this.height = box.height /= zoom /* offset by window scroll position, because getBoundingClientRect changes when window is scrolled */ - this.x += window.scrollX; - this.y += window.scrollY; + this.x += window.scrollX + this.y += window.scrollY /* add center, right and bottom */ boxProperties(this) @@ -66,11 +66,8 @@ SVG.extend(SVG.RBox, { b.y = Math.min(this.y, box.y) b.width = Math.max(this.x + this.width, box.x + box.width) - b.x b.height = Math.max(this.y + this.height, box.y + box.height) - b.y - - /* add center, right and bottom */ - boxProperties(b) - - return b + + return boxProperties(b) } }) |