jinlin
2024-09-26 7ec9326ce00d08f9d957981f2edff6df26f24a28
web/public/SVGOrigin/Method-Draw-master/method-draw/lib/canvg/canvg.js
@@ -1,6 +1,6 @@
/*
 * canvg.js - Javascript SVG parser and renderer on Canvas
 * MIT Licensed
 * MIT Licensed
 * Gabe Lerner (gabelerner@gmail.com)
 * http://code.google.com/p/canvg/
 *
@@ -55,13 +55,13 @@
            canvg(c, div.innerHTML);
         }
         return;
      }
      }
      opts = opts || {};
      if (typeof target == 'string') {
         target = document.getElementById(target);
      }
      // reuse class per canvas
      var svg;
      if (target.svg == null) {
@@ -73,7 +73,7 @@
         svg.stop();
      }
      svg.opts = opts;
      var ctx = target.getContext('2d');
      if (typeof(s.documentElement) != 'undefined') {
         // load from xml doc
@@ -91,10 +91,10 @@
   function build() {
      var svg = { };
      svg.FRAMERATE = 30;
      svg.MAX_VIRTUAL_PIXELS = 30000;
      // globals
      svg.init = function(ctx) {
         svg.Definitions = {};
@@ -114,14 +114,14 @@
               if (d != null && typeof(d) == 'number') return d;
               if (d == 'x') return this.width();
               if (d == 'y') return this.height();
               return Math.sqrt(Math.pow(this.width(), 2) + Math.pow(this.height(), 2)) / Math.sqrt(2);
               return Math.sqrt(Math.pow(this.width(), 2) + Math.pow(this.height(), 2)) / Math.sqrt(2);
            }
         });
      }
      svg.init();
      // images loaded
      svg.ImagesLoaded = function() {
      svg.ImagesLoaded = function() {
         for (var i=0; i<svg.Images.length; i++) {
            if (!svg.Images[i].loaded) return false;
         }
@@ -130,10 +130,10 @@
      // trim
      svg.trim = function(s) { return s.replace(/^\s+|\s+$/g, ''); }
      // compress spaces
      svg.compressSpaces = function(s) { return s.replace(/[\s\r\t\n]+/gm,' '); }
      // ajax
      svg.ajax = function(url) {
         var AJAX;
@@ -145,8 +145,8 @@
            return AJAX.responseText;
         }
         return null;
      }
      }
      // parse xml
      svg.parseXml = function(xml) {
         if (window.DOMParser)
@@ -154,48 +154,48 @@
            var parser = new DOMParser();
            return parser.parseFromString(xml, 'text/xml');
         }
         else
         else
         {
            xml = xml.replace(/<!DOCTYPE svg[^>]*>/, '');
            var xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
            xmlDoc.async = 'false';
            xmlDoc.loadXML(xml);
            xmlDoc.loadXML(xml);
            return xmlDoc;
         }
         }
      }
      svg.Property = function(name, value) {
         this.name = name;
         this.value = value;
         this.hasValue = function() {
            return (this.value != null && this.value !== '');
         }
         // return the numerical value of the property
         this.numValue = function() {
            if (!this.hasValue()) return 0;
            var n = parseFloat(this.value);
            if ((this.value + '').match(/%$/)) {
               n = n / 100.0;
            }
            return n;
         }
         this.valueOrDefault = function(def) {
            if (this.hasValue()) return this.value;
            return def;
         }
         this.numValueOrDefault = function(def) {
            if (this.hasValue()) return this.numValue();
            return def;
         }
         /* EXTENSIONS */
         var that = this;
         // color extensions
         this.Color = {
            // augment the current color value with the opacity
@@ -210,7 +210,7 @@
               return new svg.Property(that.name, newValue);
            }
         }
         // definition extensions
         this.Definition = {
            // get the definition from the definitions table
@@ -218,43 +218,43 @@
               var name = that.value.replace(/^(url\()?#([^\)]+)\)?$/, '$2');
               return svg.Definitions[name];
            },
            isUrl: function() {
               return that.value.indexOf('url(') == 0
            },
            getFillStyle: function(e) {
               var def = this.getDefinition();
               // gradient
               if (def != null && def.createGradient) {
                  return def.createGradient(svg.ctx, e);
               }
               // pattern
               if (def != null && def.createPattern) {
                  return def.createPattern(svg.ctx, e);
               }
               return null;
            }
         }
         // length extensions
         this.Length = {
            DPI: function(viewPort) {
               return 96.0; // TODO: compute?
            },
            EM: function(viewPort) {
               var em = 12;
               var fontSize = new svg.Property('fontSize', svg.Font.Parse(svg.ctx.font).fontSize);
               if (fontSize.hasValue()) em = fontSize.Length.toPixels(viewPort);
               return em;
            },
            // get the length as pixels
            toPixels: function(viewPort) {
               if (!that.hasValue()) return 0;
@@ -271,7 +271,7 @@
               return that.numValue();
            }
         }
         // time extensions
         this.Time = {
            // get the time as milliseconds
@@ -283,7 +283,7 @@
               return that.numValue();
            }
         }
         // angle extensions
         this.Angle = {
            // get the angle as radians
@@ -297,25 +297,25 @@
            }
         }
      }
      // fonts
      svg.Font = new (function() {
         this.Styles = ['normal','italic','oblique','inherit'];
         this.Variants = ['normal','small-caps','inherit'];
         this.Weights = ['normal','bold','bolder','lighter','100','200','300','400','500','600','700','800','900','inherit'];
         this.CreateFont = function(fontStyle, fontVariant, fontWeight, fontSize, fontFamily, inherit) {
         this.CreateFont = function(fontStyle, fontVariant, fontWeight, fontSize, fontFamily, inherit) {
            var f = inherit != null ? this.Parse(inherit) : this.CreateFont('', '', '', '', '', svg.ctx.font);
            return {
               fontFamily: fontFamily || f.fontFamily,
               fontSize: fontSize || f.fontSize,
               fontStyle: fontStyle || f.fontStyle,
               fontWeight: fontWeight || f.fontWeight,
            return {
               fontFamily: fontFamily || f.fontFamily,
               fontSize: fontSize || f.fontSize,
               fontStyle: fontStyle || f.fontStyle,
               fontWeight: fontWeight || f.fontWeight,
               fontVariant: fontVariant || f.fontVariant,
               toString: function () { return [this.fontStyle, this.fontVariant, this.fontWeight, this.fontSize, this.fontFamily].join(' ') }
            }
               toString: function () { return [this.fontStyle, this.fontVariant, this.fontWeight, this.fontSize, this.fontFamily].join(' ') }
            }
         }
         var that = this;
         this.Parse = function(s) {
            var f = {};
@@ -332,7 +332,7 @@
            return f;
         }
      });
      // points and paths
      svg.ToNumberArray = function(s) {
         var a = svg.trim(svg.compressSpaces((s || '').replace(/,/g, ' '))).split(' ');
@@ -340,15 +340,15 @@
            a[i] = parseFloat(a[i]);
         }
         return a;
      }
      }
      svg.Point = function(x, y) {
         this.x = x;
         this.y = y;
         this.angleTo = function(p) {
            return Math.atan2(p.y - this.y, p.x - this.x);
         }
         this.applyTransform = function(v) {
            var xp = this.x * v[0] + this.y * v[2] + v[4];
            var yp = this.x * v[1] + this.y * v[3] + v[5];
@@ -368,20 +368,20 @@
         }
         return path;
      }
      // bounding box
      svg.BoundingBox = function(x1, y1, x2, y2) { // pass in initial points if you want
         this.x1 = Number.NaN;
         this.y1 = Number.NaN;
         this.x2 = Number.NaN;
         this.y2 = Number.NaN;
         this.x = function() { return this.x1; }
         this.y = function() { return this.y1; }
         this.width = function() { return this.x2 - this.x1; }
         this.height = function() { return this.y2 - this.y1; }
         this.addPoint = function(x, y) {
         this.addPoint = function(x, y) {
            if (x != null) {
               if (isNaN(this.x1) || isNaN(this.x2)) {
                  this.x1 = x;
@@ -390,7 +390,7 @@
               if (x < this.x1) this.x1 = x;
               if (x > this.x2) this.x2 = x;
            }
            if (y != null) {
               if (isNaN(this.y1) || isNaN(this.y2)) {
                  this.y1 = y;
@@ -399,15 +399,15 @@
               if (y < this.y1) this.y1 = y;
               if (y > this.y2) this.y2 = y;
            }
         }
         }
         this.addX = function(x) { this.addPoint(x, null); }
         this.addY = function(y) { this.addPoint(null, y); }
         this.addBoundingBox = function(bb) {
            this.addPoint(bb.x1, bb.y1);
            this.addPoint(bb.x2, bb.y2);
         }
         this.addQuadraticCurve = function(p0x, p0y, p1x, p1y, p2x, p2y) {
            var cp1x = p0x + 2/3 * (p1x - p0x); // CP1 = QP0 + 2/3 *(QP1-QP0)
            var cp1y = p0y + 2/3 * (p1y - p0y); // CP1 = QP0 + 2/3 *(QP1-QP0)
@@ -415,25 +415,25 @@
            var cp2y = cp1y + 1/3 * (p2y - p0y); // CP2 = CP1 + 1/3 *(QP2-QP0)
            this.addBezierCurve(p0x, p0y, cp1x, cp2x, cp1y,   cp2y, p2x, p2y);
         }
         this.addBezierCurve = function(p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y) {
            // from http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html
            var p0 = [p0x, p0y], p1 = [p1x, p1y], p2 = [p2x, p2y], p3 = [p3x, p3y];
            this.addPoint(p0[0], p0[1]);
            this.addPoint(p3[0], p3[1]);
            for (i=0; i<=1; i++) {
               var f = function(t) {
               var f = function(t) {
                  return Math.pow(1-t, 3) * p0[i]
                  + 3 * Math.pow(1-t, 2) * t * p1[i]
                  + 3 * (1-t) * Math.pow(t, 2) * p2[i]
                  + Math.pow(t, 3) * p3[i];
               }
               var b = 6 * p0[i] - 12 * p1[i] + 6 * p2[i];
               var a = -3 * p0[i] + 9 * p1[i] - 9 * p2[i] + 3 * p3[i];
               var c = 3 * p1[i] - 3 * p0[i];
               if (a == 0) {
                  if (b == 0) continue;
                  var t = -c / b;
@@ -443,7 +443,7 @@
                  }
                  continue;
               }
               var b2ac = Math.pow(b, 2) - 4 * c * a;
               if (b2ac < 0) continue;
               var t1 = (-b + Math.sqrt(b2ac)) / (2 * a);
@@ -458,23 +458,23 @@
               }
            }
         }
         this.isPointInBox = function(x, y) {
            return (this.x1 <= x && x <= this.x2 && this.y1 <= y && y <= this.y2);
         }
         this.addPoint(x1, y1);
         this.addPoint(x2, y2);
      }
      // transforms
      svg.Transform = function(v) {
      svg.Transform = function(v) {
         var that = this;
         this.Type = {}
         // translate
         this.Type.translate = function(s) {
            this.p = svg.CreatePoint(s);
            this.p = svg.CreatePoint(s);
            this.apply = function(ctx) {
               ctx.translate(this.p.x || 0.0, this.p.y || 0.0);
            }
@@ -482,7 +482,7 @@
               p.applyTransform([1, 0, 0, 1, this.p.x || 0.0, this.p.y || 0.0]);
            }
         }
         // rotate
         this.Type.rotate = function(s) {
            var a = svg.ToNumberArray(s);
@@ -499,9 +499,9 @@
               p.applyTransform([1, 0, 0, 1, this.p.x || 0.0, this.p.y || 0.0]);
               p.applyTransform([Math.cos(a), Math.sin(a), -Math.sin(a), Math.cos(a), 0, 0]);
               p.applyTransform([1, 0, 0, 1, -this.p.x || 0.0, -this.p.y || 0.0]);
            }
            }
         }
         this.Type.scale = function(s) {
            this.p = svg.CreatePoint(s);
            this.apply = function(ctx) {
@@ -509,9 +509,9 @@
            }
            this.applyToPoint = function(p) {
               p.applyTransform([this.p.x || 0.0, 0, 0, this.p.y || 0.0, 0, 0]);
            }
            }
         }
         this.Type.matrix = function(s) {
            this.m = svg.ToNumberArray(s);
            this.apply = function(ctx) {
@@ -519,44 +519,44 @@
            }
            this.applyToPoint = function(p) {
               p.applyTransform(this.m);
            }
            }
         }
         this.Type.SkewBase = function(s) {
            this.base = that.Type.matrix;
            this.base(s);
            this.angle = new svg.Property('angle', s);
         }
         this.Type.SkewBase.prototype = new this.Type.matrix;
         this.Type.skewX = function(s) {
            this.base = that.Type.SkewBase;
            this.base(s);
            this.m = [1, 0, Math.tan(this.angle.Angle.toRadians()), 1, 0, 0];
         }
         this.Type.skewX.prototype = new this.Type.SkewBase;
         this.Type.skewY = function(s) {
            this.base = that.Type.SkewBase;
            this.base(s);
            this.m = [1, Math.tan(this.angle.Angle.toRadians()), 0, 1, 0, 0];
         }
         this.Type.skewY.prototype = new this.Type.SkewBase;
         this.transforms = [];
         this.apply = function(ctx) {
            for (var i=0; i<this.transforms.length; i++) {
               this.transforms[i].apply(ctx);
            }
         }
         this.applyToPoint = function(p) {
            for (var i=0; i<this.transforms.length; i++) {
               this.transforms[i].applyToPoint(p);
            }
         }
         var data = svg.trim(svg.compressSpaces(v)).split(/\s(?=[a-z])/);
         for (var i=0; i<data.length; i++) {
            var type = data[i].split('(')[0];
@@ -565,73 +565,73 @@
            this.transforms.push(transform);
         }
      }
      // aspect ratio
      svg.AspectRatio = function(ctx, aspectRatio, width, desiredWidth, height, desiredHeight, minX, minY, refX, refY) {
         // aspect ratio - http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute
         aspectRatio = svg.compressSpaces(aspectRatio);
         aspectRatio = aspectRatio.replace(/^defer\s/,''); // ignore defer
         var align = aspectRatio.split(' ')[0] || 'xMidYMid';
         var meetOrSlice = aspectRatio.split(' ')[1] || 'meet';
         var meetOrSlice = aspectRatio.split(' ')[1] || 'meet';
         // calculate scale
         var scaleX = width / desiredWidth;
         var scaleY = height / desiredHeight;
         var scaleMin = Math.min(scaleX, scaleY);
         var scaleMax = Math.max(scaleX, scaleY);
         if (meetOrSlice == 'meet') { desiredWidth *= scaleMin; desiredHeight *= scaleMin; }
         if (meetOrSlice == 'slice') { desiredWidth *= scaleMax; desiredHeight *= scaleMax; }
         if (meetOrSlice == 'slice') { desiredWidth *= scaleMax; desiredHeight *= scaleMax; }
         refX = new svg.Property('refX', refX);
         refY = new svg.Property('refY', refY);
         if (refX.hasValue() && refY.hasValue()) {
         if (refX.hasValue() && refY.hasValue()) {
            ctx.translate(-scaleMin * refX.Length.toPixels('x'), -scaleMin * refY.Length.toPixels('y'));
         }
         else {
            // align
            if (align.match(/^xMid/) && ((meetOrSlice == 'meet' && scaleMin == scaleY) || (meetOrSlice == 'slice' && scaleMax == scaleY))) ctx.translate(width / 2.0 - desiredWidth / 2.0, 0);
            if (align.match(/YMid$/) && ((meetOrSlice == 'meet' && scaleMin == scaleX) || (meetOrSlice == 'slice' && scaleMax == scaleX))) ctx.translate(0, height / 2.0 - desiredHeight / 2.0);
            if (align.match(/^xMax/) && ((meetOrSlice == 'meet' && scaleMin == scaleY) || (meetOrSlice == 'slice' && scaleMax == scaleY))) ctx.translate(width - desiredWidth, 0);
            if (align.match(/YMax$/) && ((meetOrSlice == 'meet' && scaleMin == scaleX) || (meetOrSlice == 'slice' && scaleMax == scaleX))) ctx.translate(0, height - desiredHeight);
         }
         else {
            // align
            if (align.match(/^xMid/) && ((meetOrSlice == 'meet' && scaleMin == scaleY) || (meetOrSlice == 'slice' && scaleMax == scaleY))) ctx.translate(width / 2.0 - desiredWidth / 2.0, 0);
            if (align.match(/YMid$/) && ((meetOrSlice == 'meet' && scaleMin == scaleX) || (meetOrSlice == 'slice' && scaleMax == scaleX))) ctx.translate(0, height / 2.0 - desiredHeight / 2.0);
            if (align.match(/^xMax/) && ((meetOrSlice == 'meet' && scaleMin == scaleY) || (meetOrSlice == 'slice' && scaleMax == scaleY))) ctx.translate(width - desiredWidth, 0);
            if (align.match(/YMax$/) && ((meetOrSlice == 'meet' && scaleMin == scaleX) || (meetOrSlice == 'slice' && scaleMax == scaleX))) ctx.translate(0, height - desiredHeight);
         }
         // scale
         if (align == 'none') ctx.scale(scaleX, scaleY);
         else if (meetOrSlice == 'meet') ctx.scale(scaleMin, scaleMin);
         else if (meetOrSlice == 'slice') ctx.scale(scaleMax, scaleMax);
         else if (meetOrSlice == 'meet') ctx.scale(scaleMin, scaleMin);
         else if (meetOrSlice == 'slice') ctx.scale(scaleMax, scaleMax);
         // translate
         ctx.translate(minX == null ? 0 : -minX, minY == null ? 0 : -minY);
         ctx.translate(minX == null ? 0 : -minX, minY == null ? 0 : -minY);
      }
      // elements
      svg.Element = {}
      svg.Element.ElementBase = function(node) {
      svg.Element.ElementBase = function(node) {
         this.attributes = {};
         this.styles = {};
         this.children = [];
         // get or create attribute
         this.attribute = function(name, createIfNotExists) {
            var a = this.attributes[name];
            if (a != null) return a;
            a = new svg.Property(name, '');
            if (createIfNotExists == true) this.attributes[name] = a;
            return a;
         }
         // get or create style, crawls up node tree
         this.style = function(name, createIfNotExists) {
            var s = this.styles[name];
            if (s != null) return s;
            var a = this.attribute(name);
            if (a != null && a.hasValue()) {
               return a;
            }
            var p = this.parent;
            if (p != null) {
               var ps = p.style(name);
@@ -639,20 +639,20 @@
                  return ps;
               }
            }
            s = new svg.Property(name, '');
            if (createIfNotExists == true) this.styles[name] = s;
            return s;
         }
         // base render
         this.render = function(ctx) {
            // don't render display=none
            if (this.style('display').value == 'none') return;
            // don't render visibility=hidden
            if (this.attribute('visibility').value == 'hidden') return;
            ctx.save();
               this.setContext(ctx);
                  // mask
@@ -664,56 +664,56 @@
                     var filter = this.style('filter').Definition.getDefinition();
                     if (filter != null) filter.apply(ctx, this);
                  }
                  else this.renderChildren(ctx);
                  else this.renderChildren(ctx);
               this.clearContext(ctx);
            ctx.restore();
         }
         // base set context
         this.setContext = function(ctx) {
            // OVERRIDE ME!
         }
         // base clear context
         this.clearContext = function(ctx) {
            // OVERRIDE ME!
         }
         }
         // base render children
         this.renderChildren = function(ctx) {
            for (var i=0; i<this.children.length; i++) {
               this.children[i].render(ctx);
            }
         }
         this.addChild = function(childNode, create) {
            var child = childNode;
            if (create) child = svg.CreateElement(childNode);
            child.parent = this;
            this.children.push(child);
            this.children.push(child);
         }
         if (node != null && node.nodeType == 1) { //ELEMENT_NODE
            // add children
            for (var i=0; i<node.childNodes.length; i++) {
               var childNode = node.childNodes[i];
               if (childNode.nodeType == 1) this.addChild(childNode, true); //ELEMENT_NODE
            }
            // add attributes
            for (var i=0; i<node.attributes.length; i++) {
               var attribute = node.attributes[i];
               this.attributes[attribute.nodeName] = new svg.Property(attribute.nodeName, attribute.nodeValue);
            }
            // add tag styles
            var styles = svg.Styles[node.nodeName];
            if (styles != null) {
               for (var name in styles) {
                  this.styles[name] = styles[name];
               }
            }
            }
            // add class styles
            if (this.attribute('class').hasValue()) {
               var classes = svg.compressSpaces(this.attribute('class').value).split(' ');
@@ -732,7 +732,7 @@
                  }
               }
            }
            // add inline styles
            if (this.attribute('style').hasValue()) {
               var styles = this.attribute('style').value.split(';');
@@ -744,7 +744,7 @@
                     this.styles[name] = new svg.Property(name, value);
                  }
               }
            }
            }
            // add id
            if (this.attribute('id').hasValue()) {
@@ -754,11 +754,11 @@
            }
         }
      }
      svg.Element.RenderedElementBase = function(node) {
         this.base = svg.Element.ElementBase;
         this.base(node);
         this.setContext = function(ctx) {
            // fill
            if (this.style('fill').Definition.isUrl()) {
@@ -770,7 +770,7 @@
               if (this.style('fill-opacity').hasValue()) fillStyle = fillStyle.Color.addOpacity(this.style('fill-opacity').value);
               ctx.fillStyle = (fillStyle.value == 'none' ? 'rgba(0,0,0,0)' : fillStyle.value);
            }
            // stroke
            if (this.style('stroke').Definition.isUrl()) {
               var fs = this.style('stroke').Definition.getFillStyle(this);
@@ -788,49 +788,49 @@
            // font
            if (typeof(ctx.font) != 'undefined') {
               ctx.font = svg.Font.CreateFont(
                  this.style('font-style').value,
                  this.style('font-variant').value,
                  this.style('font-weight').value,
                  this.style('font-size').hasValue() ? this.style('font-size').Length.toPixels() + 'px' : '',
               ctx.font = svg.Font.CreateFont(
                  this.style('font-style').value,
                  this.style('font-variant').value,
                  this.style('font-weight').value,
                  this.style('font-size').hasValue() ? this.style('font-size').Length.toPixels() + 'px' : '',
                  this.style('font-family').value).toString();
            }
            // transform
            if (this.attribute('transform').hasValue()) {
            if (this.attribute('transform').hasValue()) {
               var transform = new svg.Transform(this.attribute('transform').value);
               transform.apply(ctx);
            }
            // clip
            if (this.attribute('clip-path').hasValue()) {
               var clip = this.attribute('clip-path').Definition.getDefinition();
               if (clip != null) clip.apply(ctx);
            }
            // opacity
            if (this.style('opacity').hasValue()) {
               ctx.globalAlpha = this.style('opacity').numValue();
            }
         }
         }
      }
      svg.Element.RenderedElementBase.prototype = new svg.Element.ElementBase;
      svg.Element.PathElementBase = function(node) {
         this.base = svg.Element.RenderedElementBase;
         this.base(node);
         this.path = function(ctx) {
            if (ctx != null) ctx.beginPath();
            return new svg.BoundingBox();
         }
         this.renderChildren = function(ctx) {
            this.path(ctx);
            svg.Mouse.checkPath(this, ctx);
            if (ctx.fillStyle != '') ctx.fill();
            if (ctx.strokeStyle != '') ctx.stroke();
            var markers = this.getMarkers();
            if (markers != null) {
               if (this.style('marker-start').Definition.isUrl()) {
@@ -847,58 +847,58 @@
                  var marker = this.style('marker-end').Definition.getDefinition();
                  marker.render(ctx, markers[markers.length-1][0], markers[markers.length-1][1]);
               }
            }
            }
         }
         this.getBoundingBox = function() {
            return this.path();
         }
         this.getMarkers = function() {
            return null;
         }
      }
      svg.Element.PathElementBase.prototype = new svg.Element.RenderedElementBase;
      // svg element
      svg.Element.svg = function(node) {
         this.base = svg.Element.RenderedElementBase;
         this.base(node);
         this.baseClearContext = this.clearContext;
         this.clearContext = function(ctx) {
            this.baseClearContext(ctx);
            svg.ViewPort.RemoveCurrent();
         }
         this.baseSetContext = this.setContext;
         this.setContext = function(ctx) {
            // initial values
            ctx.strokeStyle = 'rgba(0,0,0,0)';
            ctx.lineCap = 'butt';
            ctx.lineJoin = 'miter';
            ctx.miterLimit = 4;
            ctx.miterLimit = 4;
            this.baseSetContext(ctx);
            // create new view port
            if (this.attribute('x').hasValue() && this.attribute('y').hasValue()) {
               ctx.translate(this.attribute('x').Length.toPixels('x'), this.attribute('y').Length.toPixels('y'));
            }
            var width = svg.ViewPort.width();
            var height = svg.ViewPort.height();
            if (typeof(this.root) == 'undefined' && this.attribute('width').hasValue() && this.attribute('height').hasValue()) {
               width = this.attribute('width').Length.toPixels('x');
               height = this.attribute('height').Length.toPixels('y');
               var x = 0;
               var y = 0;
               if (this.attribute('refX').hasValue() && this.attribute('refY').hasValue()) {
                  x = -this.attribute('refX').Length.toPixels('x');
                  y = -this.attribute('refY').Length.toPixels('y');
               }
               ctx.beginPath();
               ctx.moveTo(x, y);
               ctx.lineTo(width, y);
@@ -907,19 +907,19 @@
               ctx.closePath();
               ctx.clip();
            }
            svg.ViewPort.SetCurrent(width, height);
            svg.ViewPort.SetCurrent(width, height);
            // viewbox
            if (this.attribute('viewBox').hasValue()) {
            if (this.attribute('viewBox').hasValue()) {
               var viewBox = svg.ToNumberArray(this.attribute('viewBox').value);
               var minX = viewBox[0];
               var minY = viewBox[1];
               width = viewBox[2];
               height = viewBox[3];
               svg.AspectRatio(ctx,
                           this.attribute('preserveAspectRatio').value,
                           svg.ViewPort.width(),
                           this.attribute('preserveAspectRatio').value,
                           svg.ViewPort.width(),
                           width,
                           svg.ViewPort.height(),
                           height,
@@ -927,10 +927,10 @@
                           minY,
                           this.attribute('refX').value,
                           this.attribute('refY').value);
               svg.ViewPort.RemoveCurrent();
               svg.ViewPort.SetCurrent(viewBox[2], viewBox[3]);
            }
               svg.ViewPort.RemoveCurrent();
               svg.ViewPort.SetCurrent(viewBox[2], viewBox[3]);
            }
         }
      }
      svg.Element.svg.prototype = new svg.Element.RenderedElementBase;
@@ -939,7 +939,7 @@
      svg.Element.rect = function(node) {
         this.base = svg.Element.PathElementBase;
         this.base(node);
         this.path = function(ctx) {
            var x = this.attribute('x').Length.toPixels('x');
            var y = this.attribute('y').Length.toPixels('y');
@@ -949,7 +949,7 @@
            var ry = this.attribute('ry').Length.toPixels('y');
            if (this.attribute('rx').hasValue() && !this.attribute('ry').hasValue()) ry = rx;
            if (this.attribute('ry').hasValue() && !this.attribute('rx').hasValue()) rx = ry;
            if (ctx != null) {
               ctx.beginPath();
               ctx.moveTo(x + rx, y);
@@ -963,45 +963,45 @@
               ctx.quadraticCurveTo(x, y, x + rx, y)
               ctx.closePath();
            }
            return new svg.BoundingBox(x, y, x + width, y + height);
         }
      }
      svg.Element.rect.prototype = new svg.Element.PathElementBase;
      // circle element
      svg.Element.circle = function(node) {
         this.base = svg.Element.PathElementBase;
         this.base(node);
         this.path = function(ctx) {
            var cx = this.attribute('cx').Length.toPixels('x');
            var cy = this.attribute('cy').Length.toPixels('y');
            var r = this.attribute('r').Length.toPixels();
            if (ctx != null) {
               ctx.beginPath();
               ctx.arc(cx, cy, r, 0, Math.PI * 2, true);
               ctx.arc(cx, cy, r, 0, Math.PI * 2, true);
               ctx.closePath();
            }
            return new svg.BoundingBox(cx - r, cy - r, cx + r, cy + r);
         }
      }
      svg.Element.circle.prototype = new svg.Element.PathElementBase;
      svg.Element.circle.prototype = new svg.Element.PathElementBase;
      // ellipse element
      svg.Element.ellipse = function(node) {
         this.base = svg.Element.PathElementBase;
         this.base(node);
         this.path = function(ctx) {
            var KAPPA = 4 * ((Math.sqrt(2) - 1) / 3);
            var rx = this.attribute('rx').Length.toPixels('x');
            var ry = this.attribute('ry').Length.toPixels('y');
            var cx = this.attribute('cx').Length.toPixels('x');
            var cy = this.attribute('cy').Length.toPixels('y');
            if (ctx != null) {
               ctx.beginPath();
               ctx.moveTo(cx, cy - ry);
@@ -1011,48 +1011,48 @@
               ctx.bezierCurveTo(cx - rx, cy - (KAPPA * ry), cx - (KAPPA * rx), cy - ry, cx, cy - ry);
               ctx.closePath();
            }
            return new svg.BoundingBox(cx - rx, cy - ry, cx + rx, cy + ry);
         }
      }
      svg.Element.ellipse.prototype = new svg.Element.PathElementBase;
      svg.Element.ellipse.prototype = new svg.Element.PathElementBase;
      // line element
      svg.Element.line = function(node) {
         this.base = svg.Element.PathElementBase;
         this.base(node);
         this.getPoints = function() {
            return [
               new svg.Point(this.attribute('x1').Length.toPixels('x'), this.attribute('y1').Length.toPixels('y')),
               new svg.Point(this.attribute('x2').Length.toPixels('x'), this.attribute('y2').Length.toPixels('y'))];
         }
         this.path = function(ctx) {
            var points = this.getPoints();
            if (ctx != null) {
               ctx.beginPath();
               ctx.moveTo(points[0].x, points[0].y);
               ctx.lineTo(points[1].x, points[1].y);
            }
            return new svg.BoundingBox(points[0].x, points[0].y, points[1].x, points[1].y);
         }
         this.getMarkers = function() {
            var points = this.getPoints();
            var points = this.getPoints();
            var a = points[0].angleTo(points[1]);
            return [[points[0], a], [points[1], a]];
         }
      }
      svg.Element.line.prototype = new svg.Element.PathElementBase;
      svg.Element.line.prototype = new svg.Element.PathElementBase;
      // polyline element
      svg.Element.polyline = function(node) {
         this.base = svg.Element.PathElementBase;
         this.base(node);
         this.points = svg.CreatePath(this.attribute('points').value);
         this.path = function(ctx) {
            var bb = new svg.BoundingBox(this.points[0].x, this.points[0].y);
@@ -1066,7 +1066,7 @@
            }
            return bb;
         }
         this.getMarkers = function() {
            var markers = [];
            for (var i=0; i<this.points.length - 1; i++) {
@@ -1074,15 +1074,15 @@
            }
            markers.push([this.points[this.points.length-1], markers[markers.length-1][1]]);
            return markers;
         }
         }
      }
      svg.Element.polyline.prototype = new svg.Element.PathElementBase;
      svg.Element.polyline.prototype = new svg.Element.PathElementBase;
      // polygon element
      svg.Element.polygon = function(node) {
         this.base = svg.Element.polyline;
         this.base(node);
         this.basePath = this.path;
         this.path = function(ctx) {
            var bb = this.basePath(ctx);
@@ -1099,7 +1099,7 @@
      svg.Element.path = function(node) {
         this.base = svg.Element.PathElementBase;
         this.base(node);
         var d = this.attribute('d').value;
         // TODO: convert to real lexer based on http://www.w3.org/TR/SVG11/paths.html#PathDataBNF
         d = d.replace(/,/gm,' '); // get rid of all commas
@@ -1114,7 +1114,7 @@
         d = svg.trim(d);
         this.PathParser = new (function(d) {
            this.tokens = d.split(' ');
            this.reset = function() {
               this.i = -1;
               this.command = '';
@@ -1125,61 +1125,61 @@
               this.points = [];
               this.angles = [];
            }
            this.isEnd = function() {
               return this.i >= this.tokens.length - 1;
            }
            this.isCommandOrEnd = function() {
               if (this.isEnd()) return true;
               return this.tokens[this.i + 1].match(/^[A-Za-z]$/) != null;
            }
            this.isRelativeCommand = function() {
               return this.command == this.command.toLowerCase();
            }
            this.getToken = function() {
               this.i = this.i + 1;
               return this.tokens[this.i];
            }
            this.getScalar = function() {
               return parseFloat(this.getToken());
            }
            this.nextCommand = function() {
               this.previousCommand = this.command;
               this.command = this.getToken();
            }
            }
            this.getPoint = function() {
               var p = new svg.Point(this.getScalar(), this.getScalar());
               return this.makeAbsolute(p);
            }
            this.getAsControlPoint = function() {
               var p = this.getPoint();
               this.control = p;
               return p;
            }
            this.getAsCurrentPoint = function() {
               var p = this.getPoint();
               this.current = p;
               return p;
               return p;
            }
            this.getReflectedControlPoint = function() {
               if (this.previousCommand.toLowerCase() != 'c' && this.previousCommand.toLowerCase() != 's') {
                  return this.current;
               }
               // reflect point
               var p = new svg.Point(2 * this.current.x - this.control.x, 2 * this.current.y - this.control.y);
               var p = new svg.Point(2 * this.current.x - this.control.x, 2 * this.current.y - this.control.y);
               return p;
            }
            this.makeAbsolute = function(p) {
               if (this.isRelativeCommand()) {
                  p.x = this.current.x + p.x;
@@ -1187,7 +1187,7 @@
               }
               return p;
            }
            this.addMarker = function(p, from, priorTo) {
               // if the last angle isn't filled in because we didn't have this point yet ...
               if (priorTo != null && this.angles.length > 0 && this.angles[this.angles.length-1] == null) {
@@ -1195,12 +1195,12 @@
               }
               this.addMarkerAngle(p, from == null ? null : from.angleTo(p));
            }
            this.addMarkerAngle = function(p, a) {
               this.points.push(p);
               this.angles.push(a);
            }
            }
            this.getMarkerPoints = function() { return this.points; }
            this.getMarkerAngles = function() {
               for (var i=0; i<this.angles.length; i++) {
@@ -1398,7 +1398,7 @@
         this.getMarkers = function() {
            var points = this.PathParser.getMarkerPoints();
            var angles = this.PathParser.getMarkerAngles();
            var markers = [];
            for (var i=0; i<points.length; i++) {
               markers.push([points[i], angles[i]]);
@@ -1407,12 +1407,12 @@
         }
      }
      svg.Element.path.prototype = new svg.Element.PathElementBase;
      // pattern element
      svg.Element.pattern = function(node) {
         this.base = svg.Element.ElementBase;
         this.base(node);
         this.createPattern = function(ctx, element) {
            // render me using a temporary svg element
            var tempSvg = new svg.Element.svg();
@@ -1422,28 +1422,28 @@
            tempSvg.attributes['width'] = new svg.Property('width', this.attribute('width').value);
            tempSvg.attributes['height'] = new svg.Property('height', this.attribute('height').value);
            tempSvg.children = this.children;
            var c = document.createElement('canvas');
            c.width = this.attribute('width').Length.toPixels('x');
            c.height = this.attribute('height').Length.toPixels('y');
            tempSvg.render(c.getContext('2d'));
            tempSvg.render(c.getContext('2d'));
            return ctx.createPattern(c, 'repeat');
         }
      }
      svg.Element.pattern.prototype = new svg.Element.ElementBase;
      // marker element
      svg.Element.marker = function(node) {
         this.base = svg.Element.ElementBase;
         this.base(node);
         this.baseRender = this.render;
         this.render = function(ctx, point, angle) {
            ctx.translate(point.x, point.y);
            if (this.attribute('orient').valueOrDefault('auto') == 'auto') ctx.rotate(angle);
            if (this.attribute('markerUnits').valueOrDefault('strokeWidth') == 'strokeWidth') ctx.scale(ctx.lineWidth, ctx.lineWidth);
            ctx.save();
            // render me using a temporary svg element
            var tempSvg = new svg.Element.svg();
            tempSvg.attributes['viewBox'] = new svg.Property('viewBox', this.attribute('viewBox').value);
@@ -1455,7 +1455,7 @@
            tempSvg.attributes['stroke'] = new svg.Property('stroke', this.attribute('stroke').valueOrDefault('none'));
            tempSvg.children = this.children;
            tempSvg.render(ctx);
            ctx.restore();
            if (this.attribute('markerUnits').valueOrDefault('strokeWidth') == 'strokeWidth') ctx.scale(1/ctx.lineWidth, 1/ctx.lineWidth);
            if (this.attribute('orient').valueOrDefault('auto') == 'auto') ctx.rotate(-angle);
@@ -1463,99 +1463,99 @@
         }
      }
      svg.Element.marker.prototype = new svg.Element.ElementBase;
      // definitions element
      svg.Element.defs = function(node) {
         this.base = svg.Element.ElementBase;
         this.base(node);
         this.base(node);
         this.render = function(ctx) {
            // NOOP
         }
      }
      svg.Element.defs.prototype = new svg.Element.ElementBase;
      // base for gradients
      svg.Element.GradientBase = function(node) {
         this.base = svg.Element.ElementBase;
         this.base(node);
         this.gradientUnits = this.attribute('gradientUnits').valueOrDefault('objectBoundingBox');
         this.stops = [];
         this.stops = [];
         for (var i=0; i<this.children.length; i++) {
            var child = this.children[i];
            this.stops.push(child);
         }
         }
         this.getGradient = function() {
            // OVERRIDE ME!
         }
         }
         this.createGradient = function(ctx, element) {
            var stopsContainer = this;
            if (this.attribute('xlink:href').hasValue()) {
               stopsContainer = this.attribute('xlink:href').Definition.getDefinition();
            }
            var g = this.getGradient(ctx, element);
            for (var i=0; i<stopsContainer.stops.length; i++) {
               g.addColorStop(stopsContainer.stops[i].offset, stopsContainer.stops[i].color);
            }
            if (this.attribute('gradientTransform').hasValue()) {
               // render as transformed pattern on temporary canvas
               var rootView = svg.ViewPort.viewPorts[0];
               var rect = new svg.Element.rect();
               rect.attributes['x'] = new svg.Property('x', -svg.MAX_VIRTUAL_PIXELS/3.0);
               rect.attributes['y'] = new svg.Property('y', -svg.MAX_VIRTUAL_PIXELS/3.0);
               rect.attributes['width'] = new svg.Property('width', svg.MAX_VIRTUAL_PIXELS);
               rect.attributes['height'] = new svg.Property('height', svg.MAX_VIRTUAL_PIXELS);
               var group = new svg.Element.g();
               group.attributes['transform'] = new svg.Property('transform', this.attribute('gradientTransform').value);
               group.children = [ rect ];
               var tempSvg = new svg.Element.svg();
               tempSvg.attributes['x'] = new svg.Property('x', 0);
               tempSvg.attributes['y'] = new svg.Property('y', 0);
               tempSvg.attributes['width'] = new svg.Property('width', rootView.width);
               tempSvg.attributes['height'] = new svg.Property('height', rootView.height);
               tempSvg.children = [ group ];
               var c = document.createElement('canvas');
               c.width = rootView.width;
               c.height = rootView.height;
               var tempCtx = c.getContext('2d');
               tempCtx.fillStyle = g;
               tempSvg.render(tempCtx);
               tempSvg.render(tempCtx);
               return tempCtx.createPattern(c, 'no-repeat');
            }
            return g;
            return g;
         }
      }
      svg.Element.GradientBase.prototype = new svg.Element.ElementBase;
      // linear gradient element
      svg.Element.linearGradient = function(node) {
         this.base = svg.Element.GradientBase;
         this.base(node);
         this.getGradient = function(ctx, element) {
            var bb = element.getBoundingBox();
            var x1 = (this.gradientUnits == 'objectBoundingBox'
               ? bb.x() + bb.width() * this.attribute('x1').numValue()
            var x1 = (this.gradientUnits == 'objectBoundingBox'
               ? bb.x() + bb.width() * this.attribute('x1').numValue()
               : this.attribute('x1').Length.toPixels('x'));
            var y1 = (this.gradientUnits == 'objectBoundingBox'
            var y1 = (this.gradientUnits == 'objectBoundingBox'
               ? bb.y() + bb.height() * this.attribute('y1').numValue()
               : this.attribute('y1').Length.toPixels('y'));
            var x2 = (this.gradientUnits == 'objectBoundingBox'
            var x2 = (this.gradientUnits == 'objectBoundingBox'
               ? bb.x() + bb.width() * this.attribute('x2').numValue()
               : this.attribute('x2').Length.toPixels('x'));
            var y2 = (this.gradientUnits == 'objectBoundingBox'
            var y2 = (this.gradientUnits == 'objectBoundingBox'
               ? bb.y() + bb.height() * this.attribute('y2').numValue()
               : this.attribute('y2').Length.toPixels('y'));
@@ -1563,92 +1563,92 @@
         }
      }
      svg.Element.linearGradient.prototype = new svg.Element.GradientBase;
      // radial gradient element
      svg.Element.radialGradient = function(node) {
         this.base = svg.Element.GradientBase;
         this.base(node);
         this.getGradient = function(ctx, element) {
            var bb = element.getBoundingBox();
            var cx = (this.gradientUnits == 'objectBoundingBox'
               ? bb.x() + bb.width() * this.attribute('cx').numValue()
            var cx = (this.gradientUnits == 'objectBoundingBox'
               ? bb.x() + bb.width() * this.attribute('cx').numValue()
               : this.attribute('cx').Length.toPixels('x'));
            var cy = (this.gradientUnits == 'objectBoundingBox'
               ? bb.y() + bb.height() * this.attribute('cy').numValue()
            var cy = (this.gradientUnits == 'objectBoundingBox'
               ? bb.y() + bb.height() * this.attribute('cy').numValue()
               : this.attribute('cy').Length.toPixels('y'));
            var fx = cx;
            var fy = cy;
            if (this.attribute('fx').hasValue()) {
               fx = (this.gradientUnits == 'objectBoundingBox'
               ? bb.x() + bb.width() * this.attribute('fx').numValue()
               fx = (this.gradientUnits == 'objectBoundingBox'
               ? bb.x() + bb.width() * this.attribute('fx').numValue()
               : this.attribute('fx').Length.toPixels('x'));
            }
            if (this.attribute('fy').hasValue()) {
               fy = (this.gradientUnits == 'objectBoundingBox'
               ? bb.y() + bb.height() * this.attribute('fy').numValue()
               fy = (this.gradientUnits == 'objectBoundingBox'
               ? bb.y() + bb.height() * this.attribute('fy').numValue()
               : this.attribute('fy').Length.toPixels('y'));
            }
            var r = (this.gradientUnits == 'objectBoundingBox'
            var r = (this.gradientUnits == 'objectBoundingBox'
               ? (bb.width() + bb.height()) / 2.0 * this.attribute('r').numValue()
               : this.attribute('r').Length.toPixels());
            return ctx.createRadialGradient(fx, fy, 0, cx, cy, r);
         }
      }
      svg.Element.radialGradient.prototype = new svg.Element.GradientBase;
      // gradient stop element
      svg.Element.stop = function(node) {
         this.base = svg.Element.ElementBase;
         this.base(node);
         this.offset = this.attribute('offset').numValue();
         var stopColor = this.style('stop-color');
         if (this.style('stop-opacity').hasValue()) stopColor = stopColor.Color.addOpacity(this.style('stop-opacity').value);
         this.color = stopColor.value;
      }
      svg.Element.stop.prototype = new svg.Element.ElementBase;
      // animation base element
      svg.Element.AnimateBase = function(node) {
         this.base = svg.Element.ElementBase;
         this.base(node);
         svg.Animations.push(this);
         this.duration = 0.0;
         this.begin = this.attribute('begin').Time.toMilliseconds();
         this.maxDuration = this.begin + this.attribute('dur').Time.toMilliseconds();
         this.getProperty = function() {
            var attributeType = this.attribute('attributeType').value;
            var attributeName = this.attribute('attributeName').value;
            if (attributeType == 'CSS') {
               return this.parent.style(attributeName, true);
            }
            return this.parent.attribute(attributeName, true);
            return this.parent.attribute(attributeName, true);
         };
         this.initialValue = null;
         this.removed = false;
         this.removed = false;
         this.calcValue = function() {
            // OVERRIDE ME!
            return '';
         }
         this.update = function(delta) {
         this.update = function(delta) {
            // set initial value
            if (this.initialValue == null) {
               this.initialValue = this.getProperty().value;
            }
            // if we're past the end time
            if (this.duration > this.maxDuration) {
               // loop for indefinitely repeating animations
@@ -1663,49 +1663,49 @@
               else {
                  return false; // no updates made
               }
            }
            }
            this.duration = this.duration + delta;
            // if we're past the begin time
            var updated = false;
            if (this.begin < this.duration) {
               var newValue = this.calcValue(); // tween
               if (this.attribute('type').hasValue()) {
                  // for transform, etc.
                  var type = this.attribute('type').value;
                  newValue = type + '(' + newValue + ')';
               }
               this.getProperty().value = newValue;
               updated = true;
            }
            return updated;
         }
         // fraction of duration we've covered
         this.progress = function() {
            return ((this.duration - this.begin) / (this.maxDuration - this.begin));
         }
         }
      }
      svg.Element.AnimateBase.prototype = new svg.Element.ElementBase;
      // animate element
      svg.Element.animate = function(node) {
         this.base = svg.Element.AnimateBase;
         this.base(node);
         this.calcValue = function() {
            var from = this.attribute('from').numValue();
            var to = this.attribute('to').numValue();
            // tween value linearly
            return from + (to - from) * this.progress();
            return from + (to - from) * this.progress();
         };
      }
      svg.Element.animate.prototype = new svg.Element.AnimateBase;
      // animate color element
      svg.Element.animateColor = function(node) {
         this.base = svg.Element.AnimateBase;
@@ -1714,7 +1714,7 @@
         this.calcValue = function() {
            var from = new RGBColor(this.attribute('from').value);
            var to = new RGBColor(this.attribute('to').value);
            if (from.ok && to.ok) {
               // tween color linearly
               var r = from.r + (to.r - from.r) * this.progress();
@@ -1726,26 +1726,26 @@
         };
      }
      svg.Element.animateColor.prototype = new svg.Element.AnimateBase;
      // animate transform element
      svg.Element.animateTransform = function(node) {
         this.base = svg.Element.animate;
         this.base(node);
      }
      svg.Element.animateTransform.prototype = new svg.Element.animate;
      // font element
      svg.Element.font = function(node) {
         this.base = svg.Element.ElementBase;
         this.base(node);
         this.horizAdvX = this.attribute('horiz-adv-x').numValue();
         this.horizAdvX = this.attribute('horiz-adv-x').numValue();
         this.isRTL = false;
         this.isArabic = false;
         this.fontFace = null;
         this.missingGlyph = null;
         this.glyphs = [];
         this.glyphs = [];
         for (var i=0; i<this.children.length; i++) {
            var child = this.children[i];
            if (child.type == 'font-face') {
@@ -1766,46 +1766,46 @@
                  this.glyphs[child.unicode] = child;
               }
            }
         }
         }
      }
      svg.Element.font.prototype = new svg.Element.ElementBase;
      // font-face element
      svg.Element.fontface = function(node) {
         this.base = svg.Element.ElementBase;
         this.base(node);
         this.base(node);
         this.ascent = this.attribute('ascent').value;
         this.descent = this.attribute('descent').value;
         this.unitsPerEm = this.attribute('units-per-em').numValue();
         this.unitsPerEm = this.attribute('units-per-em').numValue();
      }
      svg.Element.fontface.prototype = new svg.Element.ElementBase;
      // missing-glyph element
      svg.Element.missingglyph = function(node) {
         this.base = svg.Element.path;
         this.base(node);
         this.base(node);
         this.horizAdvX = 0;
      }
      svg.Element.missingglyph.prototype = new svg.Element.path;
      // glyph element
      svg.Element.glyph = function(node) {
         this.base = svg.Element.path;
         this.base(node);
         this.base(node);
         this.horizAdvX = this.attribute('horiz-adv-x').numValue();
         this.unicode = this.attribute('unicode').value;
         this.arabicForm = this.attribute('arabic-form').value;
      }
      svg.Element.glyph.prototype = new svg.Element.path;
      // text element
      svg.Element.text = function(node) {
         this.base = svg.Element.RenderedElementBase;
         this.base(node);
         if (node != null) {
            // add children
            this.children = [];
@@ -1819,21 +1819,21 @@
               }
            }
         }
         this.baseSetContext = this.setContext;
         this.setContext = function(ctx) {
            this.baseSetContext(ctx);
            if (this.style('dominant-baseline').hasValue()) ctx.textBaseline = this.style('dominant-baseline').value;
            if (this.style('alignment-baseline').hasValue()) ctx.textBaseline = this.style('alignment-baseline').value;
         }
         this.renderChildren = function(ctx) {
            var textAnchor = this.style('text-anchor').valueOrDefault('start');
            var x = this.attribute('x').Length.toPixels('x');
            var y = this.attribute('y').Length.toPixels('y');
            for (var i=0; i<this.children.length; i++) {
               var child = this.children[i];
               if (child.attribute('x').hasValue()) {
                  child.x = child.attribute('x').Length.toPixels('x');
               }
@@ -1841,7 +1841,7 @@
                  if (child.attribute('dx').hasValue()) x += child.attribute('dx').Length.toPixels('x');
                  child.x = x;
               }
               var childLength = child.measureText(ctx);
               if (textAnchor != 'start' && (i==0 || child.attribute('x').hasValue())) { // new group?
                  // loop through rest of children
@@ -1854,33 +1854,33 @@
                  child.x -= (textAnchor == 'end' ? groupLength : groupLength / 2.0);
               }
               x = child.x + childLength;
               if (child.attribute('y').hasValue()) {
                  child.y = child.attribute('y').Length.toPixels('y');
               }
               else {
                  if (child.attribute('dy').hasValue()) y += child.attribute('dy').Length.toPixels('y');
                  child.y = y;
               }
               }
               y = child.y;
               child.render(ctx);
            }
         }
      }
      svg.Element.text.prototype = new svg.Element.RenderedElementBase;
      // text base
      svg.Element.TextElementBase = function(node) {
         this.base = svg.Element.RenderedElementBase;
         this.base(node);
         this.getGlyph = function(font, text, i) {
            var c = text[i];
            var glyph = null;
            if (font.isArabic) {
               var arabicForm = 'isolated';
               if ((i==0 || text[i-1]==' ') && i<text.length-2 && text[i+1]!=' ') arabicForm = 'terminal';
               if ((i==0 || text[i-1]==' ') && i<text.length-2 && text[i+1]!=' ') arabicForm = 'terminal';
               if (i>0 && text[i-1]!=' ' && i<text.length-2 && text[i+1]!=' ') arabicForm = 'medial';
               if (i>0 && text[i-1]!=' ' && (i == text.length-1 || text[i+1]==' ')) arabicForm = 'initial';
               if (typeof(font.glyphs[c]) != 'undefined') {
@@ -1894,7 +1894,7 @@
            if (glyph == null) glyph = font.missingGlyph;
            return glyph;
         }
         this.renderChildren = function(ctx) {
            var customFont = this.parent.style('font-family').Definition.getDefinition();
            if (customFont != null) {
@@ -1902,7 +1902,7 @@
               var fontStyle = this.parent.style('font-style').valueOrDefault(svg.Font.Parse(svg.ctx.font).fontStyle);
               var text = this.getText();
               if (customFont.isRTL) text = text.split("").reverse().join("");
               var dx = svg.ToNumberArray(this.parent.attribute('dx').value);
               for (var i=0; i<text.length; i++) {
                  var glyph = this.getGlyph(customFont, text, i);
@@ -1916,8 +1916,8 @@
                  if (fontStyle == 'italic') ctx.transform(1, 0, -.4, 1, 0, 0);
                  ctx.lineWidth = lw;
                  ctx.scale(1/scale, -1/scale);
                  ctx.translate(-this.x, -this.y);
                  ctx.translate(-this.x, -this.y);
                  this.x += fontSize * (glyph.horizAdvX || customFont.horizAdvX) / customFont.fontFace.unitsPerEm;
                  if (typeof(dx[i]) != 'undefined' && !isNaN(dx[i])) {
                     this.x += dx[i];
@@ -1925,15 +1925,15 @@
               }
               return;
            }
            if (ctx.strokeStyle != '') ctx.strokeText(svg.compressSpaces(this.getText()), this.x, this.y);
            if (ctx.fillStyle != '') ctx.fillText(svg.compressSpaces(this.getText()), this.x, this.y);
         }
         this.getText = function() {
            // OVERRIDE ME
         }
         this.measureText = function(ctx) {
            var customFont = this.parent.style('font-family').Definition.getDefinition();
            if (customFont != null) {
@@ -1951,10 +1951,10 @@
               }
               return measure;
            }
            var textToMeasure = svg.compressSpaces(this.getText());
            if (!ctx.measureText) return textToMeasure.length * 10;
            ctx.save();
            this.setContext(ctx);
            var width = ctx.measureText(textToMeasure).width;
@@ -1963,12 +1963,12 @@
         }
      }
      svg.Element.TextElementBase.prototype = new svg.Element.RenderedElementBase;
      // tspan
      // tspan
      svg.Element.tspan = function(node) {
         this.base = svg.Element.TextElementBase;
         this.base(node);
         this.text = node.nodeType == 3 ? node.nodeValue : // text
                  node.childNodes.length > 0 ? node.childNodes[0].nodeValue : // element
                  node.text;
@@ -1977,34 +1977,34 @@
         }
      }
      svg.Element.tspan.prototype = new svg.Element.TextElementBase;
      // tref
      svg.Element.tref = function(node) {
         this.base = svg.Element.TextElementBase;
         this.base(node);
         this.getText = function() {
            var element = this.attribute('xlink:href').Definition.getDefinition();
            if (element != null) return element.children[0].getText();
         }
      }
      svg.Element.tref.prototype = new svg.Element.TextElementBase;
      svg.Element.tref.prototype = new svg.Element.TextElementBase;
      // a element
      svg.Element.a = function(node) {
         this.base = svg.Element.TextElementBase;
         this.base(node);
         this.hasText = true;
         for (var i=0; i<node.childNodes.length; i++) {
            if (node.childNodes[i].nodeType != 3) this.hasText = false;
         }
         // this might contain text
         this.text = this.hasText ? node.childNodes[0].nodeValue : '';
         this.getText = function() {
            return this.text;
         }
         }
         this.baseRenderChildren = this.renderChildren;
         this.renderChildren = function(ctx) {
@@ -2012,7 +2012,7 @@
               // render as text element
               this.baseRenderChildren(ctx);
               var fontSize = new svg.Property('fontSize', svg.Font.Parse(svg.ctx.font).fontSize);
               svg.Mouse.checkBoundingBox(this, new svg.BoundingBox(this.x, this.y - fontSize.Length.toPixels('y'), this.x + this.measureText(ctx), this.y));
               svg.Mouse.checkBoundingBox(this, new svg.BoundingBox(this.x, this.y - fontSize.Length.toPixels('y'), this.x + this.measureText(ctx), this.y));
            }
            else {
               // render as temporary group
@@ -2022,37 +2022,37 @@
               g.render(ctx);
            }
         }
         this.onclick = function() {
            window.open(this.attribute('xlink:href').value);
         }
         this.onmousemove = function() {
            svg.ctx.canvas.style.cursor = 'pointer';
         }
      }
      svg.Element.a.prototype = new svg.Element.TextElementBase;
      svg.Element.a.prototype = new svg.Element.TextElementBase;
      // image element
      svg.Element.image = function(node) {
         this.base = svg.Element.RenderedElementBase;
         this.base(node);
         svg.Images.push(this);
         this.img = document.createElement('img');
         this.loaded = false;
         var that = this;
         this.img.onload = function() { that.loaded = true; }
         this.img.src = this.attribute('xlink:href').value;
         this.renderChildren = function(ctx) {
            var x = this.attribute('x').Length.toPixels('x');
            var y = this.attribute('y').Length.toPixels('y');
            var width = this.attribute('width').Length.toPixels('x');
            var height = this.attribute('height').Length.toPixels('y');
            var height = this.attribute('height').Length.toPixels('y');
            if (width == 0 || height == 0) return;
            ctx.save();
            ctx.translate(x, y);
            svg.AspectRatio(ctx,
@@ -2062,18 +2062,18 @@
                        height,
                        this.img.height,
                        0,
                        0);
            ctx.drawImage(this.img, 0, 0);
                        0);
            ctx.drawImage(this.img, 0, 0);
            ctx.restore();
         }
      }
      svg.Element.image.prototype = new svg.Element.RenderedElementBase;
      // group element
      svg.Element.g = function(node) {
         this.base = svg.Element.RenderedElementBase;
         this.base(node);
         this.getBoundingBox = function() {
            var bb = new svg.BoundingBox();
            for (var i=0; i<this.children.length; i++) {
@@ -2088,21 +2088,21 @@
      svg.Element.symbol = function(node) {
         this.base = svg.Element.RenderedElementBase;
         this.base(node);
         this.baseSetContext = this.setContext;
         this.setContext = function(ctx) {
         this.setContext = function(ctx) {
            this.baseSetContext(ctx);
            // viewbox
            if (this.attribute('viewBox').hasValue()) {
            if (this.attribute('viewBox').hasValue()) {
               var viewBox = svg.ToNumberArray(this.attribute('viewBox').value);
               var minX = viewBox[0];
               var minY = viewBox[1];
               width = viewBox[2];
               height = viewBox[3];
               svg.AspectRatio(ctx,
                           this.attribute('preserveAspectRatio').value,
                           this.attribute('preserveAspectRatio').value,
                           this.attribute('width').Length.toPixels('x'),
                           width,
                           this.attribute('height').Length.toPixels('y'),
@@ -2110,17 +2110,17 @@
                           minX,
                           minY);
               svg.ViewPort.SetCurrent(viewBox[2], viewBox[3]);
               svg.ViewPort.SetCurrent(viewBox[2], viewBox[3]);
            }
         }
         }
      }
      svg.Element.symbol.prototype = new svg.Element.RenderedElementBase;
      svg.Element.symbol.prototype = new svg.Element.RenderedElementBase;
      // style element
      svg.Element.style = function(node) {
      svg.Element.style = function(node) {
         this.base = svg.Element.ElementBase;
         this.base(node);
         // text, or spaces then CDATA
         var css = node.childNodes[0].nodeValue + (node.childNodes.length > 1 ? node.childNodes[1].nodeValue : '');
         css = css.replace(/(\/\*([^*]|[\r\n]|(\*+([^*\/]|[\r\n])))*\*+\/)|(^[\s]*\/\/.*)/gm, ''); // remove comments
@@ -2167,60 +2167,60 @@
         }
      }
      svg.Element.style.prototype = new svg.Element.ElementBase;
      // use element
      // use element
      svg.Element.use = function(node) {
         this.base = svg.Element.RenderedElementBase;
         this.base(node);
         this.baseSetContext = this.setContext;
         this.setContext = function(ctx) {
            this.baseSetContext(ctx);
            if (this.attribute('x').hasValue()) ctx.translate(this.attribute('x').Length.toPixels('x'), 0);
            if (this.attribute('y').hasValue()) ctx.translate(0, this.attribute('y').Length.toPixels('y'));
         }
         this.getDefinition = function() {
            var element = this.attribute('xlink:href').Definition.getDefinition();
            if (this.attribute('width').hasValue()) element.attribute('width', true).value = this.attribute('width').value;
            if (this.attribute('height').hasValue()) element.attribute('height', true).value = this.attribute('height').value;
            return element;
         }
         this.path = function(ctx) {
            var element = this.getDefinition();
            if (element != null) element.path(ctx);
         }
         this.renderChildren = function(ctx) {
            var element = this.getDefinition();
            if (element != null) element.render(ctx);
         }
      }
      svg.Element.use.prototype = new svg.Element.RenderedElementBase;
      // mask element
      svg.Element.mask = function(node) {
         this.base = svg.Element.ElementBase;
         this.base(node);
         this.apply = function(ctx, element) {
            // render as temp svg
            // render as temp svg
            var x = this.attribute('x').Length.toPixels('x');
            var y = this.attribute('y').Length.toPixels('y');
            var width = this.attribute('width').Length.toPixels('x');
            var height = this.attribute('height').Length.toPixels('y');
            // temporarily remove mask to avoid recursion
            var mask = element.attribute('mask').value;
            element.attribute('mask').value = '';
               var cMask = document.createElement('canvas');
               cMask.width = x + width;
               cMask.height = y + height;
               var maskCtx = cMask.getContext('2d');
               this.renderChildren(maskCtx);
               var c = document.createElement('canvas');
               c.width = x + width;
               c.height = y + height;
@@ -2229,25 +2229,25 @@
               tempCtx.globalCompositeOperation = 'destination-in';
               tempCtx.fillStyle = maskCtx.createPattern(cMask, 'no-repeat');
               tempCtx.fillRect(0, 0, x + width, y + height);
               ctx.fillStyle = tempCtx.createPattern(c, 'no-repeat');
               ctx.fillRect(0, 0, x + width, y + height);
            // reassign mask
            element.attribute('mask').value = mask;
            element.attribute('mask').value = mask;
         }
         this.render = function(ctx) {
            // NO RENDER
         }
      }
      svg.Element.mask.prototype = new svg.Element.ElementBase;
      // clip element
      svg.Element.clipPath = function(node) {
         this.base = svg.Element.ElementBase;
         this.base(node);
         this.apply = function(ctx) {
            for (var i=0; i<this.children.length; i++) {
               if (this.children[i].path) {
@@ -2256,7 +2256,7 @@
               }
            }
         }
         this.render = function(ctx) {
            // NO RENDER
         }
@@ -2267,9 +2267,9 @@
      svg.Element.filter = function(node) {
         this.base = svg.Element.ElementBase;
         this.base(node);
         this.apply = function(ctx, element) {
            // render as temp svg
            // render as temp svg
            var bb = element.getBoundingBox();
            var x = this.attribute('x').Length.toPixels('x');
            var y = this.attribute('y').Length.toPixels('y');
@@ -2283,55 +2283,55 @@
               width = bb.width();
               height = bb.height();
            }
            // temporarily remove filter to avoid recursion
            var filter = element.style('filter').value;
            element.style('filter').value = '';
            // max filter distance
            var extraPercent = .20;
            var px = extraPercent * width;
            var py = extraPercent * height;
            var c = document.createElement('canvas');
            c.width = width + 2*px;
            c.height = height + 2*py;
            var tempCtx = c.getContext('2d');
            tempCtx.translate(-x + px, -y + py);
            element.render(tempCtx);
            // apply filters
            for (var i=0; i<this.children.length; i++) {
               this.children[i].apply(tempCtx, 0, 0, width + 2*px, height + 2*py);
            }
            // render on me
            ctx.drawImage(c, 0, 0, width + 2*px, height + 2*py, x - px, y - py, width + 2*px, height + 2*py);
            // reassign filter
            element.style('filter', true).value = filter;
            element.style('filter', true).value = filter;
         }
         this.render = function(ctx) {
            // NO RENDER
         }
         }
      }
      svg.Element.filter.prototype = new svg.Element.ElementBase;
      svg.Element.feGaussianBlur = function(node) {
         this.base = svg.Element.ElementBase;
         this.base(node);
         this.base(node);
         function make_fgauss(sigma) {
            sigma = Math.max(sigma, 0.01);
            var len = Math.ceil(sigma * 4.0) + 1;
            mask = [];
            for (var i = 0; i < len; i++) {
               mask[i] = Math.exp(-0.5 * (i / sigma) * (i / sigma));
            }
            return mask;
            sigma = Math.max(sigma, 0.01);
            var len = Math.ceil(sigma * 4.0) + 1;
            mask = [];
            for (var i = 0; i < len; i++) {
               mask[i] = Math.exp(-0.5 * (i / sigma) * (i / sigma));
            }
            return mask;
         }
         function normalize(mask) {
            var sum = 0;
            for (var i = 1; i < mask.length; i++) {
@@ -2343,34 +2343,34 @@
            }
            return mask;
         }
         function convolve_even(src, dst, mask, width, height) {
           for (var y = 0; y < height; y++) {
            for (var x = 0; x < width; x++) {
              var a = imGet(src, x, y, width, height, 3)/255;
              for (var rgba = 0; rgba < 4; rgba++) {
              for (var rgba = 0; rgba < 4; rgba++) {
                 var sum = mask[0] * (a==0?255:imGet(src, x, y, width, height, rgba)) * (a==0||rgba==3?1:a);
                 for (var i = 1; i < mask.length; i++) {
                  var a1 = imGet(src, Math.max(x-i,0), y, width, height, 3)/255;
                   var a2 = imGet(src, Math.min(x+i, width-1), y, width, height, 3)/255;
                  sum += mask[i] *
                    ((a1==0?255:imGet(src, Math.max(x-i,0), y, width, height, rgba)) * (a1==0||rgba==3?1:a1) +
                  sum += mask[i] *
                    ((a1==0?255:imGet(src, Math.max(x-i,0), y, width, height, rgba)) * (a1==0||rgba==3?1:a1) +
                     (a2==0?255:imGet(src, Math.min(x+i, width-1), y, width, height, rgba)) * (a2==0||rgba==3?1:a2));
                 }
                 imSet(dst, y, x, height, width, rgba, sum);
              }
              }
            }
           }
         }
         }
         function imGet(img, x, y, width, height, rgba) {
            return img[y*width*4 + x*4 + rgba];
         }
         function imSet(img, x, y, width, height, rgba, val) {
            img[y*width*4 + x*4 + rgba] = val;
         }
         function blur(ctx, width, height, sigma)
         {
            var srcData = ctx.getImageData(0, 0, width, height);
@@ -2381,15 +2381,15 @@
            convolve_even(tmp, srcData.data, mask, height, width);
            ctx.clearRect(0, 0, width, height);
            ctx.putImageData(srcData, 0, 0);
         }
         }
         this.apply = function(ctx, x, y, width, height) {
            // assuming x==0 && y==0 for now
            blur(ctx, width, height, this.attribute('stdDeviation').numValue());
         }
      }
      svg.Element.filter.prototype = new svg.Element.feGaussianBlur;
      // title element, do nothing
      svg.Element.title = function(node) {
      }
@@ -2398,15 +2398,15 @@
      // desc element, do nothing
      svg.Element.desc = function(node) {
      }
      svg.Element.desc.prototype = new svg.Element.ElementBase;
      svg.Element.desc.prototype = new svg.Element.ElementBase;
      svg.Element.MISSING = function(node) {
         console.log('ERROR: Element \'' + node.nodeName + '\' not yet implemented.');
      }
      svg.Element.MISSING.prototype = new svg.Element.ElementBase;
      // element factory
      svg.CreateElement = function(node) {
      svg.CreateElement = function(node) {
         var className = node.nodeName.replace(/^[^:]+:/,''); // remove namespace
         className = className.replace(/\-/g,''); // remove dashes
         var e = null;
@@ -2420,20 +2420,20 @@
         e.type = node.nodeName;
         return e;
      }
      // load from url
      svg.load = function(ctx, url) {
         svg.loadXml(ctx, svg.ajax(url));
      }
      // load from xml
      svg.loadXml = function(ctx, xml) {
         svg.loadXmlDoc(ctx, svg.parseXml(xml));
      }
      svg.loadXmlDoc = function(ctx, dom) {
         svg.init(ctx);
         var mapXY = function(p) {
            var e = ctx.canvas;
            while (e) {
@@ -2445,7 +2445,7 @@
            if (window.scrollY) p.y += window.scrollY;
            return p;
         }
         // bind mouse
         if (svg.opts['ignoreMouse'] != true) {
            ctx.canvas.onclick = function(e) {
@@ -2457,16 +2457,16 @@
               svg.Mouse.onmousemove(p.x, p.y);
            };
         }
         var e = svg.CreateElement(dom.documentElement);
         e.root = true;
         // render loop
         var isFirstRender = true;
         var draw = function() {
            svg.ViewPort.Clear();
            if (ctx.canvas.parentNode) svg.ViewPort.SetCurrent(ctx.canvas.parentNode.clientWidth, ctx.canvas.parentNode.clientHeight);
            if (svg.opts['ignoreDimensions'] != true) {
               // set canvas size
               if (e.style('width').hasValue()) {
@@ -2480,21 +2480,21 @@
            }
            var cWidth = ctx.canvas.clientWidth || ctx.canvas.width;
            var cHeight = ctx.canvas.clientHeight || ctx.canvas.height;
            svg.ViewPort.SetCurrent(cWidth, cHeight);
            svg.ViewPort.SetCurrent(cWidth, cHeight);
            if (svg.opts != null && svg.opts['offsetX'] != null) e.attribute('x', true).value = svg.opts['offsetX'];
            if (svg.opts != null && svg.opts['offsetY'] != null) e.attribute('y', true).value = svg.opts['offsetY'];
            if (svg.opts != null && svg.opts['scaleWidth'] != null && svg.opts['scaleHeight'] != null) {
               var xRatio = 1, yRatio = 1;
               if (e.attribute('width').hasValue()) xRatio = e.attribute('width').Length.toPixels('x') / svg.opts['scaleWidth'];
               if (e.attribute('height').hasValue()) yRatio = e.attribute('height').Length.toPixels('y') / svg.opts['scaleHeight'];
               e.attribute('width', true).value = svg.opts['scaleWidth'];
               e.attribute('height', true).value = svg.opts['scaleHeight'];
               e.attribute('height', true).value = svg.opts['scaleHeight'];
               e.attribute('viewBox', true).value = '0 0 ' + (cWidth * xRatio) + ' ' + (cHeight * yRatio);
               e.attribute('preserveAspectRatio', true).value = 'none';
            }
            // clear and render
            if (svg.opts['ignoreClear'] != true) {
               ctx.clearRect(0, 0, cWidth, cHeight);
@@ -2503,88 +2503,88 @@
            if (isFirstRender) {
               isFirstRender = false;
               if (svg.opts != null && typeof(svg.opts['renderCallback']) == 'function') svg.opts['renderCallback']();
            }
            }
         }
         var waitingForImages = true;
         if (svg.ImagesLoaded()) {
            waitingForImages = false;
            draw();
         }
         svg.intervalID = setInterval(function() {
         svg.intervalID = setInterval(function() {
            var needUpdate = false;
            if (waitingForImages && svg.ImagesLoaded()) {
               waitingForImages = false;
               needUpdate = true;
            }
            // need update from mouse events?
            if (svg.opts['ignoreMouse'] != true) {
               needUpdate = needUpdate | svg.Mouse.hasEvents();
            }
            // need update from animations?
            if (svg.opts['ignoreAnimation'] != true) {
               for (var i=0; i<svg.Animations.length; i++) {
                  needUpdate = needUpdate | svg.Animations[i].update(1000 / svg.FRAMERATE);
               }
            }
            // need update from redraw?
            if (svg.opts != null && typeof(svg.opts['forceRedraw']) == 'function') {
               if (svg.opts['forceRedraw']() == true) needUpdate = true;
            }
            // render if needed
            if (needUpdate) {
               draw();
               draw();
               svg.Mouse.runEvents(); // run and clear our events
            }
         }, 1000 / svg.FRAMERATE);
      }
      svg.stop = function() {
         if (svg.intervalID) {
            clearInterval(svg.intervalID);
         }
      }
      svg.Mouse = new (function() {
         this.events = [];
         this.hasEvents = function() { return this.events.length != 0; }
         this.onclick = function(x, y) {
            this.events.push({ type: 'onclick', x: x, y: y,
            this.events.push({ type: 'onclick', x: x, y: y,
               run: function(e) { if (e.onclick) e.onclick(); }
            });
         }
         this.onmousemove = function(x, y) {
            this.events.push({ type: 'onmousemove', x: x, y: y,
               run: function(e) { if (e.onmousemove) e.onmousemove(); }
            });
         }
         }
         this.eventElements = [];
         this.checkPath = function(element, ctx) {
            for (var i=0; i<this.events.length; i++) {
               var e = this.events[i];
               if (ctx.isPointInPath && ctx.isPointInPath(e.x, e.y)) this.eventElements[i] = element;
            }
         }
         this.checkBoundingBox = function(element, bb) {
            for (var i=0; i<this.events.length; i++) {
               var e = this.events[i];
               if (bb.isPointInBox(e.x, e.y)) this.eventElements[i] = element;
            }
            }
         }
         this.runEvents = function() {
            svg.ctx.canvas.style.cursor = '';
            for (var i=0; i<this.events.length; i++) {
               var e = this.events[i];
               var element = this.eventElements[i];
@@ -2592,29 +2592,29 @@
                  e.run(element);
                  element = element.parent;
               }
            }
            }
            // done running, clear
            this.events = [];
            this.events = [];
            this.eventElements = [];
         }
      });
      return svg;
   }
})();
if (CanvasRenderingContext2D) {
   CanvasRenderingContext2D.prototype.drawSvg = function(s, dx, dy, dw, dh) {
      canvg(this.canvas, s, {
         ignoreMouse: true,
         ignoreAnimation: true,
         ignoreDimensions: true,
         ignoreClear: true,
         offsetX: dx,
         offsetY: dy,
         scaleWidth: dw,
      canvg(this.canvas, s, {
         ignoreMouse: true,
         ignoreAnimation: true,
         ignoreDimensions: true,
         ignoreClear: true,
         offsetX: dx,
         offsetY: dy,
         scaleWidth: dw,
         scaleHeight: dh
      });
   }
}
}