From: wout Date: Sat, 12 Jul 2014 12:06:49 +0000 (+0200) Subject: Further debugging matrix new implementation X-Git-Tag: 2.0.0-rc.1~53 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=501cb5387007a89af382717376c773a1ec6b68ae;p=svg.js.git Further debugging matrix new implementation --- diff --git a/dist/svg.js b/dist/svg.js index 8dd3a39..f54574e 100755 --- a/dist/svg.js +++ b/dist/svg.js @@ -1,4 +1,4 @@ -/* svg.js 1.0.0-rc.10-19-g7cc2d36 - svg inventor adopter regex utilities default color array pointarray patharray number viewbox element boxes matrix attr transform style parent container transporter 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 */ +/* svg.js 1.0.0-rc.10-20-g462d2cd - svg inventor adopter regex utilities default color array pointarray patharray number viewbox element boxes matrix attr transform style parent container transporter 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) { @@ -929,7 +929,7 @@ x: function(x) { if (x != null) { x = new SVG.Number(x) - x.value /= this.ctm().extract().scaleX + x.value /= this.transform('scaleX') } return this.attr('x', x) } @@ -937,7 +937,7 @@ , y: function(y) { if (y != null) { y = new SVG.Number(y) - y.value /= this.ctm().extract().scaleY + y.value /= this.transform('scaleY') } return this.attr('y', y) } @@ -1262,21 +1262,22 @@ // Extract individual transformations extract: function() { // Find transform points - var px = deltaTransformPoint(this, { x: 0, y: 1 }) - , py = deltaTransformPoint(this, { x: 1, y: 0 }) + var px = deltaTransformPoint(this, { x: 0, y: 1 }) + , py = deltaTransformPoint(this, { x: 1, y: 0 }) + , skewX = 180 / Math.PI * Math.atan2(px.y, px.x) - 90 return { // Translation x: this.e , y: this.f // Skew - , skewX: 180 / Math.PI * Math.atan2(px.y, px.x) - 90 + , skewX: skewX , skewY: 180 / Math.PI * Math.atan2(py.y, py.x) // Scale , scaleX: Math.sqrt(this.a * this.a + this.b * this.b) , scaleY: Math.sqrt(this.c * this.c + this.d * this.d) // Rotation - , rotation: this.skewX + , rotation: skewX } } // Multiply @@ -1300,15 +1301,12 @@ } // Rotate , rotate: function(d, x, y) { - // Fall back to native rotate method - if (x == null) return new SVG.Matrix(this.native().rotate(d)) - // Convert degrees to radians d = SVG.utils.radians(d) - + return new SVG.Matrix(1, 0, 0, 1, x, y) - //.multiply(new SVG.Matrix(Math.cos(d), Math.sin(d), -Math.sin(d), Math.cos(d), 0, 0)) - //.multiply(new SVG.Matrix(1, 0, 0, 1, -x, -y)) + .multiply(new SVG.Matrix(Math.cos(d), Math.sin(d), -Math.sin(d), Math.cos(d), 0, 0)) + .multiply(new SVG.Matrix(1, 0, 0, 1, -x, -y)) } // Flip , flip: function(a) { @@ -1436,6 +1434,10 @@ if (o == null) return this.ctm().extract() + // Singular getter + else if (typeof o === 'string') + return this.ctm().extract()[o] + // Get current matrix var matrix = new SVG.Matrix(this) @@ -1467,7 +1469,7 @@ // Act on translate else if (o.x || o.y) matrix = matrix.translate(o.x, o.y) - console.log(o, matrix) + return this.attr('transform', matrix) } // Reset all transformations @@ -2858,11 +2860,11 @@ } // Move by center over x-axis , cx: function(x) { - return x == null ? this.attr('cx') : this.attr('cx', new SVG.Number(x).divide(this.ctm().scaleX)) + return x == null ? this.attr('cx') : this.attr('cx', new SVG.Number(x).divide(this.transform('scaleX'))) } // Move by center over y-axis , cy: function(y) { - return y == null ? this.attr('cy') : this.attr('cy', new SVG.Number(y).divide(this.ctm().scaleY)) + return y == null ? this.attr('cy') : this.attr('cy', new SVG.Number(y).divide(this.transform('scaleY'))) } // Set width of element , width: function(width) { @@ -3929,7 +3931,7 @@ // Map matrix array to object function arrayToMatrix(a) { - return { a: a[0], b: a[1], c: a[2], e: a[3], f: a[4], g: a[5] } + return { a: a[0], b: a[1], c: a[2], d: a[3], e: a[4], f: a[5] } } // Calculate position according to from and to diff --git a/dist/svg.min.js b/dist/svg.min.js index 59979e3..a159d65 100755 --- a/dist/svg.min.js +++ b/dist/svg.min.js @@ -1,3 +1,3 @@ -/* svg.js 1.0.0-rc.10-19-g7cc2d36 - svg inventor adopter regex utilities default color array pointarray patharray number viewbox element boxes matrix attr transform style parent container transporter 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(){function n(e){return e.toLowerCase().replace(/-(.)/g,function(e,t){return t.toUpperCase()})}function r(e){return e.charAt(0).toUpperCase()+e.slice(1)}function i(e){return e.length==4?["#",e.substring(1,2),e.substring(1,2),e.substring(2,3),e.substring(2,3),e.substring(3,4),e.substring(3,4)].join(""):e}function s(e){var t=e.toString(16);return t.length==1?"0"+t:t}function o(e,t,n){if(t==null||n==null)n==null?n=e.height/e.width*t:t==null&&(t=e.width/e.height*n);return{width:t,height:n}}function u(e,t){return{x:t.x*e.a+t.y*e.c+0,y:t.x*e.b+t.y*e.d+0}}function a(e){return{a:e[0],b:e[1],c:e[2],e:e[3],f:e[4],g:e[5]}}function f(t,n){return typeof t.from=="number"?t.from+(t.to-t.from)*n:t instanceof e.Color||t instanceof e.Number?t.at(n):n<1?t.from:t.to}function l(e){for(var t=0,n=e.length,r="";t=0;n--)t.childNodes[n]instanceof SVGElement&&c(t.childNodes[n]);return e.adopt(t).id(e.eid(t.nodeName))}function h(e){return e.x2=e.x+e.width,e.y2=e.y+e.height,e.cx=e.x+e.width/2,e.cy=e.y+e.height/2,e}function p(e){if(e.matrix){var t=e.matrix.replace(/\s/g,"").split(",");t.length==6&&(e.a=parseFloat(t[0]),e.b=parseFloat(t[1]),e.c=parseFloat(t[2]),e.d=parseFloat(t[3]),e.e=parseFloat(t[4]),e.f=parseFloat(t[5]))}return e}function d(t){var n=t.toString().match(e.regex.reference);if(n)return n[1]}var e=this.SVG=function(t){if(e.supported)return t=new e.Doc(t),e.parser||e.prepare(t),t};e.ns="http://www.w3.org/2000/svg",e.xmlns="http://www.w3.org/2000/xmlns/",e.xlink="http://www.w3.org/1999/xlink",e.did=1e3,e.eid=function(t){return"Svgjs"+r(t)+e.did++},e.create=function(e){var t=document.createElementNS(this.ns,e);return t.setAttribute("id",this.eid(e)),t},e.extend=function(){var t,n,r,i;t=[].slice.call(arguments),n=t.pop();for(i=t.length-1;i>=0;i--)if(t[i])for(r in n)t[i].prototype[r]=n[r];e.Set&&e.Set.inherit&&e.Set.inherit()},e.prepare=function(t){var n=document.getElementsByTagName("body")[0],r=(n?new e.Doc(n):t.nested()).size(2,0),i=e.create("path");r.node.appendChild(i),e.parser={body:n||t.parent(),draw:r.style("opacity:0;position:fixed;left:100%;top:100%;overflow:hidden"),poly:r.polyline().node,path:i}},e.supported=function(){return!!document.createElementNS&&!!document.createElementNS(e.ns,"svg").createSVGRect}();if(!e.supported)return!1;e.invent=function(t){var n=typeof t.create=="function"?t.create:function(){this.constructor.call(this,e.create(t.create))};return t.inherit&&(n.prototype=new t.inherit),t.extend&&e.extend(n,t.extend),t.construct&&e.extend(t.parent||e.Container,t.construct),n},e.adopt=function(t){if(t.instance)return t.instance;var n;return t.nodeName=="svg"?n=t.parentNode instanceof SVGElement?new e.Nested:new e.Doc:t.nodeName=="lineairGradient"?n=new e.Gradient("lineair"):t.nodeName=="radialGradient"?n=new e.Gradient("radial"):e[r(t.nodeName)]?n=new(e[r(t.nodeName)]):n=new e.Element(t),n.type=t.nodeName,n.node=t,t.instance=n,n instanceof e.Doc&&n.namespace().defs(),n},e.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]+$/},e.utils={map:function(e,t){var n,r=e.length,i=[];for(n=0;n1?1:t,new e.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}}),e.Color.test=function(t){return t+="",e.regex.isHex.test(t)||e.regex.isRgb.test(t)},e.Color.isRgb=function(e){return e&&typeof e.r=="number"&&typeof e.g=="number"&&typeof e.b=="number"},e.Color.isColor=function(t){return e.Color.isRgb(t)||e.Color.test(t)},e.Array=function(e,t){e=(e||[]).valueOf(),e.length==0&&t&&(e=t.valueOf()),this.value=this.parse(e)},e.extend(e.Array,{morph:function(e){this.destination=this.parse(e);if(this.value.length!=this.destination.length){var t=this.value[this.value.length-1],n=this.destination[this.destination.length-1];while(this.value.length>this.destination.length)this.destination.push(n);while(this.value.length=0;r--)this.value[r]=[this.value[r][0]+e,this.value[r][1]+t];return this},size:function(e,t){var n,r=this.bbox();for(n=this.value.length-1;n>=0;n--)this.value[n][0]=(this.value[n][0]-r.x)*e/r.width+r.x,this.value[n][1]=(this.value[n][1]-r.y)*t/r.height+r.y;return this},bbox:function(){return e.parser.poly.setAttribute("points",this.toString()),e.parser.poly.getBBox()}}),e.PathArray=function(e,t){this.constructor.call(this,e,t||[["M",0,0]])},e.PathArray.prototype=new e.Array,e.extend(e.PathArray,{toString:function(){return l(this.value)},move:function(e,t){var n=this.bbox();e-=n.x,t-=n.y;if(!isNaN(e)&&!isNaN(t))for(var r,i=this.value.length-1;i>=0;i--)r=this.value[i][0],r=="M"||r=="L"||r=="T"?(this.value[i][1]+=e,this.value[i][2]+=t):r=="H"?this.value[i][1]+=e:r=="V"?this.value[i][1]+=t:r=="C"||r=="S"||r=="Q"?(this.value[i][1]+=e,this.value[i][2]+=t,this.value[i][3]+=e,this.value[i][4]+=t,r=="C"&&(this.value[i][5]+=e,this.value[i][6]+=t)):r=="A"&&(this.value[i][6]+=e,this.value[i][7]+=t);return this},size:function(e,t){var n,r,i=this.bbox();for(n=this.value.length-1;n>=0;n--)r=this.value[n][0],r=="M"||r=="L"||r=="T"?(this.value[n][1]=(this.value[n][1]-i.x)*e/i.width+i.x,this.value[n][2]=(this.value[n][2]-i.y)*t/i.height+i.y):r=="H"?this.value[n][1]=(this.value[n][1]-i.x)*e/i.width+i.x:r=="V"?this.value[n][1]=(this.value[n][1]-i.y)*t/i.height+i.y:r=="C"||r=="S"||r=="Q"?(this.value[n][1]=(this.value[n][1]-i.x)*e/i.width+i.x,this.value[n][2]=(this.value[n][2]-i.y)*t/i.height+i.y,this.value[n][3]=(this.value[n][3]-i.x)*e/i.width+i.x,this.value[n][4]=(this.value[n][4]-i.y)*t/i.height+i.y,r=="C"&&(this.value[n][5]=(this.value[n][5]-i.x)*e/i.width+i.x,this.value[n][6]=(this.value[n][6]-i.y)*t/i.height+i.y)):r=="A"&&(this.value[n][1]=this.value[n][1]*e/i.width,this.value[n][2]=this.value[n][2]*t/i.height,this.value[n][6]=(this.value[n][6]-i.x)*e/i.width+i.x,this.value[n][7]=(this.value[n][7]-i.y)*t/i.height+i.y);return this},parse:function(t){if(t instanceof e.PathArray)return t.valueOf();var n,r,i,s,o,u,a,f,c,h,p,d=0,v=0;e.parser.path.setAttribute("d",typeof t=="string"?t:l(t)),p=e.parser.path.pathSegList;for(n=0,r=p.numberOfItems;ni/s?this.height/s:this.width/i,this.x=n,this.y=r,this.width=i,this.height=s)},e.extend(e.ViewBox,{toString:function(){return this.x+" "+this.y+" "+this.width+" "+this.height}}),e.Element=e.invent({create:function(t){this._stroke=e.defaults.attrs.stroke;if(this.node=t)this.type=t.nodeName,this.node.instance=this,this._stroke=t.getAttribute("stroke")||this._stroke},extend:{x:function(t){return t!=null&&(t=new e.Number(t),t.value/=this.ctm().extract().scaleX),this.attr("x",t)},y:function(t){return t!=null&&(t=new e.Number(t),t.value/=this.ctm().extract().scaleY),this.attr("y",t)},cx:function(e){return e==null?this.x()+this.width()/2:this.x(e-this.width()/2)},cy:function(e){return e==null?this.y()+this.height()/2:this.y(e-this.height()/2)},move:function(e,t){return this.x(e).y(t)},center:function(e,t){return this.cx(e).cy(t)},width:function(e){return this.attr("width",e)},height:function(e){return this.attr("height",e)},size:function(t,n){var r=o(this.bbox(),t,n);return this.width(new e.Number(r.width)).height(new e.Number(r.height))},clone:function(){return c(this.node.cloneNode(!0))},remove:function(){return this.parent()&&this.parent().removeElement(this),this},replace:function(e){return this.after(e).remove(),e},addTo:function(e){return e.put(this)},putIn:function(e){return e.add(this)},id:function(e){return this.attr("id",e)},inside:function(e,t){var n=this.bbox();return e>n.x&&t>n.y&&e=0;t--)this[v[t]]=typeof e[v[t]]=="number"?e[v[t]]:n[v[t]]},extend:{extract:function(){var e=u(this,{x:0,y:1}),t=u(this,{x:1,y:0});return{x:this.e,y:this.f,skewX:180/Math.PI*Math.atan2(e.y,e.x)-90,skewY:180/Math.PI*Math.atan2(t.y,t.x),scaleX:Math.sqrt(this.a*this.a+this.b*this.b),scaleY:Math.sqrt(this.c*this.c+this.d*this.d),rotation:this.skewX}},multiply:function(t){return new e.Matrix(this.native().multiply(t.native()))},inverse:function(){return new e.Matrix(this.native().inverse())},translate:function(t,n){return new e.Matrix(this.native().translate(t||0,n||0))},scale:function(t,n,r,i){return n==null?new e.Matrix(this.native().scale(t)):new e.Matrix(this.native().scaleNonUniform(t,n))},rotate:function(t,n,r){return n==null?new e.Matrix(this.native().rotate(t)):(t=e.utils.radians(t),new e.Matrix(1,0,0,1,n,r))},flip:function(t){return new e.Matrix(this.native()["flip"+t.toUpperCase()]())},skew:function(t,n){return new e.Matrix(this.native().skewX(t||0).skewY(n||0))},"native":function(){var t,n=e.parser.draw.node.createSVGMatrix();for(t=v.length-1;t>=0;t--)n[v[t]]=this[v[t]];return n},toString:function(){return"matrix("+[this.a,this.b,this.c,this.d,this.e,this.f].join()+")"}},parent:e.Element,construct:{ctm:function(){return new e.Matrix(this)}}}),e.extend(e.Element,{attr:function(t,n,r){if(t==null){t={},n=this.node.attributes;for(r=n.length-1;r>=0;r--)t[n[r].nodeName]=e.regex.isNumber.test(n[r].nodeValue)?parseFloat(n[r].nodeValue):n[r].nodeValue;return t}if(typeof t=="object")for(n in t)this.attr(n,t[n]);else if(n===null)this.node.removeAttribute(t);else{if(n==null)return n=this.node.getAttribute(t),n==null?e.defaults.attrs[t]:e.regex.isNumber.test(n)?parseFloat(n):n;t=="stroke-width"?this.attr("stroke",parseFloat(n)>0?this._stroke:null):t=="stroke"&&(this._stroke=n);if(t=="fill"||t=="stroke")e.regex.isImage.test(n)&&(n=this.doc().defs().image(n,0,0)),n instanceof e.Image&&(n=this.doc().defs().pattern(0,0,function(){this.add(n)}));typeof n=="number"?n=new e.Number(n):e.Color.isColor(n)?n=new e.Color(n):Array.isArray(n)&&(n=new e.Array(n)),t=="leading"?this.leading&&this.leading(n):typeof r=="string"?this.node.setAttributeNS(r,t,n.toString()):this.node.setAttribute(t,n.toString()),this.rebuild&&(t=="font-size"||t=="x")&&this.rebuild(t,n)}return this}}),e.extend(e.Element,{transform:function(t){if(t==null)return this.ctm().extract();var n=new e.Matrix(this);if(t.a!=null)n=n.multiply(new e.Matrix(t));else if(t.rotation)n=n.rotate(t.rotation,t.cx==null?this.bbox().cx:t.cx,t.cy==null?this.bbox().cy:t.cy);else if(t.scale!=null||t.scaleX!=null||t.scaleY!=null)n=n.scale(t.scale!=null?t.scale:t.scaleX!=null?t.scaleX:1,t.scale!=null?t.scale:t.scaleY!=null?t.scaleY:1,t.cx!=null?t.cx:this.bbox().x,t.cy!=null?t.cy:this.bbox().y);else if(t.skewX||t.skewY)n=n.skew(t.skewX,t.skewY);else if(t.x||t.y)n=n.translate(t.x,t.y);return console.log(t,n),this.attr("transform",n)},untransform:function(){return this.attr("transform",null)}}),e.extend(e.Element,{style:function(t,r){if(arguments.length==0)return this.node.style.cssText||"";if(arguments.length<2)if(typeof t=="object")for(r in t)this.style(r,t[r]);else{if(!e.regex.isCss.test(t))return this.node.style[n(t)];t=t.split(";");for(var i=0;i=0},index:function(e){return this.children().indexOf(e)},get:function(e){return this.children()[e]},first:function(){return this.children()[0]},last:function(){return this.children()[this.children().length-1]},each:function(t,n){var r,i,s=this.children();for(r=0,i=s.length;r/g,"<$1$2>"),t.innerHTML=""+e+"";for(var n=t.firstChild.childNodes.length-1;n>=0;n--)t.firstChild.childNodes[n].nodeType==1&&this.node.appendChild(t.firstChild.childNodes[n]);return this}var r=this.node.cloneNode(!0);return t.appendChild(r),t.innerHTML}}),e.FX=e.invent({create:function(e){this.target=e},extend:{animate:function(t,n,r){var i,s,o,u,a=this.target,l=this;return typeof t=="object"&&(r=t.delay,n=t.ease,t=t.duration),t=t=="="?t:t==null?1e3:(new e.Number(t)).valueOf(),n=n||"<>",l.to=function(e){var t;e=e<0?0:e>1?1:e;if(i==null){i=[];for(u in l.attrs)i.push(u);if(a.morphArray&&(l._plot||i.indexOf("points")>-1)){var r,c=new a.morphArray(l._plot||l.attrs.points||a.array);l._size&&c.size(l._size.width.to,l._size.height.to),r=c.bbox(),l._x?c.move(l._x.to,r.y):l._cx&&c.move(l._cx.to-r.width/2,r.y),r=c.bbox(),l._y?c.move(r.x,l._y.to):l._cy&&c.move(r.x,l._cy.to-r.height/2),delete l._x,delete l._y,delete l._cx,delete l._cy,delete l._size,l._plot=a.array.morph(c)}}if(s==null){s=[];for(u in l.trans)s.push(u)}if(o==null){o=[];for(u in l.styles)o.push(u)}e=n=="<>"?-Math.cos(e*Math.PI)/2+.5:n==">"?Math.sin(e*Math.PI/2):n=="<"?-Math.cos(e*Math.PI/2)+1:n=="-"?e:typeof n=="function"?n(e):e,l._plot?a.plot(l._plot.at(e)):(l._x?a.x(l._x.at(e)):l._cx&&a.cx(l._cx.at(e)),l._y?a.y(l._y.at(e)):l._cy&&a.cy(l._cy.at(e)),l._size&&a.size(l._size.width.at(e),l._size.height.at(e))),l._viewbox&&a.viewbox(l._viewbox.x.at(e),l._viewbox.y.at(e),l._viewbox.width.at(e),l._viewbox.height.at(e)),l._leading&&a.leading(l._leading.at(e));for(t=i.length-1;t>=0;t--)a.attr(i[t],f(l.attrs[i[t]],e));for(t=s.length-1;t>=0;t--)a.transform(s[t],f(l.trans[s[t]],e));for(t=o.length-1;t>=0;t--)a.style(o[t],f(l.styles[o[t]],e));l._during&&l._during.call(a,e,function(t,n){return f({from:t,to:n},e)})},typeof t=="number"&&(this.timeout=setTimeout(function(){var i=(new Date).getTime();l.situation={interval:1e3/60,start:i,play:!0,finish:i+t,duration:t},l.render=function(){if(l.situation.play===!0){var i=(new Date).getTime(),s=i>l.situation.finish?1:(i-l.situation.start)/t;l.to(s),i>l.situation.finish?(l._plot&&a.plot((new e.PointArray(l._plot.destination)).settle()),l._loop===!0||typeof l._loop=="number"&&l._loop>1?(typeof l._loop=="number"&&--l._loop,l.animate(t,n,r)):l._after?l._after.apply(a,[l]):l.stop()):requestAnimFrame(l.render)}else requestAnimFrame(l.render)},l.render()},(new e.Number(r)).valueOf())),this},bbox:function(){return this.target.bbox()},attr:function(t,n){if(typeof t=="object")for(var r in t)this.attr(r,t[r]);else{var i=this.target.attr(t);this.attrs[t]=e.Color.isColor(i)?(new e.Color(i)).morph(n):e.regex.unit.test(i)?(new e.Number(i)).morph(n):{from:i,to:n}}return this},transform:function(e,t){if(arguments.length==1){e=p(e),delete e.matrix;for(t in e)this.trans[t]={from:this.target.trans[t],to:e[t]}}else{var n={};n[e]=t,this.transform(n)}return this},style:function(e,t){if(typeof e=="object")for(var n in e)this.style(n,e[n]);else this.styles[e]={from:this.target.style(e),to:t};return this},x:function(t){return this._x=(new e.Number(this.target.x())).morph(t),this},y:function(t){return this._y=(new e.Number(this.target.y())).morph(t),this},cx:function(t){return this._cx=(new e.Number(this.target.cx())).morph(t),this},cy:function(t){return this._cy=(new e.Number(this.target.cy())).morph(t),this},move:function(e,t){return this.x(e).y(t)},center:function(e,t){return this.cx(e).cy(t)},size:function(t,n){if(this.target instanceof e.Text)this.attr("font-size",t);else{var r=this.target.bbox();this._size={width:(new e.Number(r.width)).morph(t),height:(new e.Number(r.height)).morph(n)}}return this},plot:function(e){return this._plot=e,this},leading:function(t){return this.target._leading&&(this._leading=(new e.Number(this.target._leading)).morph(t)),this},viewbox:function(t,n,r,i){if(this.target instanceof e.Container){var s=this.target.viewbox();this._viewbox={x:(new e.Number(s.x)).morph(t),y:(new e.Number(s.y)).morph(n),width:(new e.Number(s.width)).morph(r),height:(new e.Number(s.height)).morph(i)}}return this},update:function(t){return this.target instanceof e.Stop&&(t.opacity!=null&&this.attr("stop-opacity",t.opacity),t.color!=null&&this.attr("stop-color",t.color),t.offset!=null&&this.attr("offset",new e.Number(t.offset))),this},during:function(e){return this._during=e,this},after:function(e){return this._after=e,this},loop:function(e){return this._loop=e||!0,this},stop:function(e){return e===!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 e=(new Date).getTime()-this.situation.pause;this.situation.finish+=e,this.situation.start+=e,this.situation.play=!0}return this}},parent:e.Element,construct:{animate:function(t,n,r){return(this.fx||(this.fx=new e.FX(this))).stop().animate(t,n,r)},stop:function(e){return this.fx&&this.fx.stop(e),this},pause:function(){return this.fx&&this.fx.pause(),this},play:function(){return this.fx&&this.fx.play(),this}}}),e.extend(e.Element,e.FX,{dx:function(e){return this.x((this.target||this).x()+e)},dy:function(e){return this.y((this.target||this).y()+e)},dmove:function(e,t){return this.dx(e).dy(t)}}),["click","dblclick","mousedown","mouseup","mouseover","mouseout","mousemove","mouseenter","mouseleave","touchstart","touchmove","touchleave","touchend","touchcancel"].forEach(function(t){e.Element.prototype[t]=function(e){var n=this;return this.node["on"+t]=typeof e=="function"?function(){return e.apply(n,arguments)}:null,this}}),e.events={},e.listeners={},e.registerEvent=function(t){e.events[t]||(e.events[t]=new m(t))},e.on=function(t,n,r){var i=r.bind(t.instance||t);e.listeners[r]=i,t.addEventListener(n,i,!1)},e.off=function(t,n,r){t.removeEventListener(n,e.listeners[r],!1),delete e.listeners[r]},e.extend(e.Element,{on:function(t,n){return e.on(this.node,t,n),this},off:function(t,n){return e.off(this.node,t,n),this},fire:function(t,n){return e.events[t].detail=n,this.node.dispatchEvent(e.events[t]),delete e.events[t].detail,this}}),e.Defs=e.invent({create:"defs",inherit:e.Container}),e.G=e.invent({create:"g",inherit:e.Container,extend:{x:function(e){return e==null?this.ctm().x:this.transform("x",e)},y:function(e){return e==null?this.ctm().y:this.transform("y",e)},cx:function(e){return e==null?this.bbox().cx:this.x(e-this.bbox().width/2)},cy:function(e){return e==null?this.bbox().cy:this.y(e-this.bbox().height/2)}},construct:{group:function(){return this.put(new e.G)}}}),e.extend(e.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,n=this.parent();return n.removeElement(this).add(this,t),n instanceof e.Doc&&n.node.appendChild(n.defs().node),this},backward:function(){var e=this.position();return e>0&&this.parent().removeElement(this).add(this,e-1),this},front:function(){var t=this.parent();return t.node.appendChild(this.node),t instanceof e.Doc&&t.node.appendChild(t.defs().node),this},back:function(){return this.position()>0&&this.parent().removeElement(this).add(this,0),this},before:function(e){e.remove();var t=this.position();return this.parent().add(e,t),this},after:function(e){e.remove();var t=this.position();return this.parent().add(e,t+1),this}}),e.Mask=e.invent({create:function(){this.constructor.call(this,e.create("mask")),this.targets=[]},inherit:e.Container,extend:{remove:function(){for(var e=this.targets.length-1;e>=0;e--)this.targets[e]&&this.targets[e].unmask();return delete this.targets,this.parent().removeElement(this),this}},construct:{mask:function(){return this.defs().put(new e.Mask)}}}),e.extend(e.Element,{maskWith:function(t){return this.masker=t instanceof e.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)}}),e.ClipPath=e.invent({create:function(){this.constructor.call(this,e.create("clipPath")),this.targets=[]},inherit:e.Container,extend:{remove:function(){for(var e=this.targets.length-1;e>=0;e--)this.targets[e]&&this.targets[e].unclip();return delete this.targets,this.parent().removeElement(this),this}},construct:{clip:function(){return this.defs().put(new e.ClipPath)}}}),e.extend(e.Element,{clipWith:function(t){return this.clipper=t instanceof e.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)}}),e.Gradient=e.invent({create:function(t){this.constructor.call(this,e.create(t+"Gradient")),this.type=t},inherit:e.Container,extend:{from:function(t,n){return this.type=="radial"?this.attr({fx:new e.Number(t),fy:new e.Number(n)}):this.attr({x1:new e.Number(t),y1:new e.Number(n)})},to:function(t,n){return this.type=="radial"?this.attr({cx:new e.Number(t),cy:new e.Number(n)}):this.attr({x2:new e.Number(t),y2:new e.Number(n)})},radius:function(t){return this.type=="radial"?this.attr({r:new e.Number(t)}):this},at:function(t,n,r){return this.put(new e.Stop).update(t,n,r)},update:function(e){return this.clear(),typeof e=="function"&&e.call(this,this),this},fill:function(){return"url(#"+this.id()+")"},toString:function(){return this.fill()}},construct:{gradient:function(e,t){return this.defs().gradient(e,t)}}}),e.extend(e.Defs,{gradient:function(t,n){return this.put(new e.Gradient(t)).update(n)}}),e.Stop=e.invent({create:"stop",inherit:e.Element,extend:{update:function(t){if(typeof t=="number"||t instanceof e.Number)t={offset:arguments[0],color:arguments[1],opacity:arguments[2]};return t.opacity!=null&&this.attr("stop-opacity",t.opacity),t.color!=null&&this.attr("stop-color",t.color),t.offset!=null&&this.attr("offset",new e.Number(t.offset)),this}}}),e.Pattern=e.invent({create:"pattern",inherit:e.Container,extend:{fill:function(){return"url(#"+this.id()+")"},update:function(e){return this.clear(),typeof e=="function"&&e.call(this,this),this},toString:function(){return this.fill()}},construct:{pattern:function(e,t,n){return this.defs().pattern(e,t,n)}}}),e.extend(e.Defs,{pattern:function(t,n,r){return this.put(new e.Pattern).update(r).attr({x:0,y:0,width:t,height:n,patternUnits:"userSpaceOnUse"})}}),e.Doc=e.invent({create:function(t){t&&(t=typeof t=="string"?document.getElementById -(t):t,t.nodeName=="svg"?this.constructor.call(this,t):(this.constructor.call(this,e.create("svg")),t.appendChild(this.node)),this.namespace().size("100%","100%").defs())},inherit:e.Container,extend:{namespace:function(){return this.attr({xmlns:e.ns,version:"1.1"}).attr("xmlns:xlink",e.xlink,e.xmlns)},defs:function(){if(!this._defs){var t;(t=this.node.getElementsByTagName("defs")[0])?this._defs=e.adopt(t):this._defs=new e.Defs,this.node.appendChild(this._defs.node)}return this._defs},parent:function(){return this.node.parentNode.nodeName=="#document"?null:this.node.parentNode}}}),e.extend(e.Doc,{spof:function(){if(this.doSpof){var e=this.node.getScreenCTM();e&&this.style("left",-e.e%1+"px").style("top",-e.f%1+"px")}return this},fixSubPixelOffset:function(){var t=this;return this.doSpof=!0,e.on(window,"resize",function(){t.spof()}),this.spof()}}),e.Shape=e.invent({create:function(e){this.constructor.call(this,e)},inherit:e.Element}),e.Symbol=e.invent({create:"symbol",inherit:e.Container,construct:{symbol:function(){return this.defs().put(new e.Symbol)}}}),e.Use=e.invent({create:"use",inherit:e.Shape,extend:{element:function(t){return this.target=t,this.attr("href","#"+t,e.xlink)}},construct:{use:function(t){return this.put(new e.Use).element(t)}}}),e.Rect=e.invent({create:"rect",inherit:e.Shape,construct:{rect:function(t,n){return this.put((new e.Rect).size(t,n))}}}),e.Circle=e.invent({create:"circle",inherit:e.Shape,construct:{circle:function(t){return this.put(new e.Circle).rx((new e.Number(t)).divide(2)).move(0,0)}}}),e.extend(e.Circle,e.FX,{rx:function(e){return this.attr("r",e)},ry:function(e){return this.rx(e)}}),e.Ellipse=e.invent({create:"ellipse",inherit:e.Shape,construct:{ellipse:function(t,n){return this.put(new e.Ellipse).size(t,n).move(0,0)}}}),e.extend(e.Ellipse,e.Rect,e.FX,{rx:function(e){return this.attr("rx",e)},ry:function(e){return this.attr("ry",e)}}),e.extend(e.Circle,e.Ellipse,{x:function(e){return e==null?this.cx()-this.rx():this.cx(e+this.rx())},y:function(e){return e==null?this.cy()-this.ry():this.cy(e+this.ry())},cx:function(t){return t==null?this.attr("cx"):this.attr("cx",(new e.Number(t)).divide(this.ctm().scaleX))},cy:function(t){return t==null?this.attr("cy"):this.attr("cy",(new e.Number(t)).divide(this.ctm().scaleY))},width:function(t){return t==null?this.rx()*2:this.rx((new e.Number(t)).divide(2))},height:function(t){return t==null?this.ry()*2:this.ry((new e.Number(t)).divide(2))},size:function(t,n){var r=o(this.bbox(),t,n);return this.rx((new e.Number(r.width)).divide(2)).ry((new e.Number(r.height)).divide(2))}}),e.Line=e.invent({create:"line",inherit:e.Shape,extend:{array:function(){return new e.PointArray([[this.attr("x1"),this.attr("y1")],[this.attr("x2"),this.attr("y2")]])},plot:function(t,n,r,i){return arguments.length==4?t={x1:t,y1:n,x2:r,y2:i}:t=(new e.PointArray(t)).toLine(),this.attr(t)},move:function(e,t){return this.attr(this.array().move(e,t).toLine())},size:function(e,t){var n=o(this.bbox(),e,t);return this.attr(this.array().size(n.width,n.height).toLine())}},construct:{line:function(t,n,r,i){return this.put(new e.Line).plot(t,n,r,i)}}}),e.Polyline=e.invent({create:"polyline",inherit:e.Shape,construct:{polyline:function(t){return this.put(new e.Polyline).plot(t)}}}),e.Polygon=e.invent({create:"polygon",inherit:e.Shape,construct:{polygon:function(t){return this.put(new e.Polygon).plot(t)}}}),e.extend(e.Polyline,e.Polygon,{array:function(){return this._array||(this._array=new e.PointArray(this.attr("points")))},plot:function(t){return this.attr("points",this._array=new e.PointArray(t))},move:function(e,t){return this.attr("points",this.array().move(e,t))},size:function(e,t){var n=o(this.bbox(),e,t);return this.attr("points",this.array().size(n.width,n.height))}}),e.extend(e.Line,e.Polyline,e.Polygon,{morphArray:e.PointArray,x:function(e){return e==null?this.bbox().x:this.move(e,this.bbox().y)},y:function(e){return e==null?this.bbox().y:this.move(this.bbox().x,e)},width:function(e){var t=this.bbox();return e==null?t.width:this.size(e,t.height)},height:function(e){var t=this.bbox();return e==null?t.height:this.size(t.width,e)}}),e.Path=e.invent({create:"path",inherit:e.Shape,extend:{morphArray:e.PathArray,array:function(){return this._array||(this._array=new e.PathArray(this.attr("d")))},plot:function(t){return this.attr("d",this._array=new e.PathArray(t))},move:function(e,t){return this.attr("d",this.array().move(e,t))},x:function(e){return e==null?this.bbox().x:this.move(e,this.bbox().y)},y:function(e){return e==null?this.bbox().y:this.move(this.bbox().x,e)},size:function(e,t){var n=o(this.bbox(),e,t);return this.attr("d",this.array().size(n.width,n.height))},width:function(e){return e==null?this.bbox().width:this.size(e,this.bbox().height)},height:function(e){return e==null?this.bbox().height:this.size(this.bbox().width,e)}},construct:{path:function(t){return this.put(new e.Path).plot(t)}}}),e.Image=e.invent({create:"image",inherit:e.Shape,extend:{load:function(t){if(!t)return this;var n=this,r=document.createElement("img");return r.onload=function(){var i=n.doc(e.Pattern);n.width()==0&&n.height()==0&&n.size(r.width,r.height),i&&i.width()==0&&i.height()==0&&i.size(n.width(),n.height()),typeof n._loaded=="function"&&n._loaded.call(n,{width:r.width,height:r.height,ratio:r.width/r.height,url:t})},this.attr("href",r.src=this.src=t,e.xlink)},loaded:function(e){return this._loaded=e,this}},construct:{image:function(t,n,r){return this.put(new e.Image).load(t).size(n||0,r||n||0)}}}),e.Text=e.invent({create:function(){this.constructor.call(this,e.create("text")),this._leading=new e.Number(1.3),this._rebuild=!0,this._build=!1,this.attr("font-family",e.defaults.attrs["font-family"])},inherit:e.Shape,extend:{x:function(e){return e==null?this.attr("x"):(this.textPath||this.lines.each(function(){this.newLined&&this.x(e)}),this.attr("x",e))},y:function(e){var t=this.attr("y"),n=typeof t=="number"?t-this.bbox().y:0;return e==null?typeof t=="number"?t-n:t:this.attr("y",typeof e=="number"?e+n:e)},cx:function(e){return e==null?this.bbox().cx:this.x(e-this.bbox().width/2)},cy:function(e){return e==null?this.bbox().cy:this.y(e-this.bbox().height/2)},text:function(e){if(typeof e=="undefined")return this.content;this.clear().build(!0);if(typeof e=="function")e.call(this,this);else{e=(this.content=e).split("\n");for(var t=0,n=e.length;t=0;r--)i[t[n][r]]!=null&&this.attr(t.prefix(n,t[n][r]),i[t[n][r]]);return this},e.extend(e.Element,e.FX,i)}),e.extend(e.Element,e.FX,{rotate:function(e,t,n){return this.transform({rotation:e,cx:t,cy:n})},skew:function(e,t){return this.transform({skewX:e,skewY:t})},scale:function(e,t,n,r){return this.transform({scaleX:e,scaleY:t,cx:n,cy:r})},translate:function(e,t){return this.transform({x:e,y:t})},matrix:function(t){return this.attr("transform",new e.Matrix(t))},opacity:function(e){return this.attr("opacity",e)}}),e.extend(e.Rect,e.Ellipse,e.Circle,e.FX,{radius:function(e,t){return this.rx(e).ry(t==null?e:t)}}),e.extend(e.Path,{length:function(){return this.node.getTotalLength()},pointAt:function(e){return this.node.getPointAtLength(e)}}),e.extend(e.Parent,e.Text,e.FX,{font:function(e){for(var t in e)t=="leading"?this.leading(e[t]):t=="anchor"?this.attr("text-anchor",e[t]):t=="size"||t=="family"||t=="weight"||t=="stretch"||t=="variant"||t=="style"?this.attr("font-"+t,e[t]):this.attr(t,e[t]);return this}}),e.Set=e.invent({create:function(e){Array.isArray(e)?this.members=e:this.clear()},extend:{add:function(){var e,t,n=[].slice.call(arguments);for(e=0,t=n.length;e-1&&this.members.splice(t,1),this},each:function(e){for(var t=0,n=this.members.length;t=0},index:function(e){return this.members.indexOf(e)},get:function(e){return this.members[e]},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 e.BBox;if(this.members.length==0)return t;var n=this.members[0].rbox();return t.x=n.x,t.y=n.y,t.width=n.width,t.height=n.height,this.each(function(){t=t.merge(this.rbox())}),t}},construct:{set:function(t){return new e.Set(t)}}}),e.SetFX=e.invent({create:function(e){this.set=e}}),e.Set.inherit=function(){var t,n=[];for(var t in e.Shape.prototype)typeof e.Shape.prototype[t]=="function"&&typeof e.Set.prototype[t]!="function"&&n.push(t);n.forEach(function(t){e.Set.prototype[t]=function(){for(var n=0,r=this.members.length;n=0;e--)delete this.memory()[arguments[e]];return this},memory:function(){return this._memory||(this._memory={})}}),e.get=function(t){var n=document.getElementById(d(t)||t);if(n)return e.adopt(n)},e.select=function(t,n){return new e.Set(e.utils.map((n||document).querySelectorAll(t),function(t){return e.adopt(t)}))},e.extend(e.Parent,{select:function(t){return e.select(t,this.node)}}),typeof define=="function"&&define.amd?define(function(){return e}):typeof exports!="undefined"&&(exports.SVG=e);var v="abcdef".split("");window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||function(e){window.setTimeout(e,1e3/60)}}();if(typeof m!="function"){function m(e,t){t=t||{bubbles:!1,cancelable:!1,detail:undefined};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n}m.prototype=window.Event.prototype,window.CustomEvent=m}}).call(this); \ No newline at end of file +/* svg.js 1.0.0-rc.10-20-g462d2cd - svg inventor adopter regex utilities default color array pointarray patharray number viewbox element boxes matrix attr transform style parent container transporter 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(){function n(e){return e.toLowerCase().replace(/-(.)/g,function(e,t){return t.toUpperCase()})}function r(e){return e.charAt(0).toUpperCase()+e.slice(1)}function i(e){return e.length==4?["#",e.substring(1,2),e.substring(1,2),e.substring(2,3),e.substring(2,3),e.substring(3,4),e.substring(3,4)].join(""):e}function s(e){var t=e.toString(16);return t.length==1?"0"+t:t}function o(e,t,n){if(t==null||n==null)n==null?n=e.height/e.width*t:t==null&&(t=e.width/e.height*n);return{width:t,height:n}}function u(e,t){return{x:t.x*e.a+t.y*e.c+0,y:t.x*e.b+t.y*e.d+0}}function a(e){return{a:e[0],b:e[1],c:e[2],d:e[3],e:e[4],f:e[5]}}function f(t,n){return typeof t.from=="number"?t.from+(t.to-t.from)*n:t instanceof e.Color||t instanceof e.Number?t.at(n):n<1?t.from:t.to}function l(e){for(var t=0,n=e.length,r="";t=0;n--)t.childNodes[n]instanceof SVGElement&&c(t.childNodes[n]);return e.adopt(t).id(e.eid(t.nodeName))}function h(e){return e.x2=e.x+e.width,e.y2=e.y+e.height,e.cx=e.x+e.width/2,e.cy=e.y+e.height/2,e}function p(e){if(e.matrix){var t=e.matrix.replace(/\s/g,"").split(",");t.length==6&&(e.a=parseFloat(t[0]),e.b=parseFloat(t[1]),e.c=parseFloat(t[2]),e.d=parseFloat(t[3]),e.e=parseFloat(t[4]),e.f=parseFloat(t[5]))}return e}function d(t){var n=t.toString().match(e.regex.reference);if(n)return n[1]}var e=this.SVG=function(t){if(e.supported)return t=new e.Doc(t),e.parser||e.prepare(t),t};e.ns="http://www.w3.org/2000/svg",e.xmlns="http://www.w3.org/2000/xmlns/",e.xlink="http://www.w3.org/1999/xlink",e.did=1e3,e.eid=function(t){return"Svgjs"+r(t)+e.did++},e.create=function(e){var t=document.createElementNS(this.ns,e);return t.setAttribute("id",this.eid(e)),t},e.extend=function(){var t,n,r,i;t=[].slice.call(arguments),n=t.pop();for(i=t.length-1;i>=0;i--)if(t[i])for(r in n)t[i].prototype[r]=n[r];e.Set&&e.Set.inherit&&e.Set.inherit()},e.prepare=function(t){var n=document.getElementsByTagName("body")[0],r=(n?new e.Doc(n):t.nested()).size(2,0),i=e.create("path");r.node.appendChild(i),e.parser={body:n||t.parent(),draw:r.style("opacity:0;position:fixed;left:100%;top:100%;overflow:hidden"),poly:r.polyline().node,path:i}},e.supported=function(){return!!document.createElementNS&&!!document.createElementNS(e.ns,"svg").createSVGRect}();if(!e.supported)return!1;e.invent=function(t){var n=typeof t.create=="function"?t.create:function(){this.constructor.call(this,e.create(t.create))};return t.inherit&&(n.prototype=new t.inherit),t.extend&&e.extend(n,t.extend),t.construct&&e.extend(t.parent||e.Container,t.construct),n},e.adopt=function(t){if(t.instance)return t.instance;var n;return t.nodeName=="svg"?n=t.parentNode instanceof SVGElement?new e.Nested:new e.Doc:t.nodeName=="lineairGradient"?n=new e.Gradient("lineair"):t.nodeName=="radialGradient"?n=new e.Gradient("radial"):e[r(t.nodeName)]?n=new(e[r(t.nodeName)]):n=new e.Element(t),n.type=t.nodeName,n.node=t,t.instance=n,n instanceof e.Doc&&n.namespace().defs(),n},e.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]+$/},e.utils={map:function(e,t){var n,r=e.length,i=[];for(n=0;n1?1:t,new e.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}}),e.Color.test=function(t){return t+="",e.regex.isHex.test(t)||e.regex.isRgb.test(t)},e.Color.isRgb=function(e){return e&&typeof e.r=="number"&&typeof e.g=="number"&&typeof e.b=="number"},e.Color.isColor=function(t){return e.Color.isRgb(t)||e.Color.test(t)},e.Array=function(e,t){e=(e||[]).valueOf(),e.length==0&&t&&(e=t.valueOf()),this.value=this.parse(e)},e.extend(e.Array,{morph:function(e){this.destination=this.parse(e);if(this.value.length!=this.destination.length){var t=this.value[this.value.length-1],n=this.destination[this.destination.length-1];while(this.value.length>this.destination.length)this.destination.push(n);while(this.value.length=0;r--)this.value[r]=[this.value[r][0]+e,this.value[r][1]+t];return this},size:function(e,t){var n,r=this.bbox();for(n=this.value.length-1;n>=0;n--)this.value[n][0]=(this.value[n][0]-r.x)*e/r.width+r.x,this.value[n][1]=(this.value[n][1]-r.y)*t/r.height+r.y;return this},bbox:function(){return e.parser.poly.setAttribute("points",this.toString()),e.parser.poly.getBBox()}}),e.PathArray=function(e,t){this.constructor.call(this,e,t||[["M",0,0]])},e.PathArray.prototype=new e.Array,e.extend(e.PathArray,{toString:function(){return l(this.value)},move:function(e,t){var n=this.bbox();e-=n.x,t-=n.y;if(!isNaN(e)&&!isNaN(t))for(var r,i=this.value.length-1;i>=0;i--)r=this.value[i][0],r=="M"||r=="L"||r=="T"?(this.value[i][1]+=e,this.value[i][2]+=t):r=="H"?this.value[i][1]+=e:r=="V"?this.value[i][1]+=t:r=="C"||r=="S"||r=="Q"?(this.value[i][1]+=e,this.value[i][2]+=t,this.value[i][3]+=e,this.value[i][4]+=t,r=="C"&&(this.value[i][5]+=e,this.value[i][6]+=t)):r=="A"&&(this.value[i][6]+=e,this.value[i][7]+=t);return this},size:function(e,t){var n,r,i=this.bbox();for(n=this.value.length-1;n>=0;n--)r=this.value[n][0],r=="M"||r=="L"||r=="T"?(this.value[n][1]=(this.value[n][1]-i.x)*e/i.width+i.x,this.value[n][2]=(this.value[n][2]-i.y)*t/i.height+i.y):r=="H"?this.value[n][1]=(this.value[n][1]-i.x)*e/i.width+i.x:r=="V"?this.value[n][1]=(this.value[n][1]-i.y)*t/i.height+i.y:r=="C"||r=="S"||r=="Q"?(this.value[n][1]=(this.value[n][1]-i.x)*e/i.width+i.x,this.value[n][2]=(this.value[n][2]-i.y)*t/i.height+i.y,this.value[n][3]=(this.value[n][3]-i.x)*e/i.width+i.x,this.value[n][4]=(this.value[n][4]-i.y)*t/i.height+i.y,r=="C"&&(this.value[n][5]=(this.value[n][5]-i.x)*e/i.width+i.x,this.value[n][6]=(this.value[n][6]-i.y)*t/i.height+i.y)):r=="A"&&(this.value[n][1]=this.value[n][1]*e/i.width,this.value[n][2]=this.value[n][2]*t/i.height,this.value[n][6]=(this.value[n][6]-i.x)*e/i.width+i.x,this.value[n][7]=(this.value[n][7]-i.y)*t/i.height+i.y);return this},parse:function(t){if(t instanceof e.PathArray)return t.valueOf();var n,r,i,s,o,u,a,f,c,h,p,d=0,v=0;e.parser.path.setAttribute("d",typeof t=="string"?t:l(t)),p=e.parser.path.pathSegList;for(n=0,r=p.numberOfItems;ni/s?this.height/s:this.width/i,this.x=n,this.y=r,this.width=i,this.height=s)},e.extend(e.ViewBox,{toString:function(){return this.x+" "+this.y+" "+this.width+" "+this.height}}),e.Element=e.invent({create:function(t){this._stroke=e.defaults.attrs.stroke;if(this.node=t)this.type=t.nodeName,this.node.instance=this,this._stroke=t.getAttribute("stroke")||this._stroke},extend:{x:function(t){return t!=null&&(t=new e.Number(t),t.value/=this.transform("scaleX")),this.attr("x",t)},y:function(t){return t!=null&&(t=new e.Number(t),t.value/=this.transform("scaleY")),this.attr("y",t)},cx:function(e){return e==null?this.x()+this.width()/2:this.x(e-this.width()/2)},cy:function(e){return e==null?this.y()+this.height()/2:this.y(e-this.height()/2)},move:function(e,t){return this.x(e).y(t)},center:function(e,t){return this.cx(e).cy(t)},width:function(e){return this.attr("width",e)},height:function(e){return this.attr("height",e)},size:function(t,n){var r=o(this.bbox(),t,n);return this.width(new e.Number(r.width)).height(new e.Number(r.height))},clone:function(){return c(this.node.cloneNode(!0))},remove:function(){return this.parent()&&this.parent().removeElement(this),this},replace:function(e){return this.after(e).remove(),e},addTo:function(e){return e.put(this)},putIn:function(e){return e.add(this)},id:function(e){return this.attr("id",e)},inside:function(e,t){var n=this.bbox();return e>n.x&&t>n.y&&e=0;t--)this[v[t]]=typeof e[v[t]]=="number"?e[v[t]]:n[v[t]]},extend:{extract:function(){var e=u(this,{x:0,y:1}),t=u(this,{x:1,y:0}),n=180/Math.PI*Math.atan2(e.y,e.x)-90;return{x:this.e,y:this.f,skewX:n,skewY:180/Math.PI*Math.atan2(t.y,t.x),scaleX:Math.sqrt(this.a*this.a+this.b*this.b),scaleY:Math.sqrt(this.c*this.c+this.d*this.d),rotation:n}},multiply:function(t){return new e.Matrix(this.native().multiply(t.native()))},inverse:function(){return new e.Matrix(this.native().inverse())},translate:function(t,n){return new e.Matrix(this.native().translate(t||0,n||0))},scale:function(t,n,r,i){return n==null?new e.Matrix(this.native().scale(t)):new e.Matrix(this.native().scaleNonUniform(t,n))},rotate:function(t,n,r){return t=e.utils.radians(t),(new e.Matrix(1,0,0,1,n,r)).multiply(new e.Matrix(Math.cos(t),Math.sin(t),-Math.sin(t),Math.cos(t),0,0)).multiply(new e.Matrix(1,0,0,1,-n,-r))},flip:function(t){return new e.Matrix(this.native()["flip"+t.toUpperCase()]())},skew:function(t,n){return new e.Matrix(this.native().skewX(t||0).skewY(n||0))},"native":function(){var t,n=e.parser.draw.node.createSVGMatrix();for(t=v.length-1;t>=0;t--)n[v[t]]=this[v[t]];return n},toString:function(){return"matrix("+[this.a,this.b,this.c,this.d,this.e,this.f].join()+")"}},parent:e.Element,construct:{ctm:function(){return new e.Matrix(this)}}}),e.extend(e.Element,{attr:function(t,n,r){if(t==null){t={},n=this.node.attributes;for(r=n.length-1;r>=0;r--)t[n[r].nodeName]=e.regex.isNumber.test(n[r].nodeValue)?parseFloat(n[r].nodeValue):n[r].nodeValue;return t}if(typeof t=="object")for(n in t)this.attr(n,t[n]);else if(n===null)this.node.removeAttribute(t);else{if(n==null)return n=this.node.getAttribute(t),n==null?e.defaults.attrs[t]:e.regex.isNumber.test(n)?parseFloat(n):n;t=="stroke-width"?this.attr("stroke",parseFloat(n)>0?this._stroke:null):t=="stroke"&&(this._stroke=n);if(t=="fill"||t=="stroke")e.regex.isImage.test(n)&&(n=this.doc().defs().image(n,0,0)),n instanceof e.Image&&(n=this.doc().defs().pattern(0,0,function(){this.add(n)}));typeof n=="number"?n=new e.Number(n):e.Color.isColor(n)?n=new e.Color(n):Array.isArray(n)&&(n=new e.Array(n)),t=="leading"?this.leading&&this.leading(n):typeof r=="string"?this.node.setAttributeNS(r,t,n.toString()):this.node.setAttribute(t,n.toString()),this.rebuild&&(t=="font-size"||t=="x")&&this.rebuild(t,n)}return this}}),e.extend(e.Element,{transform:function(t){if(t==null)return this.ctm().extract();if(typeof t=="string")return this.ctm().extract()[t];var n=new e.Matrix(this);if(t.a!=null)n=n.multiply(new e.Matrix(t));else if(t.rotation)n=n.rotate(t.rotation,t.cx==null?this.bbox().cx:t.cx,t.cy==null?this.bbox().cy:t.cy);else if(t.scale!=null||t.scaleX!=null||t.scaleY!=null)n=n.scale(t.scale!=null?t.scale:t.scaleX!=null?t.scaleX:1,t.scale!=null?t.scale:t.scaleY!=null?t.scaleY:1,t.cx!=null?t.cx:this.bbox().x,t.cy!=null?t.cy:this.bbox().y);else if(t.skewX||t.skewY)n=n.skew(t.skewX,t.skewY);else if(t.x||t.y)n=n.translate(t.x,t.y);return this.attr("transform",n)},untransform:function(){return this.attr("transform",null)}}),e.extend(e.Element,{style:function(t,r){if(arguments.length==0)return this.node.style.cssText||"";if(arguments.length<2)if(typeof t=="object")for(r in t)this.style(r,t[r]);else{if(!e.regex.isCss.test(t))return this.node.style[n(t)];t=t.split(";");for(var i=0;i=0},index:function(e){return this.children().indexOf(e)},get:function(e){return this.children()[e]},first:function(){return this.children()[0]},last:function(){return this.children()[this.children().length-1]},each:function(t,n){var r,i,s=this.children();for(r=0,i=s.length;r/g,"<$1$2>"),t.innerHTML=""+e+"";for(var n=t.firstChild.childNodes.length-1;n>=0;n--)t.firstChild.childNodes[n].nodeType==1&&this.node.appendChild(t.firstChild.childNodes[n]);return this}var r=this.node.cloneNode(!0);return t.appendChild(r),t.innerHTML}}),e.FX=e.invent({create:function(e){this.target=e},extend:{animate:function(t,n,r){var i,s,o,u,a=this.target,l=this;return typeof t=="object"&&(r=t.delay,n=t.ease,t=t.duration),t=t=="="?t:t==null?1e3:(new e.Number(t)).valueOf(),n=n||"<>",l.to=function(e){var t;e=e<0?0:e>1?1:e;if(i==null){i=[];for(u in l.attrs)i.push(u);if(a.morphArray&&(l._plot||i.indexOf("points")>-1)){var r,c=new a.morphArray(l._plot||l.attrs.points||a.array);l._size&&c.size(l._size.width.to,l._size.height.to),r=c.bbox(),l._x?c.move(l._x.to,r.y):l._cx&&c.move(l._cx.to-r.width/2,r.y),r=c.bbox(),l._y?c.move(r.x,l._y.to):l._cy&&c.move(r.x,l._cy.to-r.height/2),delete l._x,delete l._y,delete l._cx,delete l._cy,delete l._size,l._plot=a.array.morph(c)}}if(s==null){s=[];for(u in l.trans)s.push(u)}if(o==null){o=[];for(u in l.styles)o.push(u)}e=n=="<>"?-Math.cos(e*Math.PI)/2+.5:n==">"?Math.sin(e*Math.PI/2):n=="<"?-Math.cos(e*Math.PI/2)+1:n=="-"?e:typeof n=="function"?n(e):e,l._plot?a.plot(l._plot.at(e)):(l._x?a.x(l._x.at(e)):l._cx&&a.cx(l._cx.at(e)),l._y?a.y(l._y.at(e)):l._cy&&a.cy(l._cy.at(e)),l._size&&a.size(l._size.width.at(e),l._size.height.at(e))),l._viewbox&&a.viewbox(l._viewbox.x.at(e),l._viewbox.y.at(e),l._viewbox.width.at(e),l._viewbox.height.at(e)),l._leading&&a.leading(l._leading.at(e));for(t=i.length-1;t>=0;t--)a.attr(i[t],f(l.attrs[i[t]],e));for(t=s.length-1;t>=0;t--)a.transform(s[t],f(l.trans[s[t]],e));for(t=o.length-1;t>=0;t--)a.style(o[t],f(l.styles[o[t]],e));l._during&&l._during.call(a,e,function(t,n){return f({from:t,to:n},e)})},typeof t=="number"&&(this.timeout=setTimeout(function(){var i=(new Date).getTime();l.situation={interval:1e3/60,start:i,play:!0,finish:i+t,duration:t},l.render=function(){if(l.situation.play===!0){var i=(new Date).getTime(),s=i>l.situation.finish?1:(i-l.situation.start)/t;l.to(s),i>l.situation.finish?(l._plot&&a.plot((new e.PointArray(l._plot.destination)).settle()),l._loop===!0||typeof l._loop=="number"&&l._loop>1?(typeof l._loop=="number"&&--l._loop,l.animate(t,n,r)):l._after?l._after.apply(a,[l]):l.stop()):requestAnimFrame(l.render)}else requestAnimFrame(l.render)},l.render()},(new e.Number(r)).valueOf())),this},bbox:function(){return this.target.bbox()},attr:function(t,n){if(typeof t=="object")for(var r in t)this.attr(r,t[r]);else{var i=this.target.attr(t);this.attrs[t]=e.Color.isColor(i)?(new e.Color(i)).morph(n):e.regex.unit.test(i)?(new e.Number(i)).morph(n):{from:i,to:n}}return this},transform:function(e,t){if(arguments.length==1){e=p(e),delete e.matrix;for(t in e)this.trans[t]={from:this.target.trans[t],to:e[t]}}else{var n={};n[e]=t,this.transform(n)}return this},style:function(e,t){if(typeof e=="object")for(var n in e)this.style(n,e[n]);else this.styles[e]={from:this.target.style(e),to:t};return this},x:function(t){return this._x=(new e.Number(this.target.x())).morph(t),this},y:function(t){return this._y=(new e.Number(this.target.y())).morph(t),this},cx:function(t){return this._cx=(new e.Number(this.target.cx())).morph(t),this},cy:function(t){return this._cy=(new e.Number(this.target.cy())).morph(t),this},move:function(e,t){return this.x(e).y(t)},center:function(e,t){return this.cx(e).cy(t)},size:function(t,n){if(this.target instanceof e.Text)this.attr("font-size",t);else{var r=this.target.bbox();this._size={width:(new e.Number(r.width)).morph(t),height:(new e.Number(r.height)).morph(n)}}return this},plot:function(e){return this._plot=e,this},leading:function(t){return this.target._leading&&(this._leading=(new e.Number(this.target._leading)).morph(t)),this},viewbox:function(t,n,r,i){if(this.target instanceof e.Container){var s=this.target.viewbox();this._viewbox={x:(new e.Number(s.x)).morph(t),y:(new e.Number(s.y)).morph(n),width:(new e.Number(s.width)).morph(r),height:(new e.Number(s.height)).morph(i)}}return this},update:function(t){return this.target instanceof e.Stop&&(t.opacity!=null&&this.attr("stop-opacity",t.opacity),t.color!=null&&this.attr("stop-color",t.color),t.offset!=null&&this.attr("offset",new e.Number(t.offset))),this},during:function(e){return this._during=e,this},after:function(e){return this._after=e,this},loop:function(e){return this._loop=e||!0,this},stop:function(e){return e===!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 e=(new Date).getTime()-this.situation.pause;this.situation.finish+=e,this.situation.start+=e,this.situation.play=!0}return this}},parent:e.Element,construct:{animate:function(t,n,r){return(this.fx||(this.fx=new e.FX(this))).stop().animate(t,n,r)},stop:function(e){return this.fx&&this.fx.stop(e),this},pause:function(){return this.fx&&this.fx.pause(),this},play:function(){return this.fx&&this.fx.play(),this}}}),e.extend(e.Element,e.FX,{dx:function(e){return this.x((this.target||this).x()+e)},dy:function(e){return this.y((this.target||this).y()+e)},dmove:function(e,t){return this.dx(e).dy(t)}}),["click","dblclick","mousedown","mouseup","mouseover","mouseout","mousemove","mouseenter","mouseleave","touchstart","touchmove","touchleave","touchend","touchcancel"].forEach(function(t){e.Element.prototype[t]=function(e){var n=this;return this.node["on"+t]=typeof e=="function"?function(){return e.apply(n,arguments)}:null,this}}),e.events={},e.listeners={},e.registerEvent=function(t){e.events[t]||(e.events[t]=new m(t))},e.on=function(t,n,r){var i=r.bind(t.instance||t);e.listeners[r]=i,t.addEventListener(n,i,!1)},e.off=function(t,n,r){t.removeEventListener(n,e.listeners[r],!1),delete e.listeners[r]},e.extend(e.Element,{on:function(t,n){return e.on(this.node,t,n),this},off:function(t,n){return e.off(this.node,t,n),this},fire:function(t,n){return e.events[t].detail=n,this.node.dispatchEvent(e.events[t]),delete e.events[t].detail,this}}),e.Defs=e.invent({create:"defs",inherit:e.Container}),e.G=e.invent({create:"g",inherit:e.Container,extend:{x:function(e){return e==null?this.ctm().x:this.transform("x",e)},y:function(e){return e==null?this.ctm().y:this.transform("y",e)},cx:function(e){return e==null?this.bbox().cx:this.x(e-this.bbox().width/2)},cy:function(e){return e==null?this.bbox().cy:this.y(e-this.bbox().height/2)}},construct:{group:function(){return this.put(new e.G)}}}),e.extend(e.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,n=this.parent();return n.removeElement(this).add(this,t),n instanceof e.Doc&&n.node.appendChild(n.defs().node),this},backward:function(){var e=this.position();return e>0&&this.parent().removeElement(this).add(this,e-1),this},front:function(){var t=this.parent();return t.node.appendChild(this.node),t instanceof e.Doc&&t.node.appendChild(t.defs().node),this},back:function(){return this.position()>0&&this.parent().removeElement(this).add(this,0),this},before:function(e){e.remove();var t=this.position();return this.parent().add(e,t),this},after:function(e){e.remove();var t=this.position();return this.parent().add(e,t+1),this}}),e.Mask=e.invent({create:function(){this.constructor.call(this,e.create("mask")),this.targets=[]},inherit:e.Container,extend:{remove:function(){for(var e=this.targets.length-1;e>=0;e--)this.targets[e]&&this.targets[e].unmask();return delete this.targets,this.parent().removeElement(this),this}},construct:{mask:function(){return this.defs().put(new e.Mask)}}}),e.extend(e.Element,{maskWith:function(t){return this.masker=t instanceof e.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)}}),e.ClipPath=e.invent({create:function(){this.constructor.call(this,e.create("clipPath")),this.targets=[]},inherit:e.Container,extend:{remove:function(){for(var e=this.targets.length-1;e>=0;e--)this.targets[e]&&this.targets[e].unclip();return delete this.targets,this.parent().removeElement(this),this}},construct:{clip:function(){return this.defs().put(new e.ClipPath)}}}),e.extend(e.Element,{clipWith:function(t){return this.clipper=t instanceof e.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)}}),e.Gradient=e.invent({create:function(t){this.constructor.call(this,e.create(t+"Gradient")),this.type=t},inherit:e.Container,extend:{from:function(t,n){return this.type=="radial"?this.attr({fx:new e.Number(t),fy:new e.Number(n)}):this.attr({x1:new e.Number(t),y1:new e.Number(n)})},to:function(t,n){return this.type=="radial"?this.attr({cx:new e.Number(t),cy:new e.Number(n)}):this.attr({x2:new e.Number(t),y2:new e.Number(n)})},radius:function(t){return this.type=="radial"?this.attr({r:new e.Number(t)}):this},at:function(t,n,r){return this.put(new e.Stop).update(t,n,r)},update:function(e){return this.clear(),typeof e=="function"&&e.call(this,this),this},fill:function(){return"url(#"+this.id()+")"},toString:function(){return this.fill()}},construct:{gradient:function(e,t){return this.defs().gradient(e,t)}}}),e.extend(e.Defs,{gradient:function(t,n){return this.put(new e.Gradient(t)).update(n)}}),e.Stop=e.invent({create:"stop",inherit:e.Element,extend:{update:function(t){if(typeof t=="number"||t instanceof e.Number)t={offset:arguments[0],color:arguments[1],opacity:arguments[2]};return t.opacity!=null&&this.attr("stop-opacity",t.opacity),t.color!=null&&this.attr("stop-color",t.color),t.offset!=null&&this.attr("offset",new e.Number(t.offset)),this}}}),e.Pattern=e.invent({create:"pattern",inherit:e.Container,extend:{fill:function(){return"url(#"+this.id()+")"},update:function(e){return this.clear(),typeof e=="function"&&e.call(this,this),this},toString:function(){return this.fill()}},construct:{pattern:function(e,t,n){return this.defs().pattern(e,t,n)}}}),e.extend(e.Defs,{pattern:function(t,n,r){return this.put(new e.Pattern).update(r).attr({x:0,y:0,width:t,height:n,patternUnits:"userSpaceOnUse" +})}}),e.Doc=e.invent({create:function(t){t&&(t=typeof t=="string"?document.getElementById(t):t,t.nodeName=="svg"?this.constructor.call(this,t):(this.constructor.call(this,e.create("svg")),t.appendChild(this.node)),this.namespace().size("100%","100%").defs())},inherit:e.Container,extend:{namespace:function(){return this.attr({xmlns:e.ns,version:"1.1"}).attr("xmlns:xlink",e.xlink,e.xmlns)},defs:function(){if(!this._defs){var t;(t=this.node.getElementsByTagName("defs")[0])?this._defs=e.adopt(t):this._defs=new e.Defs,this.node.appendChild(this._defs.node)}return this._defs},parent:function(){return this.node.parentNode.nodeName=="#document"?null:this.node.parentNode}}}),e.extend(e.Doc,{spof:function(){if(this.doSpof){var e=this.node.getScreenCTM();e&&this.style("left",-e.e%1+"px").style("top",-e.f%1+"px")}return this},fixSubPixelOffset:function(){var t=this;return this.doSpof=!0,e.on(window,"resize",function(){t.spof()}),this.spof()}}),e.Shape=e.invent({create:function(e){this.constructor.call(this,e)},inherit:e.Element}),e.Symbol=e.invent({create:"symbol",inherit:e.Container,construct:{symbol:function(){return this.defs().put(new e.Symbol)}}}),e.Use=e.invent({create:"use",inherit:e.Shape,extend:{element:function(t){return this.target=t,this.attr("href","#"+t,e.xlink)}},construct:{use:function(t){return this.put(new e.Use).element(t)}}}),e.Rect=e.invent({create:"rect",inherit:e.Shape,construct:{rect:function(t,n){return this.put((new e.Rect).size(t,n))}}}),e.Circle=e.invent({create:"circle",inherit:e.Shape,construct:{circle:function(t){return this.put(new e.Circle).rx((new e.Number(t)).divide(2)).move(0,0)}}}),e.extend(e.Circle,e.FX,{rx:function(e){return this.attr("r",e)},ry:function(e){return this.rx(e)}}),e.Ellipse=e.invent({create:"ellipse",inherit:e.Shape,construct:{ellipse:function(t,n){return this.put(new e.Ellipse).size(t,n).move(0,0)}}}),e.extend(e.Ellipse,e.Rect,e.FX,{rx:function(e){return this.attr("rx",e)},ry:function(e){return this.attr("ry",e)}}),e.extend(e.Circle,e.Ellipse,{x:function(e){return e==null?this.cx()-this.rx():this.cx(e+this.rx())},y:function(e){return e==null?this.cy()-this.ry():this.cy(e+this.ry())},cx:function(t){return t==null?this.attr("cx"):this.attr("cx",(new e.Number(t)).divide(this.transform("scaleX")))},cy:function(t){return t==null?this.attr("cy"):this.attr("cy",(new e.Number(t)).divide(this.transform("scaleY")))},width:function(t){return t==null?this.rx()*2:this.rx((new e.Number(t)).divide(2))},height:function(t){return t==null?this.ry()*2:this.ry((new e.Number(t)).divide(2))},size:function(t,n){var r=o(this.bbox(),t,n);return this.rx((new e.Number(r.width)).divide(2)).ry((new e.Number(r.height)).divide(2))}}),e.Line=e.invent({create:"line",inherit:e.Shape,extend:{array:function(){return new e.PointArray([[this.attr("x1"),this.attr("y1")],[this.attr("x2"),this.attr("y2")]])},plot:function(t,n,r,i){return arguments.length==4?t={x1:t,y1:n,x2:r,y2:i}:t=(new e.PointArray(t)).toLine(),this.attr(t)},move:function(e,t){return this.attr(this.array().move(e,t).toLine())},size:function(e,t){var n=o(this.bbox(),e,t);return this.attr(this.array().size(n.width,n.height).toLine())}},construct:{line:function(t,n,r,i){return this.put(new e.Line).plot(t,n,r,i)}}}),e.Polyline=e.invent({create:"polyline",inherit:e.Shape,construct:{polyline:function(t){return this.put(new e.Polyline).plot(t)}}}),e.Polygon=e.invent({create:"polygon",inherit:e.Shape,construct:{polygon:function(t){return this.put(new e.Polygon).plot(t)}}}),e.extend(e.Polyline,e.Polygon,{array:function(){return this._array||(this._array=new e.PointArray(this.attr("points")))},plot:function(t){return this.attr("points",this._array=new e.PointArray(t))},move:function(e,t){return this.attr("points",this.array().move(e,t))},size:function(e,t){var n=o(this.bbox(),e,t);return this.attr("points",this.array().size(n.width,n.height))}}),e.extend(e.Line,e.Polyline,e.Polygon,{morphArray:e.PointArray,x:function(e){return e==null?this.bbox().x:this.move(e,this.bbox().y)},y:function(e){return e==null?this.bbox().y:this.move(this.bbox().x,e)},width:function(e){var t=this.bbox();return e==null?t.width:this.size(e,t.height)},height:function(e){var t=this.bbox();return e==null?t.height:this.size(t.width,e)}}),e.Path=e.invent({create:"path",inherit:e.Shape,extend:{morphArray:e.PathArray,array:function(){return this._array||(this._array=new e.PathArray(this.attr("d")))},plot:function(t){return this.attr("d",this._array=new e.PathArray(t))},move:function(e,t){return this.attr("d",this.array().move(e,t))},x:function(e){return e==null?this.bbox().x:this.move(e,this.bbox().y)},y:function(e){return e==null?this.bbox().y:this.move(this.bbox().x,e)},size:function(e,t){var n=o(this.bbox(),e,t);return this.attr("d",this.array().size(n.width,n.height))},width:function(e){return e==null?this.bbox().width:this.size(e,this.bbox().height)},height:function(e){return e==null?this.bbox().height:this.size(this.bbox().width,e)}},construct:{path:function(t){return this.put(new e.Path).plot(t)}}}),e.Image=e.invent({create:"image",inherit:e.Shape,extend:{load:function(t){if(!t)return this;var n=this,r=document.createElement("img");return r.onload=function(){var i=n.doc(e.Pattern);n.width()==0&&n.height()==0&&n.size(r.width,r.height),i&&i.width()==0&&i.height()==0&&i.size(n.width(),n.height()),typeof n._loaded=="function"&&n._loaded.call(n,{width:r.width,height:r.height,ratio:r.width/r.height,url:t})},this.attr("href",r.src=this.src=t,e.xlink)},loaded:function(e){return this._loaded=e,this}},construct:{image:function(t,n,r){return this.put(new e.Image).load(t).size(n||0,r||n||0)}}}),e.Text=e.invent({create:function(){this.constructor.call(this,e.create("text")),this._leading=new e.Number(1.3),this._rebuild=!0,this._build=!1,this.attr("font-family",e.defaults.attrs["font-family"])},inherit:e.Shape,extend:{x:function(e){return e==null?this.attr("x"):(this.textPath||this.lines.each(function(){this.newLined&&this.x(e)}),this.attr("x",e))},y:function(e){var t=this.attr("y"),n=typeof t=="number"?t-this.bbox().y:0;return e==null?typeof t=="number"?t-n:t:this.attr("y",typeof e=="number"?e+n:e)},cx:function(e){return e==null?this.bbox().cx:this.x(e-this.bbox().width/2)},cy:function(e){return e==null?this.bbox().cy:this.y(e-this.bbox().height/2)},text:function(e){if(typeof e=="undefined")return this.content;this.clear().build(!0);if(typeof e=="function")e.call(this,this);else{e=(this.content=e).split("\n");for(var t=0,n=e.length;t=0;r--)i[t[n][r]]!=null&&this.attr(t.prefix(n,t[n][r]),i[t[n][r]]);return this},e.extend(e.Element,e.FX,i)}),e.extend(e.Element,e.FX,{rotate:function(e,t,n){return this.transform({rotation:e,cx:t,cy:n})},skew:function(e,t){return this.transform({skewX:e,skewY:t})},scale:function(e,t,n,r){return this.transform({scaleX:e,scaleY:t,cx:n,cy:r})},translate:function(e,t){return this.transform({x:e,y:t})},matrix:function(t){return this.attr("transform",new e.Matrix(t))},opacity:function(e){return this.attr("opacity",e)}}),e.extend(e.Rect,e.Ellipse,e.Circle,e.FX,{radius:function(e,t){return this.rx(e).ry(t==null?e:t)}}),e.extend(e.Path,{length:function(){return this.node.getTotalLength()},pointAt:function(e){return this.node.getPointAtLength(e)}}),e.extend(e.Parent,e.Text,e.FX,{font:function(e){for(var t in e)t=="leading"?this.leading(e[t]):t=="anchor"?this.attr("text-anchor",e[t]):t=="size"||t=="family"||t=="weight"||t=="stretch"||t=="variant"||t=="style"?this.attr("font-"+t,e[t]):this.attr(t,e[t]);return this}}),e.Set=e.invent({create:function(e){Array.isArray(e)?this.members=e:this.clear()},extend:{add:function(){var e,t,n=[].slice.call(arguments);for(e=0,t=n.length;e-1&&this.members.splice(t,1),this},each:function(e){for(var t=0,n=this.members.length;t=0},index:function(e){return this.members.indexOf(e)},get:function(e){return this.members[e]},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 e.BBox;if(this.members.length==0)return t;var n=this.members[0].rbox();return t.x=n.x,t.y=n.y,t.width=n.width,t.height=n.height,this.each(function(){t=t.merge(this.rbox())}),t}},construct:{set:function(t){return new e.Set(t)}}}),e.SetFX=e.invent({create:function(e){this.set=e}}),e.Set.inherit=function(){var t,n=[];for(var t in e.Shape.prototype)typeof e.Shape.prototype[t]=="function"&&typeof e.Set.prototype[t]!="function"&&n.push(t);n.forEach(function(t){e.Set.prototype[t]=function(){for(var n=0,r=this.members.length;n=0;e--)delete this.memory()[arguments[e]];return this},memory:function(){return this._memory||(this._memory={})}}),e.get=function(t){var n=document.getElementById(d(t)||t);if(n)return e.adopt(n)},e.select=function(t,n){return new e.Set(e.utils.map((n||document).querySelectorAll(t),function(t){return e.adopt(t)}))},e.extend(e.Parent,{select:function(t){return e.select(t,this.node)}}),typeof define=="function"&&define.amd?define(function(){return e}):typeof exports!="undefined"&&(exports.SVG=e);var v="abcdef".split("");window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||function(e){window.setTimeout(e,1e3/60)}}();if(typeof m!="function"){function m(e,t){t=t||{bubbles:!1,cancelable:!1,detail:undefined};var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n}m.prototype=window.Event.prototype,window.CustomEvent=m}}).call(this); \ No newline at end of file diff --git a/spec/spec/element.js b/spec/spec/element.js index 0611210..d6988fb 100755 --- a/spec/spec/element.js +++ b/spec/spec/element.js @@ -86,7 +86,6 @@ describe('Element', function() { }) it('correctly parses negative numeric values as a global getter', function() { rect.x(-30) - console.log(rect.native()) expect(rect.attr().x).toBe(-30) }) it('leaves unit values alone as a global getter', function() { @@ -166,16 +165,17 @@ describe('Element', function() { expect(rect.node.getAttribute('transform')).toBe('matrix(1,-0.17632698070846498,0,1,0,0)') }) it('rotates the element around its centre if no rotation point is given', function() { - var rect = draw.rect(100,100).transform({ rotation: 45 }) - expect(rect.node.getAttribute('transform')).toBe('rotate(45 50 50)') + var rect = draw.rect(100,100).center(150,150).transform({ rotation: 45 }) + expect(rect.node.getAttribute('transform')).toBe('matrix(0.7071067811865475,0.7071067811865475,-0.7071067811865475,0.7071067811865475,150,-62.13203435596424)') + expect(rect.transform('rotation')).toBe(45) }) it('rotates the element around the given rotation point', function() { var rect = draw.rect(100,100).transform({ rotation: 55, cx: 80, cy:2 }) - expect(rect.node.getAttribute('transform')).toBe('rotate(55 80 2)') + expect(rect.node.getAttribute('transform')).toBe('matrix(0.573576436351046,0.8191520442889917,-0.8191520442889917,0.573576436351046,35.7521891804943,-64.67931641582143)') }) it('transforms element using a matrix', function() { var rect = draw.rect(100,100).transform({ a: 0.5, c: 0.5 }) - expect(rect.node.getAttribute('transform')).toBe('matrix(0.5 0 0.5 1 0 0)') + expect(rect.node.getAttribute('transform')).toBe('matrix(0.5,0,0.5,1,0,0)') }) }) diff --git a/spec/spec/matrix.js b/spec/spec/matrix.js index 9689d81..1ccb419 100644 --- a/spec/spec/matrix.js +++ b/spec/spec/matrix.js @@ -17,37 +17,47 @@ describe('Matrix', function() { expect(matrix.e).toBe(0) expect(matrix.f).toBe(0) }) - it('parses translation values', function() { - expect(matrix.x).toBe(0) - expect(matrix.y).toBe(0) - }) - it('parses skew values', function() { - expect(matrix.skewX).toBe(0) - expect(matrix.skewY).toBe(0) - }) - it('parses scale values', function() { - expect(matrix.scaleX).toBe(1) - expect(matrix.scaleY).toBe(1) - }) - it('parses rotaton value', function() { - expect(matrix.rotation).toBe(0) + + describe('extract()', function() { + var extract + + beforeEach(function() { + extract = matrix.extract() + }) + + it('parses translation values', function() { + expect(extract.x).toBe(0) + expect(extract.y).toBe(0) + }) + it('parses skew values', function() { + expect(extract.skewX).toBe(0) + expect(extract.skewY).toBe(0) + }) + it('parses scale values', function() { + expect(extract.scaleX).toBe(1) + expect(extract.scaleY).toBe(1) + }) + it('parses rotaton value', function() { + expect(extract.rotation).toBe(0) + }) }) }) describe('with an element given', function() { beforeEach(function() { - matrix = new SVG.Matrix(draw.rect(100, 100).skew(10, 20).translate(50, 50).scale(3, 2)) + matrix = new SVG.Matrix(draw.rect(100, 100).skew(10, 20).translate(40, 50).scale(3, 2)) }) it('parses the current transform matrix form an element', function() { - expect(matrix.a).toBe(1) - expect(matrix.b).toBe(0) - expect(matrix.c).toBe(0) - expect(matrix.d).toBe(1) - expect(matrix.e).toBe(0) - expect(matrix.f).toBe(0) + expect(matrix.a).toBe(3.192533254623413) + expect(matrix.b).toBe(1.091910719871521) + expect(matrix.c).toBe(0.35265403985977173) + expect(matrix.d).toBe(2) + expect(matrix.e).toBe(51.383460998535156) + expect(matrix.f).toBe(64.55880737304688) }) + }) }) diff --git a/spec/spec/rect.js b/spec/spec/rect.js index 938bc46..f983d78 100755 --- a/spec/spec/rect.js +++ b/spec/spec/rect.js @@ -166,7 +166,7 @@ describe('Rect', function() { describe('translate()', function() { it('should set the translation of an element', function() { rect.transform({ x: 12, y: 12 }) - expect(rect.node.getAttribute('transform')).toBe('translate(12 12)') + expect(rect.node.getAttribute('transform')).toBe('matrix(1,0,0,1,12,12)') }) }) diff --git a/src/element.js b/src/element.js index 6310b6b..59e713f 100755 --- a/src/element.js +++ b/src/element.js @@ -21,7 +21,7 @@ SVG.Element = SVG.invent({ x: function(x) { if (x != null) { x = new SVG.Number(x) - x.value /= this.ctm().extract().scaleX + x.value /= this.transform('scaleX') } return this.attr('x', x) } @@ -29,7 +29,7 @@ SVG.Element = SVG.invent({ , y: function(y) { if (y != null) { y = new SVG.Number(y) - y.value /= this.ctm().extract().scaleY + y.value /= this.transform('scaleY') } return this.attr('y', y) } diff --git a/src/ellipse.js b/src/ellipse.js index f4ab6c9..d64209a 100755 --- a/src/ellipse.js +++ b/src/ellipse.js @@ -64,11 +64,11 @@ SVG.extend(SVG.Circle, SVG.Ellipse, { } // Move by center over x-axis , cx: function(x) { - return x == null ? this.attr('cx') : this.attr('cx', new SVG.Number(x).divide(this.ctm().scaleX)) + return x == null ? this.attr('cx') : this.attr('cx', new SVG.Number(x).divide(this.transform('scaleX'))) } // Move by center over y-axis , cy: function(y) { - return y == null ? this.attr('cy') : this.attr('cy', new SVG.Number(y).divide(this.ctm().scaleY)) + return y == null ? this.attr('cy') : this.attr('cy', new SVG.Number(y).divide(this.transform('scaleY'))) } // Set width of element , width: function(width) { diff --git a/src/helpers.js b/src/helpers.js index 11f5017..b22a559 100644 --- a/src/helpers.js +++ b/src/helpers.js @@ -51,7 +51,7 @@ function deltaTransformPoint(matrix, point) { // Map matrix array to object function arrayToMatrix(a) { - return { a: a[0], b: a[1], c: a[2], e: a[3], f: a[4], g: a[5] } + return { a: a[0], b: a[1], c: a[2], d: a[3], e: a[4], f: a[5] } } // Calculate position according to from and to diff --git a/src/matrix.js b/src/matrix.js index fb61bf0..b6c839d 100644 --- a/src/matrix.js +++ b/src/matrix.js @@ -25,21 +25,22 @@ SVG.Matrix = SVG.invent({ // Extract individual transformations extract: function() { // Find transform points - var px = deltaTransformPoint(this, { x: 0, y: 1 }) - , py = deltaTransformPoint(this, { x: 1, y: 0 }) + var px = deltaTransformPoint(this, { x: 0, y: 1 }) + , py = deltaTransformPoint(this, { x: 1, y: 0 }) + , skewX = 180 / Math.PI * Math.atan2(px.y, px.x) - 90 return { // Translation x: this.e , y: this.f // Skew - , skewX: 180 / Math.PI * Math.atan2(px.y, px.x) - 90 + , skewX: skewX , skewY: 180 / Math.PI * Math.atan2(py.y, py.x) // Scale , scaleX: Math.sqrt(this.a * this.a + this.b * this.b) , scaleY: Math.sqrt(this.c * this.c + this.d * this.d) // Rotation - , rotation: this.skewX + , rotation: skewX } } // Multiply @@ -63,15 +64,12 @@ SVG.Matrix = SVG.invent({ } // Rotate , rotate: function(d, x, y) { - // Fall back to native rotate method - if (x == null) return new SVG.Matrix(this.native().rotate(d)) - // Convert degrees to radians d = SVG.utils.radians(d) - + return new SVG.Matrix(1, 0, 0, 1, x, y) - //.multiply(new SVG.Matrix(Math.cos(d), Math.sin(d), -Math.sin(d), Math.cos(d), 0, 0)) - //.multiply(new SVG.Matrix(1, 0, 0, 1, -x, -y)) + .multiply(new SVG.Matrix(Math.cos(d), Math.sin(d), -Math.sin(d), Math.cos(d), 0, 0)) + .multiply(new SVG.Matrix(1, 0, 0, 1, -x, -y)) } // Flip , flip: function(a) { diff --git a/src/transform.js b/src/transform.js index c78865d..ba4cdb9 100644 --- a/src/transform.js +++ b/src/transform.js @@ -5,6 +5,10 @@ SVG.extend(SVG.Element, { if (o == null) return this.ctm().extract() + // Singular getter + else if (typeof o === 'string') + return this.ctm().extract()[o] + // Get current matrix var matrix = new SVG.Matrix(this) @@ -36,7 +40,7 @@ SVG.extend(SVG.Element, { // Act on translate else if (o.x || o.y) matrix = matrix.translate(o.x, o.y) -console.log(o, matrix) + return this.attr('transform', matrix) } // Reset all transformations