aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorwout <wout@impinc.co.uk>2013-06-09 11:37:26 +0100
committerwout <wout@impinc.co.uk>2013-06-09 11:37:26 +0100
commit8f03d84e43681ecca20ac028071e51a2e2bbc0c8 (patch)
treef5c11dc6c429e8459c20731ba775fa6ca794400f
parentec75128ec31aa055aca2ae7f95ad4f5cf38d12e0 (diff)
downloadsvg.js-8f03d84e43681ecca20ac028071e51a2e2bbc0c8.tar.gz
svg.js-8f03d84e43681ecca20ac028071e51a2e2bbc0c8.zip
Added deep traversing, reorganizd modules
-rw-r--r--README.md15
-rw-r--r--Rakefile2
-rw-r--r--dist/svg.js230
-rw-r--r--dist/svg.min.js2
-rw-r--r--spec/spec/color.js4
-rw-r--r--spec/spec/container.js17
-rw-r--r--spec/spec/gradient.js4
-rw-r--r--src/clip.js10
-rw-r--r--src/container.js79
-rw-r--r--src/element.js6
-rw-r--r--src/ellipse.js13
-rw-r--r--src/gradient.js9
-rw-r--r--src/group.js10
-rw-r--r--src/image.js11
-rw-r--r--src/line.js9
-rw-r--r--src/mask.js10
-rw-r--r--src/nested.js11
-rw-r--r--src/path.js9
-rw-r--r--src/pattern.js16
-rw-r--r--src/poly.js14
-rw-r--r--src/rect.js11
-rw-r--r--src/set.js37
-rw-r--r--src/text.js10
-rw-r--r--src/viewbox.js4
24 files changed, 383 insertions, 160 deletions
diff --git a/README.md b/README.md
index 3f30c23..a5975bd 100644
--- a/README.md
+++ b/README.md
@@ -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.
diff --git a/Rakefile b/Rakefile
index c741aed..c378745 100644
--- a/Rakefile
+++ b/Rakefile
@@ -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
+})
+