diff options
| -rw-r--r-- | README.md | 15 | ||||
| -rw-r--r-- | Rakefile | 2 | ||||
| -rw-r--r-- | dist/svg.js | 230 | ||||
| -rw-r--r-- | dist/svg.min.js | 2 | ||||
| -rw-r--r-- | spec/spec/color.js | 4 | ||||
| -rw-r--r-- | spec/spec/container.js | 17 | ||||
| -rw-r--r-- | spec/spec/gradient.js | 4 | ||||
| -rw-r--r-- | src/clip.js | 10 | ||||
| -rw-r--r-- | src/container.js | 79 | ||||
| -rw-r--r-- | src/element.js | 6 | ||||
| -rw-r--r-- | src/ellipse.js | 13 | ||||
| -rw-r--r-- | src/gradient.js | 9 | ||||
| -rw-r--r-- | src/group.js | 10 | ||||
| -rw-r--r-- | src/image.js | 11 | ||||
| -rw-r--r-- | src/line.js | 9 | ||||
| -rw-r--r-- | src/mask.js | 10 | ||||
| -rw-r--r-- | src/nested.js | 11 | ||||
| -rw-r--r-- | src/path.js | 9 | ||||
| -rw-r--r-- | src/pattern.js | 16 | ||||
| -rw-r--r-- | src/poly.js | 14 | ||||
| -rw-r--r-- | src/rect.js | 11 | ||||
| -rw-r--r-- | src/set.js | 37 | ||||
| -rw-r--r-- | src/text.js | 10 | ||||
| -rw-r--r-- | src/viewbox.js | 4 |
24 files changed, 383 insertions, 160 deletions
@@ -504,6 +504,15 @@ draw.each(function(i, children) { }) ``` +Deep traversing is also possible by passing true as the second argument: + +```javascript +// draw.each(block, deep) +draw.each(function(i, children) { + this.fill({ color: '#f06' }) +}, true) +``` + ## Colors Svg.js has a dedicated color module handling different types of colors. Accepted values are: @@ -752,7 +761,7 @@ var gradient = draw.gradient('linear', function(stop) { stop.at({ offset: 100, color: '#fff' }) }) -var ellipse = draw.ellipse(80, 40).move(10, 10).fill({ color: gradient.fill() }) +var ellipse = draw.ellipse(80, 40).move(10, 10).fill({ color: gradient }) rect.maskWith(ellipse) ``` @@ -873,7 +882,7 @@ The from and to values are also expressed in percent. Finally, to use the gradient on an element: ```javascript -rect.attr({ fill: gradient.fill() }) +rect.attr({ fill: gradient }) ``` Radial gradients have a `radius()` method to define the outermost radius to where the inner color should develop: @@ -928,7 +937,7 @@ var pattern = draw.pattern(20, 20, function(add) { add.rect(10, 10).move(0, 10).fill({ color: '#000', opacity: 0.5 }) }) -var circle = draw.circle(200, 200).fill(pattern.fill()) +var circle = draw.circle(200, 200).fill(pattern) ``` This will fill the circle with a checkered pattern. There is a lot more to patterns. Please refer to the [Patterns section](http://www.w3.org/TR/SVG/pservers.html#Patterns) of the SVG specification. @@ -1,4 +1,4 @@ -SVGJS_VERSION = '0.17' +SVGJS_VERSION = '0.18' # all available modules in the correct loading order MODULES = %w[ svg regex default color viewbox bbox rbox element container fx event group arrange defs mask clip pattern gradient doc shape rect ellipse line poly path plotable image text nested sugar ] diff --git a/dist/svg.js b/dist/svg.js index 48f8f87..fa929a3 100644 --- a/dist/svg.js +++ b/dist/svg.js @@ -1,4 +1,4 @@ -/* svg.js v0.17 - svg regex default color viewbox bbox rbox element container fx event group arrange defs mask clip pattern gradient doc shape rect ellipse line poly path plotable image text nested sugar - svgjs.com/license */ +/* svg.js v0.18 - svg regex default color viewbox bbox rbox element container fx event group arrange defs mask clip pattern gradient doc shape rect ellipse line poly path plotable image text nested sugar - svgjs.com/license */ ;(function() { this.SVG = function(element) { @@ -281,6 +281,7 @@ } + // SVG.extend(SVG.ViewBox, { // Parse viewbox to string toString: function() { @@ -288,6 +289,8 @@ } }) + + SVG.BBox = function(element) { var box @@ -542,6 +545,10 @@ return this.style(v) } else { + /* process gradient or pattern fill */ + if (typeof v.fill === 'function') + v = v.fill() + /* treat x differently on text elements */ if (a == 'x' && Array.isArray(this.lines)) for (n = this.lines.length - 1; n >= 0; n--) @@ -556,7 +563,7 @@ /* ensure hex color */ if (SVG.Color.test(v) || SVG.Color.isRgb(v)) v = new SVG.Color(v).toHex() - + /* set give attribute on node */ n != null ? this.node.setAttributeNS(n, a, v) : @@ -833,13 +840,17 @@ return this.children().indexOf(element) >= 0 } // Iterates over all children and invokes a given block - , each: function(block) { - var index, - children = this.children() - - for (index = 0, length = children.length; index < length; index++) - if (children[index] instanceof SVG.Shape) - block.apply(children[index], [index, children]) + , each: function(block, deep) { + var i, il + , children = this.children() + + for (i = 0, il = children.length; i < il; i++) { + if (children[i] instanceof SVG.Shape) + block.apply(children[i], [i, children]) + + if (deep && (children[i] instanceof SVG.Container)) + children[i].each(block, deep) + } return this } @@ -861,67 +872,6 @@ , level: function() { return this.removeElement(this.defs()).put(this.defs(), 0) } - // Create a group element - , group: function() { - return this.put(new SVG.G) - } - // Create a rect element - , rect: function(width, height) { - return this.put(new SVG.Rect().size(width, height)) - } - // Create circle element, based on ellipse - , circle: function(size) { - return this.ellipse(size, size) - } - // Create an ellipse - , ellipse: function(width, height) { - return this.put(new SVG.Ellipse().size(width, height).move(0, 0)) - } - // Create a line element - , line: function(x1, y1, x2, y2) { - return this.put(new SVG.Line().plot(x1, y1, x2, y2)) - } - // Create a wrapped polyline element - , polyline: function(points, unbiased) { - return this.put(new SVG.Polyline(unbiased)).plot(points) - } - // Create a wrapped polygon element - , polygon: function(points, unbiased) { - return this.put(new SVG.Polygon(unbiased)).plot(points) - } - // Create a wrapped path element - , path: function(data, unbiased) { - return this.put(new SVG.Path(unbiased)).plot(data) - } - // Create image element, load image and set its size - , image: function(source, width, height) { - width = width != null ? width : 100 - return this.put(new SVG.Image().load(source).size(width, height != null ? height : width)) - } - // Create text element - , text: function(text) { - return this.put(new SVG.Text().text(text)) - } - // Create nested svg document - , nested: function() { - return this.put(new SVG.Nested) - } - // Create gradient element in defs - , gradient: function(type, block) { - return this.defs().gradient(type, block) - } - // Create pattern element in defs - , pattern: function(width, height, block) { - return this.defs().pattern(width, height, block) - } - // Create masking element - , mask: function() { - return this.defs().put(new SVG.Mask) - } - // Create clipping element - , clip: function() { - return this.defs().put(new SVG.Clip) - } // Get first child, skipping the defs node , first: function() { return this.children()[0] instanceof SVG.Defs ? this.children()[1] : this.children()[0] @@ -1374,6 +1324,7 @@ // Inherit from SVG.Container SVG.G.prototype = new SVG.Container + // SVG.extend(SVG.G, { // Move over x-axis x: function(x) { @@ -1389,6 +1340,15 @@ } }) + + // + SVG.extend(SVG.Container, { + // Create a group element + group: function() { + return this.put(new SVG.G) + } + + }) SVG.extend(SVG.Element, { // Get all siblings, including myself @@ -1452,6 +1412,7 @@ // Inherit from SVG.Container SVG.Mask.prototype = new SVG.Container + // SVG.extend(SVG.Element, { // Distribute mask to svg element maskWith: function(element) { @@ -1462,6 +1423,15 @@ } }) + + // + SVG.extend(SVG.Container, { + // Create masking element + mask: function() { + return this.defs().put(new SVG.Mask) + } + + }) SVG.Clip = function() { this.constructor.call(this, SVG.create('clipPath')) @@ -1470,6 +1440,7 @@ // Inherit from SVG.Container SVG.Clip.prototype = new SVG.Container + // SVG.extend(SVG.Element, { // Distribute clipPath to svg element clipWith: function(element) { @@ -1480,6 +1451,15 @@ } }) + + // + SVG.extend(SVG.Container, { + // Create clipping element + clip: function() { + return this.defs().put(new SVG.Clip) + } + + }) SVG.Pattern = function(type) { this.constructor.call(this, SVG.create('pattern')) @@ -1499,10 +1479,9 @@ // SVG.extend(SVG.Defs, { - - /* define gradient */ + // Define gradient pattern: function(width, height, block) { - var element = this.put(new SVG.Pattern()) + var element = this.put(new SVG.Pattern) /* invoke passed block */ block(element) @@ -1516,7 +1495,16 @@ }) } - }); + }) + + // + SVG.extend(SVG.Container, { + // Create pattern element in defs + pattern: function(width, height, block) { + return this.defs().pattern(width, height, block) + } + + }) SVG.Gradient = function(type) { this.constructor.call(this, SVG.create(type + 'Gradient')) @@ -1584,6 +1572,15 @@ }) + // + SVG.extend(SVG.Container, { + // Create gradient element in defs + gradient: function(type, block) { + return this.defs().gradient(type, block) + } + + }) + SVG.Stop = function(stop) { this.constructor.call(this, SVG.create('stop')) @@ -1716,6 +1713,15 @@ // Inherit from SVG.Shape SVG.Rect.prototype = new SVG.Shape + + // + SVG.extend(SVG.Container, { + // Create a rect element + rect: function(width, height) { + return this.put(new SVG.Rect().size(width, height)) + } + + }) SVG.Ellipse = function() { this.constructor.call(this, SVG.create('ellipse')) @@ -1752,6 +1758,19 @@ }) + // + SVG.extend(SVG.Container, { + // Create circle element, based on ellipse + circle: function(size) { + return this.ellipse(size, size) + } + // Create an ellipse + , ellipse: function(width, height) { + return this.put(new SVG.Ellipse().size(width, height).move(0, 0)) + } + + }) + // Usage: // draw.ellipse(200, 100) @@ -1812,6 +1831,15 @@ } }) + + // + SVG.extend(SVG.Container, { + // Create a line element + line: function(x1, y1, x2, y2) { + return this.put(new SVG.Line().plot(x1, y1, x2, y2)) + } + + }) SVG.Polyline = function(unbiased) { @@ -1848,8 +1876,19 @@ return this.attr('points', p || '0,0') } - }) - + }) + + // + SVG.extend(SVG.Container, { + // Create a wrapped polyline element + polyline: function(points, unbiased) { + return this.put(new SVG.Polyline(unbiased)).plot(points) + } + // Create a wrapped polygon element + , polygon: function(points, unbiased) { + return this.put(new SVG.Polygon(unbiased)).plot(points) + } + }) SVG.Path = function(unbiased) { this.constructor.call(this, SVG.create('path')) @@ -1867,6 +1906,15 @@ } }) + + // + SVG.extend(SVG.Container, { + // Create a wrapped path element + path: function(data, unbiased) { + return this.put(new SVG.Path(unbiased)).plot(data) + } + + }) SVG.extend(SVG.Polyline, SVG.Polygon, SVG.Path, { // Move over x-axis @@ -1917,6 +1965,7 @@ // Inherit from SVG.Element SVG.Image.prototype = new SVG.Shape + // SVG.extend(SVG.Image, { // (re)load image @@ -1925,6 +1974,16 @@ } }) + + // + SVG.extend(SVG.Container, { + // Create image element, load image and set its size + image: function(source, width, height) { + width = width != null ? width : 100 + return this.put(new SVG.Image().load(source).size(width, height != null ? height : width)) + } + + }) var _styleAttr = ('size family weight stretch variant style').split(' ') @@ -1945,6 +2004,7 @@ // Inherit from SVG.Element SVG.Text.prototype = new SVG.Shape + // SVG.extend(SVG.Text, { // Move over x-axis x: function(x, a) { @@ -2049,6 +2109,15 @@ }) + // + SVG.extend(SVG.Container, { + // Create text element + text: function(text) { + return this.put(new SVG.Text().text(text)) + } + + }) + // tspan class SVG.TSpan = function() { this.constructor.call(this, SVG.create('tspan')) @@ -2076,6 +2145,15 @@ // Inherit from SVG.Container SVG.Nested.prototype = new SVG.Container + + // + SVG.extend(SVG.Container, { + // Create nested svg document + nested: function() { + return this.put(new SVG.Nested) + } + + }) SVG._stroke = ['color', 'width', 'opacity', 'linecap', 'linejoin', 'miterlimit', 'dasharray', 'dashoffset'] SVG._fill = ['color', 'opacity', 'rule'] diff --git a/dist/svg.min.js b/dist/svg.min.js index 4a284a2..1666cca 100644 --- a/dist/svg.min.js +++ b/dist/svg.min.js @@ -1 +1 @@ -(function(){if(this.SVG=function(t){return SVG.supported?new SVG.Doc(t):void 0},this.svg=function(t){return console.warn("WARNING: svg() is deprecated, please use SVG() instead."),SVG(t)},SVG.ns="http://www.w3.org/2000/svg",SVG.xlink="http://www.w3.org/1999/xlink",SVG.did=1e3,SVG.eid=function(t){return"Svgjs"+t.charAt(0).toUpperCase()+t.slice(1)+SVG.did++},SVG.create=function(t){var e=document.createElementNS(this.ns,t);return e.setAttribute("id",this.eid(t)),e},SVG.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]},SVG.get=function(t){var e=document.getElementById(t);return e?e.instance:void 0},SVG.supported=function(){return!!document.createElementNS&&!!document.createElementNS(SVG.ns,"svg").createSVGRect}(),!SVG.supported)return!1;SVG.regex={test:function(t,e){return this[e].test(t)},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+)\)/,isHex:/^#[a-f0-9]{3,6}$/i,isRgb:/^rgb\(/,isCss:/[^:]+:[^;]+;?/,isStyle:/^font|text|leading|cursor/,isBlank:/^(\s+)?$/,isNumber:/^-?[\d\.]+$/},SVG.defaults={matrix:"1,0,0,1,0,0",attrs:{"fill-opacity":1,"stroke-opacity":1,"stroke-width":0,fill:"#000",stroke:"#000",opacity:1,x:0,y:0,cx:0,cy:0,width:0,height:0,r:0,rx:0,ry:0,offset:0},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}}},SVG.Color=function(t){var e;this.r=0,this.g=0,this.b=0,"string"==typeof t?SVG.regex.isRgb.test(t)?(e=SVG.regex.rgb.exec(t.replace(/\s/g,"")),this.r=parseInt(e[1]),this.g=parseInt(e[2]),this.b=parseInt(e[3])):SVG.regex.isHex.test(t)&&(e=SVG.regex.hex.exec(this._fullHex(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)},SVG.extend(SVG.Color,{toString:function(){return this.toHex()},toHex:function(){return"#"+this._compToHex(this.r)+this._compToHex(this.g)+this._compToHex(this.b)},toRgb:function(){return"rgb("+[this.r,this.g,this.b].join()+")"},brightness:function(){return.3*(this.r/255)+.59*(this.g/255)+.11*(this.b/255)},_fullHex:function(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},_compToHex:function(t){var e=t.toString(16);return 1==e.length?"0"+e:e}}),SVG.Color.test=function(t){return t+="",SVG.regex.isHex.test(t)||SVG.regex.isRgb.test(t)},SVG.Color.isRgb=function(t){return t&&"number"==typeof t.r},SVG.ViewBox=function(t){var e,i,n,s,r=t.bbox(),o=(t.attr("viewBox")||"").match(/-?[\d\.]+/g);this.x=r.x,this.y=r.y,this.width=t.node.offsetWidth||t.attr("width"),this.height=t.node.offsetHeight||t.attr("height"),o&&(e=parseFloat(o[0]),i=parseFloat(o[1]),n=parseFloat(o[2]),s=parseFloat(o[3]),this.zoom=this.width/this.height>n/s?this.height/s:this.width/n,this.x=e,this.y=i,this.width=n,this.height=s),this.zoom=this.zoom||1},SVG.extend(SVG.ViewBox,{toString:function(){return this.x+" "+this.y+" "+this.width+" "+this.height}}),SVG.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}this.cx=this.x+this.width/2,this.cy=this.y+this.height/2},SVG.extend(SVG.BBox,{merge:function(t){var e=new SVG.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,e.cx=e.x+e.width/2,e.cy=e.y+e.height/2,e}}),SVG.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=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.cx=this.x+this.width/2,this.cy=this.y+this.height/2},SVG.Element=function(t){this._stroke=SVG.defaults.attrs.stroke,this.styles={},this.trans=SVG.defaults.trans(),(this.node=t)&&(this.type=t.nodeName,this.node.instance=this)},SVG.extend(SVG.Element,{x:function(t){return t&&(t/=this.trans.scaleX),this.attr("x",t)},y:function(t){return t&&(t/=this.trans.scaleY),this.attr("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)},move:function(t,e){return this.x(t).y(e)},center:function(t,e){return this.cx(t).cy(e)},size:function(t,e){return this.attr({width:t,height:e})},clone:function(){var t,e,i=this.type;return t="rect"==i||"ellipse"==i?this.parent[i](0,0):"line"==i?this.parent[i](0,0,0,0):"image"==i?this.parent[i](this.src):"text"==i?this.parent[i](this.content):"path"==i?this.parent[i](this.attr("d")):"polyline"==i||"polygon"==i?this.parent[i](this.attr("points")):"g"==i?this.parent.group():this.parent[i](),e=this.attr(),delete e.id,t.attr(e),t.trans=this.trans,t.transform({})},remove:function(){return this.parent&&this.parent.removeElement(this),this},doc:function(t){return this._parent(t||SVG.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]=SVG.regex.test(e[i].nodeValue,"isNumber")?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 this._isStyle(t)?"text"==t?this.content:"leading"==t&&this.leading?this.leading():this.style(t):(e=this.node.getAttribute(t),null==e?SVG.defaults.attrs[t]:SVG.regex.test(e,"isNumber")?parseFloat(e):e);if("style"==t)return this.style(e);if("x"==t&&Array.isArray(this.lines))for(i=this.lines.length-1;i>=0;i--)this.lines[i].attr(t,e);"stroke-width"==t?this.attr("stroke",parseFloat(e)>0?this._stroke:null):"stroke"==t&&(this._stroke=e),(SVG.Color.test(e)||SVG.Color.isRgb(e))&&(e=new SVG.Color(e).toHex()),null!=i?this.node.setAttributeNS(i,t,e):this.node.setAttribute(t,e),this._isStyle(t)&&("text"==t?this.text(e):"leading"==t&&this.leading?this.leading(e):this.style(t,e),this.rebuild&&this.rebuild(t,e))}return this},transform:function(t,e){if(0==arguments.length)return this.trans;if("string"==typeof t){if(2>arguments.length)return this.trans[t];var i={};return i[t]=e,this.transform(i)}var i=[];t=this._parseMatrix(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!=SVG.defaults.matrix&&i.push("matrix("+t.matrix+")"),0!=t.rotation&&i.push("rotate("+t.rotation+","+(t.cx||this.bbox().cx)+","+(t.cy||this.bbox().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("+t.x/t.scaleX+","+t.y/t.scaleY+")"),this._offset&&i.push("translate("+-this._offset.x+","+-this._offset.y+")"),0==i.length?this.node.removeAttribute("transform"):this.node.setAttribute("transform",i.join(" ")),this},style:function(t,e){if(0==arguments.length)return this.attr("style")||"";if(2>arguments.length)if("object"==typeof t)for(e in t)this.style(e,t[e]);else{if(!SVG.regex.isCss.test(t))return this.styles[t];t=t.split(";");for(var i=0;t.length>i;i++)e=t[i].split(":"),2==e.length&&this.style(e[0].replace(/\s+/g,""),e[1].replace(/^\s+/,"").replace(/\s+$/,""))}else null===e||SVG.regex.test(e,"isBlank")?delete this.styles[t]:this.styles[t]=e;t="";for(e in this.styles)t+=e+":"+this.styles[e]+";";return""==t?this.node.removeAttribute("style"):this.node.setAttribute("style",t),this},data:function(t,e,i){if(2>arguments.length)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},bbox:function(){return new SVG.BBox(this)},rbox:function(){return new SVG.RBox(this)},inside:function(t,e){var i=this.bbox();return t>i.x&&e>i.y&&i.x+i.width>t&&i.y+i.height>e},show:function(){return this.style("display","")},hide:function(){return this.style("display","none")},visible:function(){return"none"!=this.style("display")},_parent:function(t){for(var e=this;null!=e&&!(e instanceof t);)e=e.parent;return e},_isStyle:function(t){return"string"==typeof t?SVG.regex.test(t,"isStyle"):!1},_parseMatrix:function(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}}),SVG.Container=function(t){this.constructor.call(this,t)},SVG.Container.prototype=new SVG.Element,SVG.extend(SVG.Container,{children:function(){return this._children||(this._children=[])},add:function(t,e){if(!this.has(t)){if(e=null==e?this.children().length:e,t.parent){var i=t.parent.children().indexOf(t);t.parent.children().splice(i,1)}this.children().splice(e,0,t),this.node.insertBefore(t.node,this.node.childNodes[e]||null),t.parent=this}return this},put:function(t,e){return this.add(t,e),t},has:function(t){return this.children().indexOf(t)>=0},each:function(t){var e,i=this.children();for(e=0,length=i.length;length>e;e++)i[e]instanceof SVG.Shape&&t.apply(i[e],[e,i]);return this},removeElement:function(t){var e=this.children().indexOf(t);return this.children().splice(e,1),this.node.removeChild(t.node),t.parent=null,this},defs:function(){return this._defs||(this._defs=this.put(new SVG.Defs,0))},level:function(){return this.removeElement(this.defs()).put(this.defs(),0)},group:function(){return this.put(new SVG.G)},rect:function(t,e){return this.put((new SVG.Rect).size(t,e))},circle:function(t){return this.ellipse(t,t)},ellipse:function(t,e){return this.put((new SVG.Ellipse).size(t,e).move(0,0))},line:function(t,e,i,n){return this.put((new SVG.Line).plot(t,e,i,n))},polyline:function(t,e){return this.put(new SVG.Polyline(e)).plot(t)},polygon:function(t,e){return this.put(new SVG.Polygon(e)).plot(t)},path:function(t,e){return this.put(new SVG.Path(e)).plot(t)},image:function(t,e,i){return e=null!=e?e:100,this.put((new SVG.Image).load(t).size(e,null!=i?i:e))},text:function(t){return this.put((new SVG.Text).text(t))},nested:function(){return this.put(new SVG.Nested)},gradient:function(t,e){return this.defs().gradient(t,e)},pattern:function(t,e,i){return this.defs().pattern(t,e,i)},mask:function(){return this.defs().put(new SVG.Mask)},clip:function(){return this.defs().put(new SVG.Clip)},first:function(){return this.children()[0]instanceof SVG.Defs?this.children()[1]:this.children()[0]},last:function(){return this.children()[this.children().length-1]},viewbox:function(t){return 0==arguments.length?new SVG.ViewBox(this):(t=1==arguments.length?[t.x,t.y,t.width,t.height]:[].slice.call(arguments),this.attr("viewBox",t.join(" ")))},clear:function(){for(var t=this.children().length-1;t>=0;t--)this.removeElement(this.children()[t]);return this._defs&&(this._defs.remove(),delete this._defs),this}}),SVG.FX=function(t){this.target=t},SVG.extend(SVG.FX,{animate:function(t,e,i){var n=this;return"object"==typeof t&&(i=t.delay,e=t.ease,t=t.duration),this.timeout=setTimeout(function(){t=null==t?1e3:t,e=e||"<>";var i,s,r,o=1e3/60,h=n.target,a=(new Date).getTime(),u=a+t;n.interval=setInterval(function(){var o,l,c=(new Date).getTime(),f=c>u?1:(c-a)/t;if(null==i){i=[];for(l in n.attrs)i.push(l)}if(null==s){s=[];for(l in n.trans)s.push(l)}if(null==r){r=[];for(l in n.styles)r.push(l)}for(f="<>"==e?-Math.cos(f*Math.PI)/2+.5:">"==e?Math.sin(f*Math.PI/2):"<"==e?-Math.cos(f*Math.PI/2)+1:"-"==e?f:"function"==typeof e?e(f):f,n._x?h.x(n._at(n._x,f)):n._cx&&h.cx(n._at(n._cx,f)),n._y?h.y(n._at(n._y,f)):n._cy&&h.cy(n._at(n._cy,f)),n._size&&h.size(n._at(n._size.width,f),n._at(n._size.height,f)),n._viewbox&&h.viewbox(n._at(n._viewbox.x,f),n._at(n._viewbox.y,f),n._at(n._viewbox.width,f),n._at(n._viewbox.height,f)),o=i.length-1;o>=0;o--)h.attr(i[o],n._at(n.attrs[i[o]],f));for(o=s.length-1;o>=0;o--)h.transform(s[o],n._at(n.trans[s[o]],f));for(o=r.length-1;o>=0;o--)h.style(r[o],n._at(n.styles[r[o]],f));n._during&&n._during.call(h,f,function(t,e){return n._at({from:t,to:e},f)}),c>u&&(clearInterval(n.interval),n._after?n._after.apply(h,[n]):n.stop())},t>o?o:t)},i||0),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 this.attrs[t]={from:this.target.attr(t),to:e};return this},transform:function(t,e){if(1==arguments.length){t=this.target._parseMatrix(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={from:this.target.x(),to:t},this},y:function(t){return this._y={from:this.target.y(),to:t},this},cx:function(t){return this._cx={from:this.target.cx(),to:t},this},cy:function(t){return this._cy={from:this.target.cy(),to: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 SVG.Text)this.attr("font-size",t);else{var i=this.target.bbox();this._size={width:{from:i.width,to:t},height:{from:i.height,to:e}}}return this},viewbox:function(t,e,i,n){if(this.target instanceof SVG.Container){var s=this.target.viewbox();this._viewbox={x:{from:s.x,to:t},y:{from:s.y,to:e},width:{from:s.width,to:i},height:{from:s.height,to:n}}}return this},during:function(t){return this._during=t,this},after:function(t){return this._after=t,this},stop:function(){return clearTimeout(this.timeout),clearInterval(this.interval),this.attrs={},this.trans={},this.styles={},delete this._x,delete this._y,delete this._cx,delete this._cy,delete this._size,delete this._after,delete this._during,delete this._viewbox,this},_at:function(t,e){return"number"==typeof t.from?t.from+(t.to-t.from)*e:SVG.regex.unit.test(t.to)?this._unit(t,e):t.to&&(t.to.r||SVG.Color.test(t.to))?this._color(t,e):1>e?t.from:t.to},_unit:function(t,e){var i,n;return i=SVG.regex.unit.exec(t.from.toString()),n=parseFloat(i?i[1]:0),i=SVG.regex.unit.exec(t.to),n+(parseFloat(i[1])-n)*e+i[2]},_color:function(t,e){var i,n;return e=0>e?0:e>1?1:e,i=new SVG.Color(t.from),n=new SVG.Color(t.to),new SVG.Color({r:~~(i.r+(n.r-i.r)*e),g:~~(i.g+(n.g-i.g)*e),b:~~(i.b+(n.b-i.b)*e)}).toHex()}}),SVG.extend(SVG.Element,{animate:function(t,e,i){return(this.fx||(this.fx=new SVG.FX(this))).stop().animate(t,e,i)},stop:function(){return this.fx&&this.fx.stop(),this}}),["click","dblclick","mousedown","mouseup","mouseover","mouseout","mousemove","mouseenter","mouseleave","touchstart","touchend","touchmove","touchcancel"].forEach(function(t){SVG.Element.prototype[t]=function(e){var i=this;return this.node["on"+t]="function"==typeof e?function(){return e.apply(i,arguments)}:null,this}}),SVG.on=function(t,e,i){t.addEventListener?t.addEventListener(e,i,!1):t.attachEvent("on"+e,i)},SVG.off=function(t,e,i){t.removeEventListener?t.removeEventListener(e,i,!1):t.detachEvent("on"+e,i)},SVG.extend(SVG.Element,{on:function(t,e){return SVG.on(this.node,t,e),this},off:function(t,e){return SVG.off(this.node,t,e),this}}),SVG.G=function(){this.constructor.call(this,SVG.create("g"))},SVG.G.prototype=new SVG.Container,SVG.extend(SVG.G,{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)},defs:function(){return this.doc().defs()}}),SVG.extend(SVG.Element,{siblings:function(){return this.parent.children()},position:function(){return this.siblings().indexOf(this)},next:function(){return this.siblings()[this.position()+1]},previous:function(){return this.siblings()[this.position()-1]},forward:function(){return this.parent.removeElement(this).put(this,this.position()+1)},backward:function(){this.parent.level();var t=this.position();return t>1&&this.parent.removeElement(this).add(this,t-1),this},front:function(){return this.parent.removeElement(this).put(this)},back:function(){return this.parent.level(),this.position()>1&&this.parent.removeElement(this).add(this,0),this}}),SVG.Defs=function(){this.constructor.call(this,SVG.create("defs"))},SVG.Defs.prototype=new SVG.Container,SVG.Mask=function(){this.constructor.call(this,SVG.create("mask"))},SVG.Mask.prototype=new SVG.Container,SVG.extend(SVG.Element,{maskWith:function(t){return this.mask=t instanceof SVG.Mask?t:this.parent.mask().add(t),this.attr("mask","url(#"+this.mask.attr("id")+")")}}),SVG.Clip=function(){this.constructor.call(this,SVG.create("clipPath"))},SVG.Clip.prototype=new SVG.Container,SVG.extend(SVG.Element,{clipWith:function(t){return this.clip=t instanceof SVG.Clip?t:this.parent.clip().add(t),this.attr("clip-path","url(#"+this.clip.attr("id")+")")}}),SVG.Pattern=function(){this.constructor.call(this,SVG.create("pattern"))},SVG.Pattern.prototype=new SVG.Container,SVG.extend(SVG.Pattern,{fill:function(){return"url(#"+this.attr("id")+")"}}),SVG.extend(SVG.Defs,{pattern:function(t,e,i){var n=this.put(new SVG.Pattern);return i(n),n.attr({x:0,y:0,width:t,height:e,patternUnits:"userSpaceOnUse"})}}),SVG.Gradient=function(t){this.constructor.call(this,SVG.create(t+"Gradient")),this.type=t},SVG.Gradient.prototype=new SVG.Container,SVG.extend(SVG.Gradient,{from:function(t,e){return"radial"==this.type?this.attr({fx:t+"%",fy:e+"%"}):this.attr({x1:t+"%",y1:e+"%"})},to:function(t,e){return"radial"==this.type?this.attr({cx:t+"%",cy:e+"%"}):this.attr({x2:t+"%",y2:e+"%"})},radius:function(t){return"radial"==this.type?this.attr({r:t+"%"}):this},at:function(t){return this.put(new SVG.Stop(t))},update:function(t){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return t(this),this},fill:function(){return"url(#"+this.attr("id")+")"}}),SVG.extend(SVG.Defs,{gradient:function(t,e){var i=this.put(new SVG.Gradient(t));return e(i),i}}),SVG.Stop=function(t){this.constructor.call(this,SVG.create("stop")),this.update(t)},SVG.Stop.prototype=new SVG.Element,SVG.extend(SVG.Stop,{update:function(t){var e,i=["opacity","color"];for(e=i.length-1;e>=0;e--)null!=t[i[e]]&&this.style("stop-"+i[e],t[i[e]]);return this.attr("offset",(null!=t.offset?t.offset:this.attr("offset"))+"%")}}),SVG.Doc=function(t){this.parent="string"==typeof t?document.getElementById(t):t,this.constructor.call(this,"svg"==this.parent.nodeName?this.parent:SVG.create("svg")),this.attr({xmlns:SVG.ns,version:"1.1",width:"100%",height:"100%"}).attr("xlink",SVG.xlink,SVG.ns).defs(),"svg"!=this.parent.nodeName&&this.stage()},SVG.Doc.prototype=new SVG.Container,SVG.extend(SVG.Doc,{stage:function(){var t,e=this,i=document.createElement("div");return i.style.cssText="position:relative;height:100%;",e.parent.appendChild(i),i.appendChild(e.node),t=function(){"complete"===document.readyState?(e.style("position:absolute;"),setTimeout(function(){e.style("position:relative;"),e.parent.removeChild(e.node.parentNode),e.node.parentNode.removeChild(e.node),e.parent.appendChild(e.node),e.fixSubPixelOffset(),SVG.on(window,"resize",function(){e.fixSubPixelOffset()})},5)):setTimeout(t,10)},t(),this},fixSubPixelOffset:function(){var t=this.node.getScreenCTM();this.style("left",-t.e%1+"px").style("top",-t.f%1+"px")}}),SVG.Shape=function(t){this.constructor.call(this,t)},SVG.Shape.prototype=new SVG.Element,SVG.Rect=function(){this.constructor.call(this,SVG.create("rect"))},SVG.Rect.prototype=new SVG.Shape,SVG.Ellipse=function(){this.constructor.call(this,SVG.create("ellipse"))},SVG.Ellipse.prototype=new SVG.Shape,SVG.extend(SVG.Ellipse,{x:function(t){return null==t?this.cx()-this.attr("rx"):this.cx(t+this.attr("rx"))},y:function(t){return null==t?this.cy()-this.attr("ry"):this.cy(t+this.attr("ry"))},cx:function(t){return null==t?this.attr("cx"):this.attr("cx",t/this.trans.scaleX)},cy:function(t){return null==t?this.attr("cy"):this.attr("cy",t/this.trans.scaleY)},size:function(t,e){return this.attr({rx:t/2,ry:e/2})}}),SVG.Line=function(){this.constructor.call(this,SVG.create("line"))},SVG.Line.prototype=new SVG.Shape,SVG.extend(SVG.Line,{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)},size:function(t,e){var i=this.bbox();return this.attr(this.attr("x1")<this.attr("x2")?"x2":"x1",i.x+t).attr(this.attr("y1")<this.attr("y2")?"y2":"y1",i.y+e)},plot:function(t,e,i,n){return this.attr({x1:t,y1:e,x2:i,y2:n})}}),SVG.Polyline=function(t){this.constructor.call(this,SVG.create("polyline")),this.unbiased=t},SVG.Polyline.prototype=new SVG.Shape,SVG.Polygon=function(t){this.constructor.call(this,SVG.create("polygon")),this.unbiased=t},SVG.Polygon.prototype=new SVG.Shape,SVG.extend(SVG.Polyline,SVG.Polygon,{_plot:function(t){if(Array.isArray(t)){var e,i,n=[];for(e=0,i=t.length;i>e;e++)n.push(t[e].join(","));t=n.length>0?n.join(" "):"0,0"}return this.attr("points",t||"0,0")}}),SVG.Path=function(t){this.constructor.call(this,SVG.create("path")),this.unbiased=t},SVG.Path.prototype=new SVG.Shape,SVG.extend(SVG.Path,{_plot:function(t){return this.attr("d",t||"M0,0")}}),SVG.extend(SVG.Polyline,SVG.Polygon,SVG.Path,{x:function(t){return null==t?this.bbox().x:this.transform("x",t)},y:function(t){return null==t?this.bbox().y:this.transform("y",t)},size:function(t,e){var i=t/this._offset.width;return this.transform({scaleX:i,scaleY:null!=e?e/this._offset.height:i})},plot:function(t){var e=this.trans.scaleX,i=this.trans.scaleY;return this._plot(t),this._offset=this.transform({scaleX:1,scaleY:1}).bbox(),this.unbiased?this._offset.x=this._offset.y=0:(this._offset.x-=this.trans.x,this._offset.y-=this.trans.y),this.transform({scaleX:e,scaleY:i})}}),SVG.Image=function(){this.constructor.call(this,SVG.create("image"))},SVG.Image.prototype=new SVG.Shape,SVG.extend(SVG.Image,{load:function(t){return t?this.attr("xlink:href",this.src=t,SVG.xlink):this}});var t="size family weight stretch variant style".split(" ");SVG.Text=function(){this.constructor.call(this,SVG.create("text")),this.styles={"font-size":16,"font-family":"Helvetica, Arial, sans-serif","text-anchor":"start"},this._leading=1.2,this._base=.276666666},SVG.Text.prototype=new SVG.Shape,SVG.extend(SVG.Text,{x:function(t,e){return null==t?e?this.attr("x"):this.bbox().x:(e||(e=this.style("text-anchor"),t="start"==e?t:"end"==e?t+this.bbox().width:t+this.bbox().width/2),this.attr("x",t))},cx:function(t){return null==t?this.bbox().cx:this.x(t-this.bbox().width/2)},cy:function(t,e){return null==t?this.bbox().cy:this.y(e?t:t-this.bbox().height/2)},move:function(t,e,i){return this.x(t,i).y(e)},center:function(t,e,i){return this.cx(t,i).cy(e,i)},text:function(t){if(null==t)return this.content;this.clear(),this.content=SVG.regex.isBlank.test(t)?"text":t;var e,i,n=t.split("\n");for(e=0,i=n.length;i>e;e++)this.tspan(n[e]);return this.attr("textLength",1).attr("textLength",null)},tspan:function(t){var e=(new SVG.TSpan).text(t);return this.node.appendChild(e.node),this.lines.push(e),e.attr("style",this.style())},size:function(t){return this.attr("font-size",t)},leading:function(t){return null==t?this._leading:(this._leading=t,this.rebuild("leading",t))},rebuild:function(){var t,e,i=this.styles["font-size"];for(t=0,e=this.lines.length;e>t;t++)this.lines[t].attr({dy:i*this._leading-(0==t?i*this._base:0),x:this.attr("x")||0,style:this.style()});return this},clear:function(){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return this.lines=[],this}}),SVG.TSpan=function(){this.constructor.call(this,SVG.create("tspan"))},SVG.TSpan.prototype=new SVG.Shape,SVG.extend(SVG.TSpan,{text:function(t){return this.node.appendChild(document.createTextNode(t)),this}}),SVG.Nested=function(){this.constructor.call(this,SVG.create("svg")),this.style("overflow","visible")},SVG.Nested.prototype=new SVG.Container,SVG._stroke=["color","width","opacity","linecap","linejoin","miterlimit","dasharray","dashoffset"],SVG._fill=["color","opacity","rule"];var e=function(t,e){return"color"==e?t:t+"-"+e};["fill","stroke"].forEach(function(t){var i={};i[t]=function(i){if("string"==typeof i||SVG.Color.isRgb(i))this.attr(t,i);else for(index=SVG["_"+t].length-1;index>=0;index--)null!=i[SVG["_"+t][index]]&&this.attr(e(t,SVG["_"+t][index]),i[SVG["_"+t][index]]);return this},SVG.extend(SVG.Shape,SVG.FX,i)}),SVG.extend(SVG.Element,SVG.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)}}),SVG.Text&&SVG.extend(SVG.Text,SVG.FX,{font:function(e){for(var i in e)"anchor"==i?this.attr("text-anchor",e[i]):t.indexOf(i)>-1?this.attr("font-"+i,e[i]):this.attr(i,e[i]);return this}})}).call(this);
\ No newline at end of file +(function(){if(this.SVG=function(t){return SVG.supported?new SVG.Doc(t):void 0},this.svg=function(t){return console.warn("WARNING: svg() is deprecated, please use SVG() instead."),SVG(t)},SVG.ns="http://www.w3.org/2000/svg",SVG.xlink="http://www.w3.org/1999/xlink",SVG.did=1e3,SVG.eid=function(t){return"Svgjs"+t.charAt(0).toUpperCase()+t.slice(1)+SVG.did++},SVG.create=function(t){var e=document.createElementNS(this.ns,t);return e.setAttribute("id",this.eid(t)),e},SVG.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]},SVG.get=function(t){var e=document.getElementById(t);return e?e.instance:void 0},SVG.supported=function(){return!!document.createElementNS&&!!document.createElementNS(SVG.ns,"svg").createSVGRect}(),!SVG.supported)return!1;SVG.regex={test:function(t,e){return this[e].test(t)},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+)\)/,isHex:/^#[a-f0-9]{3,6}$/i,isRgb:/^rgb\(/,isCss:/[^:]+:[^;]+;?/,isStyle:/^font|text|leading|cursor/,isBlank:/^(\s+)?$/,isNumber:/^-?[\d\.]+$/},SVG.defaults={matrix:"1,0,0,1,0,0",attrs:{"fill-opacity":1,"stroke-opacity":1,"stroke-width":0,fill:"#000",stroke:"#000",opacity:1,x:0,y:0,cx:0,cy:0,width:0,height:0,r:0,rx:0,ry:0,offset:0},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}}},SVG.Color=function(t){var e;this.r=0,this.g=0,this.b=0,"string"==typeof t?SVG.regex.isRgb.test(t)?(e=SVG.regex.rgb.exec(t.replace(/\s/g,"")),this.r=parseInt(e[1]),this.g=parseInt(e[2]),this.b=parseInt(e[3])):SVG.regex.isHex.test(t)&&(e=SVG.regex.hex.exec(this._fullHex(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)},SVG.extend(SVG.Color,{toString:function(){return this.toHex()},toHex:function(){return"#"+this._compToHex(this.r)+this._compToHex(this.g)+this._compToHex(this.b)},toRgb:function(){return"rgb("+[this.r,this.g,this.b].join()+")"},brightness:function(){return.3*(this.r/255)+.59*(this.g/255)+.11*(this.b/255)},_fullHex:function(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},_compToHex:function(t){var e=t.toString(16);return 1==e.length?"0"+e:e}}),SVG.Color.test=function(t){return t+="",SVG.regex.isHex.test(t)||SVG.regex.isRgb.test(t)},SVG.Color.isRgb=function(t){return t&&"number"==typeof t.r},SVG.ViewBox=function(t){var e,i,n,s,r=t.bbox(),o=(t.attr("viewBox")||"").match(/-?[\d\.]+/g);this.x=r.x,this.y=r.y,this.width=t.node.offsetWidth||t.attr("width"),this.height=t.node.offsetHeight||t.attr("height"),o&&(e=parseFloat(o[0]),i=parseFloat(o[1]),n=parseFloat(o[2]),s=parseFloat(o[3]),this.zoom=this.width/this.height>n/s?this.height/s:this.width/n,this.x=e,this.y=i,this.width=n,this.height=s),this.zoom=this.zoom||1},SVG.extend(SVG.ViewBox,{toString:function(){return this.x+" "+this.y+" "+this.width+" "+this.height}}),SVG.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}this.cx=this.x+this.width/2,this.cy=this.y+this.height/2},SVG.extend(SVG.BBox,{merge:function(t){var e=new SVG.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,e.cx=e.x+e.width/2,e.cy=e.y+e.height/2,e}}),SVG.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=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.cx=this.x+this.width/2,this.cy=this.y+this.height/2},SVG.Element=function(t){this._stroke=SVG.defaults.attrs.stroke,this.styles={},this.trans=SVG.defaults.trans(),(this.node=t)&&(this.type=t.nodeName,this.node.instance=this)},SVG.extend(SVG.Element,{x:function(t){return t&&(t/=this.trans.scaleX),this.attr("x",t)},y:function(t){return t&&(t/=this.trans.scaleY),this.attr("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)},move:function(t,e){return this.x(t).y(e)},center:function(t,e){return this.cx(t).cy(e)},size:function(t,e){return this.attr({width:t,height:e})},clone:function(){var t,e,i=this.type;return t="rect"==i||"ellipse"==i?this.parent[i](0,0):"line"==i?this.parent[i](0,0,0,0):"image"==i?this.parent[i](this.src):"text"==i?this.parent[i](this.content):"path"==i?this.parent[i](this.attr("d")):"polyline"==i||"polygon"==i?this.parent[i](this.attr("points")):"g"==i?this.parent.group():this.parent[i](),e=this.attr(),delete e.id,t.attr(e),t.trans=this.trans,t.transform({})},remove:function(){return this.parent&&this.parent.removeElement(this),this},doc:function(t){return this._parent(t||SVG.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]=SVG.regex.test(e[i].nodeValue,"isNumber")?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 this._isStyle(t)?"text"==t?this.content:"leading"==t&&this.leading?this.leading():this.style(t):(e=this.node.getAttribute(t),null==e?SVG.defaults.attrs[t]:SVG.regex.test(e,"isNumber")?parseFloat(e):e);if("style"==t)return this.style(e);if("function"==typeof e.fill&&(e=e.fill()),"x"==t&&Array.isArray(this.lines))for(i=this.lines.length-1;i>=0;i--)this.lines[i].attr(t,e);"stroke-width"==t?this.attr("stroke",parseFloat(e)>0?this._stroke:null):"stroke"==t&&(this._stroke=e),(SVG.Color.test(e)||SVG.Color.isRgb(e))&&(e=new SVG.Color(e).toHex()),null!=i?this.node.setAttributeNS(i,t,e):this.node.setAttribute(t,e),this._isStyle(t)&&("text"==t?this.text(e):"leading"==t&&this.leading?this.leading(e):this.style(t,e),this.rebuild&&this.rebuild(t,e))}return this},transform:function(t,e){if(0==arguments.length)return this.trans;if("string"==typeof t){if(2>arguments.length)return this.trans[t];var i={};return i[t]=e,this.transform(i)}var i=[];t=this._parseMatrix(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!=SVG.defaults.matrix&&i.push("matrix("+t.matrix+")"),0!=t.rotation&&i.push("rotate("+t.rotation+","+(t.cx||this.bbox().cx)+","+(t.cy||this.bbox().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("+t.x/t.scaleX+","+t.y/t.scaleY+")"),this._offset&&i.push("translate("+-this._offset.x+","+-this._offset.y+")"),0==i.length?this.node.removeAttribute("transform"):this.node.setAttribute("transform",i.join(" ")),this},style:function(t,e){if(0==arguments.length)return this.attr("style")||"";if(2>arguments.length)if("object"==typeof t)for(e in t)this.style(e,t[e]);else{if(!SVG.regex.isCss.test(t))return this.styles[t];t=t.split(";");for(var i=0;t.length>i;i++)e=t[i].split(":"),2==e.length&&this.style(e[0].replace(/\s+/g,""),e[1].replace(/^\s+/,"").replace(/\s+$/,""))}else null===e||SVG.regex.test(e,"isBlank")?delete this.styles[t]:this.styles[t]=e;t="";for(e in this.styles)t+=e+":"+this.styles[e]+";";return""==t?this.node.removeAttribute("style"):this.node.setAttribute("style",t),this},data:function(t,e,i){if(2>arguments.length)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},bbox:function(){return new SVG.BBox(this)},rbox:function(){return new SVG.RBox(this)},inside:function(t,e){var i=this.bbox();return t>i.x&&e>i.y&&i.x+i.width>t&&i.y+i.height>e},show:function(){return this.style("display","")},hide:function(){return this.style("display","none")},visible:function(){return"none"!=this.style("display")},_parent:function(t){for(var e=this;null!=e&&!(e instanceof t);)e=e.parent;return e},_isStyle:function(t){return"string"==typeof t?SVG.regex.test(t,"isStyle"):!1},_parseMatrix:function(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}}),SVG.Container=function(t){this.constructor.call(this,t)},SVG.Container.prototype=new SVG.Element,SVG.extend(SVG.Container,{children:function(){return this._children||(this._children=[])},add:function(t,e){if(!this.has(t)){if(e=null==e?this.children().length:e,t.parent){var i=t.parent.children().indexOf(t);t.parent.children().splice(i,1)}this.children().splice(e,0,t),this.node.insertBefore(t.node,this.node.childNodes[e]||null),t.parent=this}return this},put:function(t,e){return this.add(t,e),t},has:function(t){return this.children().indexOf(t)>=0},each:function(t,e){var i,n,s=this.children();for(i=0,n=s.length;n>i;i++)s[i]instanceof SVG.Shape&&t.apply(s[i],[i,s]),e&&s[i]instanceof SVG.Container&&s[i].each(t,e);return this},removeElement:function(t){var e=this.children().indexOf(t);return this.children().splice(e,1),this.node.removeChild(t.node),t.parent=null,this},defs:function(){return this._defs||(this._defs=this.put(new SVG.Defs,0))},level:function(){return this.removeElement(this.defs()).put(this.defs(),0)},first:function(){return this.children()[0]instanceof SVG.Defs?this.children()[1]:this.children()[0]},last:function(){return this.children()[this.children().length-1]},viewbox:function(t){return 0==arguments.length?new SVG.ViewBox(this):(t=1==arguments.length?[t.x,t.y,t.width,t.height]:[].slice.call(arguments),this.attr("viewBox",t.join(" ")))},clear:function(){for(var t=this.children().length-1;t>=0;t--)this.removeElement(this.children()[t]);return this._defs&&(this._defs.remove(),delete this._defs),this}}),SVG.FX=function(t){this.target=t},SVG.extend(SVG.FX,{animate:function(t,e,i){var n=this;return"object"==typeof t&&(i=t.delay,e=t.ease,t=t.duration),this.timeout=setTimeout(function(){t=null==t?1e3:t,e=e||"<>";var i,s,r,o=1e3/60,h=n.target,a=(new Date).getTime(),u=a+t;n.interval=setInterval(function(){var o,l,c=(new Date).getTime(),f=c>u?1:(c-a)/t;if(null==i){i=[];for(l in n.attrs)i.push(l)}if(null==s){s=[];for(l in n.trans)s.push(l)}if(null==r){r=[];for(l in n.styles)r.push(l)}for(f="<>"==e?-Math.cos(f*Math.PI)/2+.5:">"==e?Math.sin(f*Math.PI/2):"<"==e?-Math.cos(f*Math.PI/2)+1:"-"==e?f:"function"==typeof e?e(f):f,n._x?h.x(n._at(n._x,f)):n._cx&&h.cx(n._at(n._cx,f)),n._y?h.y(n._at(n._y,f)):n._cy&&h.cy(n._at(n._cy,f)),n._size&&h.size(n._at(n._size.width,f),n._at(n._size.height,f)),n._viewbox&&h.viewbox(n._at(n._viewbox.x,f),n._at(n._viewbox.y,f),n._at(n._viewbox.width,f),n._at(n._viewbox.height,f)),o=i.length-1;o>=0;o--)h.attr(i[o],n._at(n.attrs[i[o]],f));for(o=s.length-1;o>=0;o--)h.transform(s[o],n._at(n.trans[s[o]],f));for(o=r.length-1;o>=0;o--)h.style(r[o],n._at(n.styles[r[o]],f));n._during&&n._during.call(h,f,function(t,e){return n._at({from:t,to:e},f)}),c>u&&(clearInterval(n.interval),n._after?n._after.apply(h,[n]):n.stop())},t>o?o:t)},i||0),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 this.attrs[t]={from:this.target.attr(t),to:e};return this},transform:function(t,e){if(1==arguments.length){t=this.target._parseMatrix(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={from:this.target.x(),to:t},this},y:function(t){return this._y={from:this.target.y(),to:t},this},cx:function(t){return this._cx={from:this.target.cx(),to:t},this},cy:function(t){return this._cy={from:this.target.cy(),to: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 SVG.Text)this.attr("font-size",t);else{var i=this.target.bbox();this._size={width:{from:i.width,to:t},height:{from:i.height,to:e}}}return this},viewbox:function(t,e,i,n){if(this.target instanceof SVG.Container){var s=this.target.viewbox();this._viewbox={x:{from:s.x,to:t},y:{from:s.y,to:e},width:{from:s.width,to:i},height:{from:s.height,to:n}}}return this},during:function(t){return this._during=t,this},after:function(t){return this._after=t,this},stop:function(){return clearTimeout(this.timeout),clearInterval(this.interval),this.attrs={},this.trans={},this.styles={},delete this._x,delete this._y,delete this._cx,delete this._cy,delete this._size,delete this._after,delete this._during,delete this._viewbox,this},_at:function(t,e){return"number"==typeof t.from?t.from+(t.to-t.from)*e:SVG.regex.unit.test(t.to)?this._unit(t,e):t.to&&(t.to.r||SVG.Color.test(t.to))?this._color(t,e):1>e?t.from:t.to},_unit:function(t,e){var i,n;return i=SVG.regex.unit.exec(t.from.toString()),n=parseFloat(i?i[1]:0),i=SVG.regex.unit.exec(t.to),n+(parseFloat(i[1])-n)*e+i[2]},_color:function(t,e){var i,n;return e=0>e?0:e>1?1:e,i=new SVG.Color(t.from),n=new SVG.Color(t.to),new SVG.Color({r:~~(i.r+(n.r-i.r)*e),g:~~(i.g+(n.g-i.g)*e),b:~~(i.b+(n.b-i.b)*e)}).toHex()}}),SVG.extend(SVG.Element,{animate:function(t,e,i){return(this.fx||(this.fx=new SVG.FX(this))).stop().animate(t,e,i)},stop:function(){return this.fx&&this.fx.stop(),this}}),["click","dblclick","mousedown","mouseup","mouseover","mouseout","mousemove","mouseenter","mouseleave","touchstart","touchend","touchmove","touchcancel"].forEach(function(t){SVG.Element.prototype[t]=function(e){var i=this;return this.node["on"+t]="function"==typeof e?function(){return e.apply(i,arguments)}:null,this}}),SVG.on=function(t,e,i){t.addEventListener?t.addEventListener(e,i,!1):t.attachEvent("on"+e,i)},SVG.off=function(t,e,i){t.removeEventListener?t.removeEventListener(e,i,!1):t.detachEvent("on"+e,i)},SVG.extend(SVG.Element,{on:function(t,e){return SVG.on(this.node,t,e),this},off:function(t,e){return SVG.off(this.node,t,e),this}}),SVG.G=function(){this.constructor.call(this,SVG.create("g"))},SVG.G.prototype=new SVG.Container,SVG.extend(SVG.G,{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)},defs:function(){return this.doc().defs()}}),SVG.extend(SVG.Container,{group:function(){return this.put(new SVG.G)}}),SVG.extend(SVG.Element,{siblings:function(){return this.parent.children()},position:function(){return this.siblings().indexOf(this)},next:function(){return this.siblings()[this.position()+1]},previous:function(){return this.siblings()[this.position()-1]},forward:function(){return this.parent.removeElement(this).put(this,this.position()+1)},backward:function(){this.parent.level();var t=this.position();return t>1&&this.parent.removeElement(this).add(this,t-1),this},front:function(){return this.parent.removeElement(this).put(this)},back:function(){return this.parent.level(),this.position()>1&&this.parent.removeElement(this).add(this,0),this}}),SVG.Defs=function(){this.constructor.call(this,SVG.create("defs"))},SVG.Defs.prototype=new SVG.Container,SVG.Mask=function(){this.constructor.call(this,SVG.create("mask"))},SVG.Mask.prototype=new SVG.Container,SVG.extend(SVG.Element,{maskWith:function(t){return this.mask=t instanceof SVG.Mask?t:this.parent.mask().add(t),this.attr("mask","url(#"+this.mask.attr("id")+")")}}),SVG.extend(SVG.Container,{mask:function(){return this.defs().put(new SVG.Mask)}}),SVG.Clip=function(){this.constructor.call(this,SVG.create("clipPath"))},SVG.Clip.prototype=new SVG.Container,SVG.extend(SVG.Element,{clipWith:function(t){return this.clip=t instanceof SVG.Clip?t:this.parent.clip().add(t),this.attr("clip-path","url(#"+this.clip.attr("id")+")")}}),SVG.extend(SVG.Container,{clip:function(){return this.defs().put(new SVG.Clip)}}),SVG.Pattern=function(){this.constructor.call(this,SVG.create("pattern"))},SVG.Pattern.prototype=new SVG.Container,SVG.extend(SVG.Pattern,{fill:function(){return"url(#"+this.attr("id")+")"}}),SVG.extend(SVG.Defs,{pattern:function(t,e,i){var n=this.put(new SVG.Pattern);return i(n),n.attr({x:0,y:0,width:t,height:e,patternUnits:"userSpaceOnUse"})}}),SVG.extend(SVG.Container,{pattern:function(t,e,i){return this.defs().pattern(t,e,i)}}),SVG.Gradient=function(t){this.constructor.call(this,SVG.create(t+"Gradient")),this.type=t},SVG.Gradient.prototype=new SVG.Container,SVG.extend(SVG.Gradient,{from:function(t,e){return"radial"==this.type?this.attr({fx:t+"%",fy:e+"%"}):this.attr({x1:t+"%",y1:e+"%"})},to:function(t,e){return"radial"==this.type?this.attr({cx:t+"%",cy:e+"%"}):this.attr({x2:t+"%",y2:e+"%"})},radius:function(t){return"radial"==this.type?this.attr({r:t+"%"}):this},at:function(t){return this.put(new SVG.Stop(t))},update:function(t){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return t(this),this},fill:function(){return"url(#"+this.attr("id")+")"}}),SVG.extend(SVG.Defs,{gradient:function(t,e){var i=this.put(new SVG.Gradient(t));return e(i),i}}),SVG.extend(SVG.Container,{gradient:function(t,e){return this.defs().gradient(t,e)}}),SVG.Stop=function(t){this.constructor.call(this,SVG.create("stop")),this.update(t)},SVG.Stop.prototype=new SVG.Element,SVG.extend(SVG.Stop,{update:function(t){var e,i=["opacity","color"];for(e=i.length-1;e>=0;e--)null!=t[i[e]]&&this.style("stop-"+i[e],t[i[e]]);return this.attr("offset",(null!=t.offset?t.offset:this.attr("offset"))+"%")}}),SVG.Doc=function(t){this.parent="string"==typeof t?document.getElementById(t):t,this.constructor.call(this,"svg"==this.parent.nodeName?this.parent:SVG.create("svg")),this.attr({xmlns:SVG.ns,version:"1.1",width:"100%",height:"100%"}).attr("xlink",SVG.xlink,SVG.ns).defs(),"svg"!=this.parent.nodeName&&this.stage()},SVG.Doc.prototype=new SVG.Container,SVG.extend(SVG.Doc,{stage:function(){var t,e=this,i=document.createElement("div");return i.style.cssText="position:relative;height:100%;",e.parent.appendChild(i),i.appendChild(e.node),t=function(){"complete"===document.readyState?(e.style("position:absolute;"),setTimeout(function(){e.style("position:relative;"),e.parent.removeChild(e.node.parentNode),e.node.parentNode.removeChild(e.node),e.parent.appendChild(e.node),e.fixSubPixelOffset(),SVG.on(window,"resize",function(){e.fixSubPixelOffset()})},5)):setTimeout(t,10)},t(),this},fixSubPixelOffset:function(){var t=this.node.getScreenCTM();this.style("left",-t.e%1+"px").style("top",-t.f%1+"px")}}),SVG.Shape=function(t){this.constructor.call(this,t)},SVG.Shape.prototype=new SVG.Element,SVG.Rect=function(){this.constructor.call(this,SVG.create("rect"))},SVG.Rect.prototype=new SVG.Shape,SVG.extend(SVG.Container,{rect:function(t,e){return this.put((new SVG.Rect).size(t,e))}}),SVG.Ellipse=function(){this.constructor.call(this,SVG.create("ellipse"))},SVG.Ellipse.prototype=new SVG.Shape,SVG.extend(SVG.Ellipse,{x:function(t){return null==t?this.cx()-this.attr("rx"):this.cx(t+this.attr("rx"))},y:function(t){return null==t?this.cy()-this.attr("ry"):this.cy(t+this.attr("ry"))},cx:function(t){return null==t?this.attr("cx"):this.attr("cx",t/this.trans.scaleX)},cy:function(t){return null==t?this.attr("cy"):this.attr("cy",t/this.trans.scaleY)},size:function(t,e){return this.attr({rx:t/2,ry:e/2})}}),SVG.extend(SVG.Container,{circle:function(t){return this.ellipse(t,t)},ellipse:function(t,e){return this.put((new SVG.Ellipse).size(t,e).move(0,0))}}),SVG.Line=function(){this.constructor.call(this,SVG.create("line"))},SVG.Line.prototype=new SVG.Shape,SVG.extend(SVG.Line,{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)},size:function(t,e){var i=this.bbox();return this.attr(this.attr("x1")<this.attr("x2")?"x2":"x1",i.x+t).attr(this.attr("y1")<this.attr("y2")?"y2":"y1",i.y+e)},plot:function(t,e,i,n){return this.attr({x1:t,y1:e,x2:i,y2:n})}}),SVG.extend(SVG.Container,{line:function(t,e,i,n){return this.put((new SVG.Line).plot(t,e,i,n))}}),SVG.Polyline=function(t){this.constructor.call(this,SVG.create("polyline")),this.unbiased=t},SVG.Polyline.prototype=new SVG.Shape,SVG.Polygon=function(t){this.constructor.call(this,SVG.create("polygon")),this.unbiased=t},SVG.Polygon.prototype=new SVG.Shape,SVG.extend(SVG.Polyline,SVG.Polygon,{_plot:function(t){if(Array.isArray(t)){var e,i,n=[];for(e=0,i=t.length;i>e;e++)n.push(t[e].join(","));t=n.length>0?n.join(" "):"0,0"}return this.attr("points",t||"0,0")}}),SVG.extend(SVG.Container,{polyline:function(t,e){return this.put(new SVG.Polyline(e)).plot(t)},polygon:function(t,e){return this.put(new SVG.Polygon(e)).plot(t)}}),SVG.Path=function(t){this.constructor.call(this,SVG.create("path")),this.unbiased=t},SVG.Path.prototype=new SVG.Shape,SVG.extend(SVG.Path,{_plot:function(t){return this.attr("d",t||"M0,0")}}),SVG.extend(SVG.Container,{path:function(t,e){return this.put(new SVG.Path(e)).plot(t)}}),SVG.extend(SVG.Polyline,SVG.Polygon,SVG.Path,{x:function(t){return null==t?this.bbox().x:this.transform("x",t)},y:function(t){return null==t?this.bbox().y:this.transform("y",t)},size:function(t,e){var i=t/this._offset.width;return this.transform({scaleX:i,scaleY:null!=e?e/this._offset.height:i})},plot:function(t){var e=this.trans.scaleX,i=this.trans.scaleY;return this._plot(t),this._offset=this.transform({scaleX:1,scaleY:1}).bbox(),this.unbiased?this._offset.x=this._offset.y=0:(this._offset.x-=this.trans.x,this._offset.y-=this.trans.y),this.transform({scaleX:e,scaleY:i})}}),SVG.Image=function(){this.constructor.call(this,SVG.create("image"))},SVG.Image.prototype=new SVG.Shape,SVG.extend(SVG.Image,{load:function(t){return t?this.attr("xlink:href",this.src=t,SVG.xlink):this}}),SVG.extend(SVG.Container,{image:function(t,e,i){return e=null!=e?e:100,this.put((new SVG.Image).load(t).size(e,null!=i?i:e))}});var t="size family weight stretch variant style".split(" ");SVG.Text=function(){this.constructor.call(this,SVG.create("text")),this.styles={"font-size":16,"font-family":"Helvetica, Arial, sans-serif","text-anchor":"start"},this._leading=1.2,this._base=.276666666},SVG.Text.prototype=new SVG.Shape,SVG.extend(SVG.Text,{x:function(t,e){return null==t?e?this.attr("x"):this.bbox().x:(e||(e=this.style("text-anchor"),t="start"==e?t:"end"==e?t+this.bbox().width:t+this.bbox().width/2),this.attr("x",t))},cx:function(t){return null==t?this.bbox().cx:this.x(t-this.bbox().width/2)},cy:function(t,e){return null==t?this.bbox().cy:this.y(e?t:t-this.bbox().height/2)},move:function(t,e,i){return this.x(t,i).y(e)},center:function(t,e,i){return this.cx(t,i).cy(e,i)},text:function(t){if(null==t)return this.content;this.clear(),this.content=SVG.regex.isBlank.test(t)?"text":t;var e,i,n=t.split("\n");for(e=0,i=n.length;i>e;e++)this.tspan(n[e]);return this.attr("textLength",1).attr("textLength",null)},tspan:function(t){var e=(new SVG.TSpan).text(t);return this.node.appendChild(e.node),this.lines.push(e),e.attr("style",this.style())},size:function(t){return this.attr("font-size",t)},leading:function(t){return null==t?this._leading:(this._leading=t,this.rebuild("leading",t))},rebuild:function(){var t,e,i=this.styles["font-size"];for(t=0,e=this.lines.length;e>t;t++)this.lines[t].attr({dy:i*this._leading-(0==t?i*this._base:0),x:this.attr("x")||0,style:this.style()});return this},clear:function(){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return this.lines=[],this}}),SVG.extend(SVG.Container,{text:function(t){return this.put((new SVG.Text).text(t))}}),SVG.TSpan=function(){this.constructor.call(this,SVG.create("tspan"))},SVG.TSpan.prototype=new SVG.Shape,SVG.extend(SVG.TSpan,{text:function(t){return this.node.appendChild(document.createTextNode(t)),this}}),SVG.Nested=function(){this.constructor.call(this,SVG.create("svg")),this.style("overflow","visible")},SVG.Nested.prototype=new SVG.Container,SVG.extend(SVG.Container,{nested:function(){return this.put(new SVG.Nested)}}),SVG._stroke=["color","width","opacity","linecap","linejoin","miterlimit","dasharray","dashoffset"],SVG._fill=["color","opacity","rule"];var e=function(t,e){return"color"==e?t:t+"-"+e};["fill","stroke"].forEach(function(t){var i={};i[t]=function(i){if("string"==typeof i||SVG.Color.isRgb(i))this.attr(t,i);else for(index=SVG["_"+t].length-1;index>=0;index--)null!=i[SVG["_"+t][index]]&&this.attr(e(t,SVG["_"+t][index]),i[SVG["_"+t][index]]);return this},SVG.extend(SVG.Shape,SVG.FX,i)}),SVG.extend(SVG.Element,SVG.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)}}),SVG.Text&&SVG.extend(SVG.Text,SVG.FX,{font:function(e){for(var i in e)"anchor"==i?this.attr("text-anchor",e[i]):t.indexOf(i)>-1?this.attr("font-"+i,e[i]):this.attr(i,e[i]);return this}})}).call(this);
\ No newline at end of file diff --git a/spec/spec/color.js b/spec/spec/color.js index 0b510c3..1980600 100644 --- a/spec/spec/color.js +++ b/spec/spec/color.js @@ -7,14 +7,14 @@ describe('Color', function() { expect(color.b).toBe(128) }) - it('should correclty parse a 3-based hex string', function() { + it('should correclty parse a 3 digit hex string', function() { var color = new SVG.Color('#f06') expect(color.r).toBe(255) expect(color.g).toBe(0) expect(color.b).toBe(102) }) - it('should correclty parse a 6-based hex string', function() { + it('should correclty parse a 6 digit hex string', function() { var color = new SVG.Color('#0066ff') expect(color.r).toBe(0) expect(color.g).toBe(102) diff --git a/spec/spec/container.js b/spec/spec/container.js index 24feb00..217e2e2 100644 --- a/spec/spec/container.js +++ b/spec/spec/container.js @@ -225,6 +225,23 @@ describe('Container', function() { expect(children).toEqual(group.children()) }) + it('should traverse recursively when set to deep', function() { + var children = [] + , group = draw.group() + + draw.rect(100,200) + draw.circle(300) + + group.rect(100,100) + group.ellipse(100, 100) + group.polygon() + + draw.each(function() { + children.push(this) + }, true) + + expect(children.length).toEqual(draw.children().length + group.children().length) + }) }) describe('viewbox()', function() { diff --git a/spec/spec/gradient.js b/spec/spec/gradient.js index db16e92..f07a7e8 100644 --- a/spec/spec/gradient.js +++ b/spec/spec/gradient.js @@ -13,6 +13,10 @@ describe('Gradient', function() { it('should return the id of the gradient wrapped in url()', function() { expect(gradient.fill()).toBe('url(#' + gradient.attr('id') + ')') }) + it('should be called when instance is passed as an attribute value', function() { + rect.attr('fill', gradient) + expect(rect.attr('fill')).toBe('url(#' + gradient.attr('id') + ')') + }) }) })
\ No newline at end of file diff --git a/src/clip.js b/src/clip.js index c1e82cb..7341c8f 100644 --- a/src/clip.js +++ b/src/clip.js @@ -5,6 +5,7 @@ SVG.Clip = function() { // Inherit from SVG.Container SVG.Clip.prototype = new SVG.Container +// SVG.extend(SVG.Element, { // Distribute clipPath to svg element clipWith: function(element) { @@ -14,4 +15,13 @@ SVG.extend(SVG.Element, { return this.attr('clip-path', 'url(#' + this.clip.attr('id') + ')') } +}) + +// +SVG.extend(SVG.Container, { + // Create clipping element + clip: function() { + return this.defs().put(new SVG.Clip) + } + })
\ No newline at end of file diff --git a/src/container.js b/src/container.js index 46ebdb1..dbf2205 100644 --- a/src/container.js +++ b/src/container.js @@ -41,13 +41,17 @@ SVG.extend(SVG.Container, { return this.children().indexOf(element) >= 0 } // Iterates over all children and invokes a given block -, each: function(block) { - var index, - children = this.children() - - for (index = 0, length = children.length; index < length; index++) - if (children[index] instanceof SVG.Shape) - block.apply(children[index], [index, children]) +, each: function(block, deep) { + var i, il + , children = this.children() + + for (i = 0, il = children.length; i < il; i++) { + if (children[i] instanceof SVG.Shape) + block.apply(children[i], [i, children]) + + if (deep && (children[i] instanceof SVG.Container)) + children[i].each(block, deep) + } return this } @@ -69,67 +73,6 @@ SVG.extend(SVG.Container, { , level: function() { return this.removeElement(this.defs()).put(this.defs(), 0) } - // Create a group element -, group: function() { - return this.put(new SVG.G) - } - // Create a rect element -, rect: function(width, height) { - return this.put(new SVG.Rect().size(width, height)) - } - // Create circle element, based on ellipse -, circle: function(size) { - return this.ellipse(size, size) - } - // Create an ellipse -, ellipse: function(width, height) { - return this.put(new SVG.Ellipse().size(width, height).move(0, 0)) - } - // Create a line element -, line: function(x1, y1, x2, y2) { - return this.put(new SVG.Line().plot(x1, y1, x2, y2)) - } - // Create a wrapped polyline element -, polyline: function(points, unbiased) { - return this.put(new SVG.Polyline(unbiased)).plot(points) - } - // Create a wrapped polygon element -, polygon: function(points, unbiased) { - return this.put(new SVG.Polygon(unbiased)).plot(points) - } - // Create a wrapped path element -, path: function(data, unbiased) { - return this.put(new SVG.Path(unbiased)).plot(data) - } - // Create image element, load image and set its size -, image: function(source, width, height) { - width = width != null ? width : 100 - return this.put(new SVG.Image().load(source).size(width, height != null ? height : width)) - } - // Create text element -, text: function(text) { - return this.put(new SVG.Text().text(text)) - } - // Create nested svg document -, nested: function() { - return this.put(new SVG.Nested) - } - // Create gradient element in defs -, gradient: function(type, block) { - return this.defs().gradient(type, block) - } - // Create pattern element in defs -, pattern: function(width, height, block) { - return this.defs().pattern(width, height, block) - } - // Create masking element -, mask: function() { - return this.defs().put(new SVG.Mask) - } - // Create clipping element -, clip: function() { - return this.defs().put(new SVG.Clip) - } // Get first child, skipping the defs node , first: function() { return this.children()[0] instanceof SVG.Defs ? this.children()[1] : this.children()[0] diff --git a/src/element.js b/src/element.js index 8d07762..3fa456f 100644 --- a/src/element.js +++ b/src/element.js @@ -140,6 +140,10 @@ SVG.extend(SVG.Element, { return this.style(v) } else { + /* process gradient or pattern fill */ + if (typeof v.fill === 'function') + v = v.fill() + /* treat x differently on text elements */ if (a == 'x' && Array.isArray(this.lines)) for (n = this.lines.length - 1; n >= 0; n--) @@ -154,7 +158,7 @@ SVG.extend(SVG.Element, { /* ensure hex color */ if (SVG.Color.test(v) || SVG.Color.isRgb(v)) v = new SVG.Color(v).toHex() - + /* set give attribute on node */ n != null ? this.node.setAttributeNS(n, a, v) : diff --git a/src/ellipse.js b/src/ellipse.js index 598c250..2ff0c86 100644 --- a/src/ellipse.js +++ b/src/ellipse.js @@ -34,6 +34,19 @@ SVG.extend(SVG.Ellipse, { }) +// +SVG.extend(SVG.Container, { + // Create circle element, based on ellipse + circle: function(size) { + return this.ellipse(size, size) + } + // Create an ellipse +, ellipse: function(width, height) { + return this.put(new SVG.Ellipse().size(width, height).move(0, 0)) + } + +}) + // Usage: // draw.ellipse(200, 100)
\ No newline at end of file diff --git a/src/gradient.js b/src/gradient.js index 6a2155e..f98a0b0 100644 --- a/src/gradient.js +++ b/src/gradient.js @@ -64,6 +64,15 @@ SVG.extend(SVG.Defs, { }) +// +SVG.extend(SVG.Container, { + // Create gradient element in defs + gradient: function(type, block) { + return this.defs().gradient(type, block) + } + +}) + SVG.Stop = function(stop) { this.constructor.call(this, SVG.create('stop')) diff --git a/src/group.js b/src/group.js index f960391..1184657 100644 --- a/src/group.js +++ b/src/group.js @@ -5,6 +5,7 @@ SVG.G = function() { // Inherit from SVG.Container SVG.G.prototype = new SVG.Container +// SVG.extend(SVG.G, { // Move over x-axis x: function(x) { @@ -19,4 +20,13 @@ SVG.extend(SVG.G, { return this.doc().defs() } +}) + +// +SVG.extend(SVG.Container, { + // Create a group element + group: function() { + return this.put(new SVG.G) + } + })
\ No newline at end of file diff --git a/src/image.js b/src/image.js index 7546936..b01897d 100644 --- a/src/image.js +++ b/src/image.js @@ -5,6 +5,7 @@ SVG.Image = function() { // Inherit from SVG.Element SVG.Image.prototype = new SVG.Shape +// SVG.extend(SVG.Image, { // (re)load image @@ -12,4 +13,14 @@ SVG.extend(SVG.Image, { return (url ? this.attr('xlink:href', (this.src = url), SVG.xlink) : this) } +}) + +// +SVG.extend(SVG.Container, { + // Create image element, load image and set its size + image: function(source, width, height) { + width = width != null ? width : 100 + return this.put(new SVG.Image().load(source).size(width, height != null ? height : width)) + } + })
\ No newline at end of file diff --git a/src/line.js b/src/line.js index b32141c..2c9034e 100644 --- a/src/line.js +++ b/src/line.js @@ -54,3 +54,12 @@ SVG.extend(SVG.Line, { } }) + +// +SVG.extend(SVG.Container, { + // Create a line element + line: function(x1, y1, x2, y2) { + return this.put(new SVG.Line().plot(x1, y1, x2, y2)) + } + +}) diff --git a/src/mask.js b/src/mask.js index 12fc13b..ddd7565 100644 --- a/src/mask.js +++ b/src/mask.js @@ -5,6 +5,7 @@ SVG.Mask = function() { // Inherit from SVG.Container SVG.Mask.prototype = new SVG.Container +// SVG.extend(SVG.Element, { // Distribute mask to svg element maskWith: function(element) { @@ -14,4 +15,13 @@ SVG.extend(SVG.Element, { return this.attr('mask', 'url(#' + this.mask.attr('id') + ')') } +}) + +// +SVG.extend(SVG.Container, { + // Create masking element + mask: function() { + return this.defs().put(new SVG.Mask) + } + })
\ No newline at end of file diff --git a/src/nested.js b/src/nested.js index 537d610..d42abf9 100644 --- a/src/nested.js +++ b/src/nested.js @@ -5,4 +5,13 @@ SVG.Nested = function() { } // Inherit from SVG.Container -SVG.Nested.prototype = new SVG.Container
\ No newline at end of file +SVG.Nested.prototype = new SVG.Container + +// +SVG.extend(SVG.Container, { + // Create nested svg document + nested: function() { + return this.put(new SVG.Nested) + } + +})
\ No newline at end of file diff --git a/src/path.js b/src/path.js index b328d92..ef6ab03 100644 --- a/src/path.js +++ b/src/path.js @@ -13,4 +13,13 @@ SVG.extend(SVG.Path, { return this.attr('d', data || 'M0,0') } +}) + +// +SVG.extend(SVG.Container, { + // Create a wrapped path element + path: function(data, unbiased) { + return this.put(new SVG.Path(unbiased)).plot(data) + } + })
\ No newline at end of file diff --git a/src/pattern.js b/src/pattern.js index c5f51e0..dc57e77 100644 --- a/src/pattern.js +++ b/src/pattern.js @@ -16,10 +16,9 @@ SVG.extend(SVG.Pattern, { // SVG.extend(SVG.Defs, { - - /* define gradient */ + // Define gradient pattern: function(width, height, block) { - var element = this.put(new SVG.Pattern()) + var element = this.put(new SVG.Pattern) /* invoke passed block */ block(element) @@ -33,4 +32,13 @@ SVG.extend(SVG.Defs, { }) } -});
\ No newline at end of file +}) + +// +SVG.extend(SVG.Container, { + // Create pattern element in defs + pattern: function(width, height, block) { + return this.defs().pattern(width, height, block) + } + +})
\ No newline at end of file diff --git a/src/poly.js b/src/poly.js index 36492dc..8dd4696 100644 --- a/src/poly.js +++ b/src/poly.js @@ -32,4 +32,16 @@ SVG.extend(SVG.Polyline, SVG.Polygon, { return this.attr('points', p || '0,0') } -}) +}) + +// +SVG.extend(SVG.Container, { + // Create a wrapped polyline element + polyline: function(points, unbiased) { + return this.put(new SVG.Polyline(unbiased)).plot(points) + } + // Create a wrapped polygon element +, polygon: function(points, unbiased) { + return this.put(new SVG.Polygon(unbiased)).plot(points) + } +})
\ No newline at end of file diff --git a/src/rect.js b/src/rect.js index 1a3bf19..583556d 100644 --- a/src/rect.js +++ b/src/rect.js @@ -3,4 +3,13 @@ SVG.Rect = function() { } // Inherit from SVG.Shape -SVG.Rect.prototype = new SVG.Shape
\ No newline at end of file +SVG.Rect.prototype = new SVG.Shape + +// +SVG.extend(SVG.Container, { + // Create a rect element + rect: function(width, height) { + return this.put(new SVG.Rect().size(width, height)) + } + +})
\ No newline at end of file diff --git a/src/set.js b/src/set.js new file mode 100644 index 0000000..c518c37 --- /dev/null +++ b/src/set.js @@ -0,0 +1,37 @@ +SVG.Set = function() { + this.children = [] +} + +SVG.extend(SVG.Set, { + // Add element to set + add: function(element) { + this.children.push(element) + + return this + } + // Remove element from set +, remove: function(element) { + var i = this.children.indexOf(element) + + if (i > -1) + this.children.splice(i, 1) + + return this + } + // Move all children +, move: function(x, y) { + return this.x(x).y(y) + } + +}) + +// Create method aliases +;['attr'].forEach(function(method) { + + SVG.Set.prototype[method] = function() { + for (var i = 0, il = this.children.length; i < il; i++) + this.children[i][method](arguments) + + } + +})
\ No newline at end of file diff --git a/src/text.js b/src/text.js index afd8724..22ec5bc 100644 --- a/src/text.js +++ b/src/text.js @@ -19,6 +19,7 @@ SVG.Text = function() { // Inherit from SVG.Element SVG.Text.prototype = new SVG.Shape +// SVG.extend(SVG.Text, { // Move over x-axis x: function(x, a) { @@ -123,6 +124,15 @@ SVG.extend(SVG.Text, { }) +// +SVG.extend(SVG.Container, { + // Create text element + text: function(text) { + return this.put(new SVG.Text().text(text)) + } + +}) + // tspan class SVG.TSpan = function() { this.constructor.call(this, SVG.create('tspan')) diff --git a/src/viewbox.js b/src/viewbox.js index f06ab6d..ff84b93 100644 --- a/src/viewbox.js +++ b/src/viewbox.js @@ -34,10 +34,12 @@ SVG.ViewBox = function(element) { } +// SVG.extend(SVG.ViewBox, { // Parse viewbox to string toString: function() { return this.x + ' ' + this.y + ' ' + this.width + ' ' + this.height } -})
\ No newline at end of file +}) + |