jquery-svg-rails 0.1.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,6 @@
1
+ /* http://keith-wood.name/svg.html
2
+ SVG for jQuery v1.5.0.
3
+ Written by Keith Wood (kbwood{at}iinet.com.au) August 2007.
4
+ Available under the MIT (http://keith-wood.name/licence.html) license.
5
+ Please attribute the author if you use it. */
6
+ (function($){function SVGManager(){this._settings=[];this._extensions=[];this.regional=[];this.regional['']={errorLoadingText:'Error loading'};this.local=this.regional[''];this._uuid=new Date().getTime();this._ie=!!window.ActiveXObject}$.extend(SVGManager.prototype,{markerClassName:'hasSVG',propertyName:'svgwrapper',svgNS:'http://www.w3.org/2000/svg',xlinkNS:'http://www.w3.org/1999/xlink',_wrapperClass:SVGWrapper,_attrNames:{class_:'class',in_:'in',alignmentBaseline:'alignment-baseline',baselineShift:'baseline-shift',clipPath:'clip-path',clipRule:'clip-rule',colorInterpolation:'color-interpolation',colorInterpolationFilters:'color-interpolation-filters',colorRendering:'color-rendering',dominantBaseline:'dominant-baseline',enableBackground:'enable-background',fillOpacity:'fill-opacity',fillRule:'fill-rule',floodColor:'flood-color',floodOpacity:'flood-opacity',fontFamily:'font-family',fontSize:'font-size',fontSizeAdjust:'font-size-adjust',fontStretch:'font-stretch',fontStyle:'font-style',fontVariant:'font-variant',fontWeight:'font-weight',glyphOrientationHorizontal:'glyph-orientation-horizontal',glyphOrientationVertical:'glyph-orientation-vertical',horizAdvX:'horiz-adv-x',horizOriginX:'horiz-origin-x',imageRendering:'image-rendering',letterSpacing:'letter-spacing',lightingColor:'lighting-color',markerEnd:'marker-end',markerMid:'marker-mid',markerStart:'marker-start',stopColor:'stop-color',stopOpacity:'stop-opacity',strikethroughPosition:'strikethrough-position',strikethroughThickness:'strikethrough-thickness',strokeDashArray:'stroke-dasharray',strokeDashOffset:'stroke-dashoffset',strokeLineCap:'stroke-linecap',strokeLineJoin:'stroke-linejoin',strokeMiterLimit:'stroke-miterlimit',strokeOpacity:'stroke-opacity',strokeWidth:'stroke-width',textAnchor:'text-anchor',textDecoration:'text-decoration',textRendering:'text-rendering',underlinePosition:'underline-position',underlineThickness:'underline-thickness',vertAdvY:'vert-adv-y',vertOriginY:'vert-origin-y',wordSpacing:'word-spacing',writingMode:'writing-mode'},_attachSVG:function(a,b){var c=(a.namespaceURI===this.svgNS?a:null);var a=(c?null:a);if($(a||c).hasClass(this.markerClassName)){return}if(typeof b==='string'){b={loadURL:b}}else if(typeof b==='function'){b={onLoad:b}}$(a||c).addClass(this.markerClassName);try{if(!c){c=document.createElementNS(this.svgNS,'svg');c.setAttribute('version','1.1');if(a.clientWidth>0){c.setAttribute('width',a.clientWidth)}if(a.clientHeight>0){c.setAttribute('height',a.clientHeight)}a.appendChild(c)}this._afterLoad(a,c,b||{})}catch(e){$(a).html('<p>SVG is not supported natively on this browser</p>')}},_afterLoad:function(a,b,c){var c=c||this._settings[a.id];this._settings[a?a.id:'']=null;var d=new this._wrapperClass(b,a);$.data(a||b,$.svg.propertyName,d);try{if(c.loadURL){d.load(c.loadURL,c)}if(c.settings){d.configure(c.settings)}if(c.onLoad&&!c.loadURL){c.onLoad.apply(a||b,[d])}}catch(e){alert(e)}},_getSVG:function(a){return $(a).data(this.propertyName)},_destroySVG:function(a){a=$(a);if(!a.hasClass(this.markerClassName)){return}a.removeClass(this.markerClassName).removeData(this.propertyName);if(a[0].namespaceURI!==this.svgNS){a.empty()}},addExtension:function(a,b){this._extensions.push([a,b])},isSVGElem:function(a){return(a.nodeType===1&&a.namespaceURI===$.svg.svgNS)}});function SVGWrapper(a,b){this._svg=a;this._container=b;for(var i=0;i<$.svg._extensions.length;i++){var c=$.svg._extensions[i];this[c[0]]=new c[1](this)}}$.extend(SVGWrapper.prototype,{width:function(){return(this._container?this._container.clientWidth:this._svg.width)},height:function(){return(this._container?this._container.clientHeight:this._svg.height)},root:function(){return this._svg},configure:function(a,b,c){if(!a.nodeName){c=b;b=a;a=this._svg}if(c){for(var i=a.attributes.length-1;i>=0;i--){var d=a.attributes.item(i);if(!(d.nodeName==='onload'||d.nodeName==='version'||d.nodeName.substring(0,5)==='xmlns')){a.attributes.removeNamedItem(d.nodeName)}}}for(var e in b){a.setAttribute($.svg._attrNames[e]||e,b[e])}return this},getElementById:function(a){return this._svg.ownerDocument.getElementById(a)},change:function(a,b){if(a){for(var c in b){if(b[c]==null){a.removeAttribute($.svg._attrNames[c]||c)}else{a.setAttribute($.svg._attrNames[c]||c,b[c])}}}return this},_args:function(b,c,d){c.splice(0,0,'parent');c.splice(c.length,0,'settings');var e={};var f=0;if(b[0]!=null&&b[0].jquery){b[0]=b[0][0]}if(b[0]!=null&&!(typeof b[0]==='object'&&b[0].nodeName)){e['parent']=null;f=1}for(var i=0;i<b.length;i++){e[c[i+f]]=b[i]}if(d){$.each(d,function(i,a){if(typeof e[a]==='object'){e.settings=e[a];e[a]=null}})}return e},title:function(a,b,c){var d=this._args(arguments,['text']);var e=this._makeNode(d.parent,'title',d.settings||{});e.appendChild(this._svg.ownerDocument.createTextNode(d.text));return e},describe:function(a,b,c){var d=this._args(arguments,['text']);var e=this._makeNode(d.parent,'desc',d.settings||{});e.appendChild(this._svg.ownerDocument.createTextNode(d.text));return e},defs:function(a,b,c){var d=this._args(arguments,['id'],['id']);return this._makeNode(d.parent,'defs',$.extend((d.id?{id:d.id}:{}),d.settings||{}))},symbol:function(a,b,c,d,e,f,g){var h=this._args(arguments,['id','x1','y1','width','height']);return this._makeNode(h.parent,'symbol',$.extend({id:h.id,viewBox:h.x1+' '+h.y1+' '+h.width+' '+h.height},h.settings||{}))},marker:function(a,b,c,d,e,f,g,h){var i=this._args(arguments,['id','refX','refY','mWidth','mHeight','orient'],['orient']);return this._makeNode(i.parent,'marker',$.extend({id:i.id,refX:i.refX,refY:i.refY,markerWidth:i.mWidth,markerHeight:i.mHeight,orient:i.orient||'auto'},i.settings||{}))},style:function(a,b,c){var d=this._args(arguments,['styles']);var e=this._makeNode(d.parent,'style',$.extend({type:'text/css'},d.settings||{}));e.appendChild(this._svg.ownerDocument.createTextNode(d.styles));return e},script:function(a,b,c,d){var e=this._args(arguments,['script','type'],['type']);var f=this._makeNode(e.parent,'script',$.extend({type:e.type||'text/javascript'},e.settings||{}));f.appendChild(this._svg.ownerDocument.createTextNode(e.script));if($.svg._ie){$.globalEval(e.script)}return f},linearGradient:function(a,b,c,d,e,f,g,h){var i=this._args(arguments,['id','stops','x1','y1','x2','y2'],['x1']);var j=$.extend({id:i.id},(i.x1!=null?{x1:i.x1,y1:i.y1,x2:i.x2,y2:i.y2}:{}));return this._gradient(i.parent,'linearGradient',$.extend(j,i.settings||{}),i.stops)},radialGradient:function(a,b,c,d,e,r,f,g,h){var i=this._args(arguments,['id','stops','cx','cy','r','fx','fy'],['cx']);var j=$.extend({id:i.id},(i.cx!=null?{cx:i.cx,cy:i.cy,r:i.r,fx:i.fx,fy:i.fy}:{}));return this._gradient(i.parent,'radialGradient',$.extend(j,i.settings||{}),i.stops)},_gradient:function(a,b,c,d){var e=this._makeNode(a,b,c);for(var i=0;i<d.length;i++){var f=d[i];this._makeNode(e,'stop',$.extend({offset:f[0],stopColor:f[1]},(f[2]!=null?{stopOpacity:f[2]}:{})))}return e},pattern:function(a,b,x,y,c,d,e,f,g,h,i){var j=this._args(arguments,['id','x','y','width','height','vx','vy','vwidth','vheight'],['vx']);var k=$.extend({id:j.id,x:j.x,y:j.y,width:j.width,height:j.height},(j.vx!=null?{viewBox:j.vx+' '+j.vy+' '+j.vwidth+' '+j.vheight}:{}));return this._makeNode(j.parent,'pattern',$.extend(k,j.settings||{}))},clipPath:function(a,b,c,d){var e=this._args(arguments,['id','units']);e.units=e.units||'userSpaceOnUse';return this._makeNode(e.parent,'clipPath',$.extend({id:e.id,clipPathUnits:e.units},e.settings||{}))},mask:function(a,b,x,y,c,d,e){var f=this._args(arguments,['id','x','y','width','height']);return this._makeNode(f.parent,'mask',$.extend({id:f.id,x:f.x,y:f.y,width:f.width,height:f.height},f.settings||{}))},createPath:function(){return new SVGPath()},createText:function(){return new SVGText()},svg:function(a,x,y,b,c,d,e,f,g,h){var i=this._args(arguments,['x','y','width','height','vx','vy','vwidth','vheight'],['vx']);var j=$.extend({x:i.x,y:i.y,width:i.width,height:i.height},(i.vx!=null?{viewBox:i.vx+' '+i.vy+' '+i.vwidth+' '+i.vheight}:{}));return this._makeNode(i.parent,'svg',$.extend(j,i.settings||{}))},group:function(a,b,c){var d=this._args(arguments,['id'],['id']);return this._makeNode(d.parent,'g',$.extend({id:d.id},d.settings||{}))},use:function(a,x,y,b,c,d,e){var f=this._args(arguments,['x','y','width','height','ref']);if(typeof f.x==='string'){f.ref=f.x;f.settings=f.y;f.x=f.y=f.width=f.height=null}var g=this._makeNode(f.parent,'use',$.extend({x:f.x,y:f.y,width:f.width,height:f.height},f.settings||{}));g.setAttributeNS($.svg.xlinkNS,'href',f.ref);return g},link:function(a,b,c){var d=this._args(arguments,['ref']);var e=this._makeNode(d.parent,'a',d.settings);e.setAttributeNS($.svg.xlinkNS,'href',d.ref);return e},image:function(a,x,y,b,c,d,e){var f=this._args(arguments,['x','y','width','height','ref']);var g=this._makeNode(f.parent,'image',$.extend({x:f.x,y:f.y,width:f.width,height:f.height},f.settings||{}));g.setAttributeNS($.svg.xlinkNS,'href',f.ref);return g},path:function(a,b,c){var d=this._args(arguments,['path']);return this._makeNode(d.parent,'path',$.extend({d:(d.path.path?d.path.path():d.path)},d.settings||{}))},rect:function(a,x,y,b,c,d,e,f){var g=this._args(arguments,['x','y','width','height','rx','ry'],['rx']);return this._makeNode(g.parent,'rect',$.extend({x:g.x,y:g.y,width:g.width,height:g.height},(g.rx?{rx:g.rx,ry:g.ry}:{}),g.settings||{}))},circle:function(a,b,c,r,d){var e=this._args(arguments,['cx','cy','r']);return this._makeNode(e.parent,'circle',$.extend({cx:e.cx,cy:e.cy,r:e.r},e.settings||{}))},ellipse:function(a,b,c,d,e,f){var g=this._args(arguments,['cx','cy','rx','ry']);return this._makeNode(g.parent,'ellipse',$.extend({cx:g.cx,cy:g.cy,rx:g.rx,ry:g.ry},g.settings||{}))},line:function(a,b,c,d,e,f){var g=this._args(arguments,['x1','y1','x2','y2']);return this._makeNode(g.parent,'line',$.extend({x1:g.x1,y1:g.y1,x2:g.x2,y2:g.y2},g.settings||{}))},polyline:function(a,b,c){var d=this._args(arguments,['points']);return this._poly(d.parent,'polyline',d.points,d.settings)},polygon:function(a,b,c){var d=this._args(arguments,['points']);return this._poly(d.parent,'polygon',d.points,d.settings)},_poly:function(a,b,c,d){var e='';for(var i=0;i<c.length;i++){e+=c[i].join()+' '}return this._makeNode(a,b,$.extend({points:$.trim(e)},d||{}))},text:function(a,x,y,b,c){var d=this._args(arguments,['x','y','value']);if(typeof d.x==='string'&&arguments.length<4){d.value=d.x;d.settings=d.y;d.x=d.y=null}return this._text(d.parent,'text',d.value,$.extend({x:(d.x&&$.isArray(d.x)?d.x.join(' '):d.x),y:(d.y&&$.isArray(d.y)?d.y.join(' '):d.y)},d.settings||{}))},textpath:function(a,b,c,d){var e=this._args(arguments,['path','value']);var f=this._text(e.parent,'textPath',e.value,e.settings||{});f.setAttributeNS($.svg.xlinkNS,'href',e.path);return f},_text:function(a,b,c,d){var e=this._makeNode(a,b,d);if(typeof c==='string'){e.appendChild(e.ownerDocument.createTextNode(c))}else{for(var i=0;i<c._parts.length;i++){var f=c._parts[i];if(f[0]==='tspan'){var g=this._makeNode(e,f[0],f[2]);g.appendChild(e.ownerDocument.createTextNode(f[1]));e.appendChild(g)}else if(f[0]==='tref'){var g=this._makeNode(e,f[0],f[2]);g.setAttributeNS($.svg.xlinkNS,'href',f[1]);e.appendChild(g)}else if(f[0]==='textpath'){var h=$.extend({},f[2]);h.href=null;var g=this._makeNode(e,f[0],h);g.setAttributeNS($.svg.xlinkNS,'href',f[2].href);g.appendChild(e.ownerDocument.createTextNode(f[1]));e.appendChild(g)}else{e.appendChild(e.ownerDocument.createTextNode(f[1]))}}}return e},other:function(a,b,c){var d=this._args(arguments,['name']);return this._makeNode(d.parent,d.name,d.settings||{})},_makeNode:function(a,b,c){a=a||this._svg;var d=this._svg.ownerDocument.createElementNS($.svg.svgNS,b);for(var b in c){var e=c[b];if(e!=null&&(typeof e!=='string'||e!=='')){d.setAttribute($.svg._attrNames[b]||b,e)}}a.appendChild(d);return d},add:function(b,c){var d=this._args((arguments.length===1?[null,b]:arguments),['node']);var f=this;d.parent=d.parent||this._svg;d.node=(d.node.jquery?d.node:$(d.node));try{d.parent.appendChild(d.node.cloneNode(true))}catch(e){d.node.each(function(){var a=f._cloneAsSVG(this);if(a){d.parent.appendChild(a)}})}return this},clone:function(b,c){var d=this;var e=this._args((arguments.length===1?[null,b]:arguments),['node']);e.parent=e.parent||this._svg;e.node=(e.node.jquery?e.node:$(e.node));var f=[];e.node.each(function(){var a=d._cloneAsSVG(this);if(a){a.id='';e.parent.appendChild(a);f.push(a)}});return f},_cloneAsSVG:function(a){var b=null;if(a.nodeType===1){b=this._svg.ownerDocument.createElementNS($.svg.svgNS,this._checkName(a.nodeName));for(var i=0;i<a.attributes.length;i++){var c=a.attributes.item(i);if(c.nodeName!=='xmlns'&&c.nodeValue){if(c.prefix==='xlink'){b.setAttributeNS($.svg.xlinkNS,c.localName||c.baseName,c.nodeValue)}else{b.setAttribute(this._checkName(c.nodeName),c.nodeValue)}}}for(var i=0;i<a.childNodes.length;i++){var d=this._cloneAsSVG(a.childNodes[i]);if(d){b.appendChild(d)}}}else if(a.nodeType===3){if($.trim(a.nodeValue)){b=this._svg.ownerDocument.createTextNode(a.nodeValue)}}else if(a.nodeType===4){if($.trim(a.nodeValue)){try{b=this._svg.ownerDocument.createCDATASection(a.nodeValue)}catch(e){b=this._svg.ownerDocument.createTextNode(a.nodeValue.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'))}}}return b},_checkName:function(a){a=(a.substring(0,1)>='A'&&a.substring(0,1)<='Z'?a.toLowerCase():a);return(a.substring(0,4)==='svg:'?a.substring(4):a)},load:function(l,m){m=(typeof m==='boolean'?{addTo:m}:(typeof m==='function'?{onLoad:m}:(typeof m==='string'?{parent:m}:(typeof m==='object'&&m.nodeName?{parent:m}:(typeof m==='object'&&m.jquery?{parent:m}:m||{})))));if(!m.parent&&!m.addTo){this.clear(false)}var n=[this._svg.getAttribute('width'),this._svg.getAttribute('height')];var o=this;var p=function(a){a=$.svg.local.errorLoadingText+': '+a;if(m.onLoad){m.onLoad.apply(o._container||o._svg,[o,a])}else{o.text(null,10,20,a)}};var q=function(a){var b=new ActiveXObject('Microsoft.XMLDOM');b.validateOnParse=false;b.resolveExternals=false;b.async=false;b.loadXML(a);if(b.parseError.errorCode!==0){p(b.parseError.reason);return null}return b};var r=function(b){if(!b){return}if(b.documentElement.nodeName!=='svg'){var c=b.getElementsByTagName('parsererror');var d=(c.length?c[0].getElementsByTagName('div'):[]);p(!c.length?'???':(d.length?d[0]:c[0]).firstChild.nodeValue);return}var f=(m.parent?$(m.parent)[0]:o._svg);var g={};for(var i=0;i<b.documentElement.attributes.length;i++){var h=b.documentElement.attributes.item(i);if(!(h.nodeName==='version'||h.nodeName.substring(0,5)==='xmlns')){g[h.nodeName]=h.nodeValue}}o.configure(f,g,!m.parent);var j=b.documentElement.childNodes;for(var i=0;i<j.length;i++){try{f.appendChild(o._svg.ownerDocument.importNode(j[i],true));if(j[i].nodeName==='script'){$.globalEval(j[i].textContent)}}catch(e){o.add(f,j[i])}}if(!m.keepRelativeLinks&&l.match('/')){var k=l.replace(/\/[^\/]*$/,'/');$('*',f).each(function(){var a=$(this).attr('xlink:href');if(a&&!a.match(/(^[a-z][-a-z0-9+.]*:.*$)|(^\/.*$)|(^#.*$)/i)){$(this).attr('xlink:href',k+a)}})}if(!m.changeSize){o.configure(f,{width:n[0],height:n[1]})}if(m.onLoad){m.onLoad.apply(o._container||o._svg,[o])}};if(l.match('<svg')){try{r(new DOMParser().parseFromString(l,'text/xml'))}catch(e){p(e)}}else{$.ajax({url:l,dataType:'xml',success:function(a){r(a)},error:function(a,b,c){p(b+(c?' '+c.message:''))}})}return this},remove:function(a){a=(a.jquery?a[0]:a);a.parentNode.removeChild(a);return this},clear:function(a){if(a){this.configure({},true)}while(this._svg.firstChild){this._svg.removeChild(this._svg.firstChild)}return this},toSVG:function(a){a=a||this._svg;return(typeof XMLSerializer==='undefined'?this._toSVG(a):new XMLSerializer().serializeToString(a))},_toSVG:function(a){var b='';if(!a){return b}if(a.nodeType===3){b=a.nodeValue}else if(a.nodeType===4){b='<![CDATA['+a.nodeValue+']]>'}else{b='<'+a.nodeName;if(a.attributes){for(var i=0;i<a.attributes.length;i++){var c=a.attributes.item(i);if(!($.trim(c.nodeValue)===''||c.nodeValue.match(/^\[object/)||c.nodeValue.match(/^function/))){b+=' '+(c.namespaceURI===$.svg.xlinkNS?'xlink:':'')+c.nodeName+'="'+c.nodeValue+'"'}}}if(a.firstChild){b+='>';var d=a.firstChild;while(d){b+=this._toSVG(d);d=d.nextSibling}b+='</'+a.nodeName+'>'}else{b+='/>'}}return b}});function SVGPath(){this._path=''}$.extend(SVGPath.prototype,{reset:function(){this._path='';return this},move:function(x,y,a){a=($.isArray(x)?y:a);return this._coords((a?'m':'M'),x,y)},line:function(x,y,a){a=($.isArray(x)?y:a);return this._coords((a?'l':'L'),x,y)},horiz:function(x,a){this._path+=(a?'h':'H')+($.isArray(x)?x.join(' '):x);return this},vert:function(y,a){this._path+=(a?'v':'V')+($.isArray(y)?y.join(' '):y);return this},curveC:function(a,b,c,d,x,y,e){e=($.isArray(a)?b:e);return this._coords((e?'c':'C'),a,b,c,d,x,y)},smoothC:function(a,b,x,y,c){c=($.isArray(a)?b:c);return this._coords((c?'s':'S'),a,b,x,y)},curveQ:function(a,b,x,y,c){c=($.isArray(a)?b:c);return this._coords((c?'q':'Q'),a,b,x,y)},smoothQ:function(x,y,a){a=($.isArray(x)?y:a);return this._coords((a?'t':'T'),x,y)},_coords:function(a,b,c,d,e,f,g){if($.isArray(b)){for(var i=0;i<b.length;i++){var h=b[i];this._path+=(i===0?a:' ')+h[0]+','+h[1]+(h.length<4?'':' '+h[2]+','+h[3]+(h.length<6?'':' '+h[4]+','+h[5]))}}else{this._path+=a+b+','+c+(d==null?'':' '+d+','+e+(f==null?'':' '+f+','+g))}return this},arc:function(a,b,c,d,e,x,y,f){f=($.isArray(a)?b:f);this._path+=(f?'a':'A');if($.isArray(a)){for(var i=0;i<a.length;i++){var g=a[i];this._path+=(i===0?'':' ')+g[0]+','+g[1]+' '+g[2]+' '+(g[3]?'1':'0')+','+(g[4]?'1':'0')+' '+g[5]+','+g[6]}}else{this._path+=a+','+b+' '+c+' '+(d?'1':'0')+','+(e?'1':'0')+' '+x+','+y}return this},close:function(){this._path+='z';return this},path:function(){return this._path}});SVGPath.prototype.moveTo=SVGPath.prototype.move;SVGPath.prototype.lineTo=SVGPath.prototype.line;SVGPath.prototype.horizTo=SVGPath.prototype.horiz;SVGPath.prototype.vertTo=SVGPath.prototype.vert;SVGPath.prototype.curveCTo=SVGPath.prototype.curveC;SVGPath.prototype.smoothCTo=SVGPath.prototype.smoothC;SVGPath.prototype.curveQTo=SVGPath.prototype.curveQ;SVGPath.prototype.smoothQTo=SVGPath.prototype.smoothQ;SVGPath.prototype.arcTo=SVGPath.prototype.arc;function SVGText(){this._parts=[]}$.extend(SVGText.prototype,{reset:function(){this._parts=[];return this},string:function(a){this._parts.push(['text',a]);return this},span:function(a,b){this._parts.push(['tspan',a,b]);return this},ref:function(a,b){this._parts.push(['tref',a,b]);return this},path:function(a,b,c){this._parts.push(['textpath',b,$.extend({href:a},c||{})]);return this}});$.fn.svg=function(a){var b=Array.prototype.slice.call(arguments,1);if(typeof a==='string'&&a==='get'){return $.svg['_'+a+'SVG'].apply($.svg,[this[0]].concat(b))}return this.each(function(){if(typeof a==='string'){$.svg['_'+a+'SVG'].apply($.svg,[this].concat(b))}else{$.svg._attachSVG(this,a||{})}})};$.svg=new SVGManager()})(jQuery);
@@ -0,0 +1,471 @@
1
+ /* http://keith-wood.name/svg.html
2
+ SVG attribute animations for jQuery v1.5.0.
3
+ Written by Keith Wood (kbwood{at}iinet.com.au) June 2008.
4
+ Available under the MIT (http://keith-wood.name/licence.html) license.
5
+ Please attribute the author if you use it. */
6
+
7
+ (function($) { // Hide scope, no $ conflict
8
+
9
+ var jQueryNew = parseInt($.fn.jquery, 10) > 1 || parseInt($.fn.jquery.substring(2), 10) > 5;
10
+
11
+ // Enable animation for all of these SVG numeric attributes -
12
+ // named as svg-* or svg* (with first character upper case)
13
+ $.each(['x', 'y', 'width', 'height', 'rx', 'ry', 'cx', 'cy', 'r', 'x1', 'y1', 'x2', 'y2',
14
+ 'stroke-width', 'strokeWidth', 'opacity', 'fill-opacity', 'fillOpacity',
15
+ 'stroke-opacity', 'strokeOpacity', 'stroke-dashoffset', 'strokeDashOffset',
16
+ 'font-size', 'fontSize', 'font-weight', 'fontWeight',
17
+ 'letter-spacing', 'letterSpacing', 'word-spacing', 'wordSpacing'],
18
+ function(i, attrName) {
19
+ var ccName = attrName.charAt(0).toUpperCase() + attrName.substr(1);
20
+ if ($.cssProps) {
21
+ $.cssProps['svg' + ccName] = $.cssProps['svg-' + attrName] = attrName;
22
+ }
23
+ $.fx.step['svg' + ccName] = $.fx.step['svg-' + attrName] = function(fx) {
24
+ var realAttrName = $.svg._attrNames[attrName] || attrName;
25
+ var attr = fx.elem.attributes.getNamedItem(realAttrName);
26
+ if (!fx.set) {
27
+ fx.start = (attr ? parseFloat(attr.nodeValue) : 0);
28
+ var offset = (jQueryNew ? '' :
29
+ fx.options.curAnim['svg' + ccName] || fx.options.curAnim['svg-' + attrName]);
30
+ if (/^[+-]=/.exec(offset)) {
31
+ fx.end = fx.start + parseFloat(offset.replace(/=/, ''));
32
+ }
33
+ $(fx.elem).css(realAttrName, '');
34
+ fx.set = true;
35
+ }
36
+ var value = (fx.pos * (fx.end - fx.start) + fx.start) + (fx.unit === '%' ? '%' : '');
37
+ (attr ? attr.nodeValue = value : fx.elem.setAttribute(realAttrName, value));
38
+ };
39
+ }
40
+ );
41
+
42
+ // Enable animation for the SVG strokeDashArray attribute
43
+ $.fx.step['svgStrokeDashArray'] = $.fx.step['svg-strokeDashArray'] =
44
+ $.fx.step['svgStroke-dasharray'] = $.fx.step['svg-stroke-dasharray'] = function(fx) {
45
+ var attr = fx.elem.attributes.getNamedItem('stroke-dasharray');
46
+ if (!fx.set) {
47
+ fx.start = parseDashArray(attr ? attr.nodeValue : '');
48
+ var offset = (jQueryNew ? fx.end :
49
+ fx.options.curAnim['svgStrokeDashArray'] || fx.options.curAnim['svg-strokeDashArray'] ||
50
+ fx.options.curAnim['svgStroke-dasharray'] || fx.options.curAnim['svg-stroke-dasharray']);
51
+ fx.end = parseDashArray(offset);
52
+ if (/^[+-]=/.exec(offset)) {
53
+ offset = offset.split(/[, ]+/);
54
+ if (offset.length % 2 === 1) { // Must have an even number
55
+ var len = offset.length;
56
+ for (var i = 0; i < len; i++) { // So repeat
57
+ offset.push(offset[i]);
58
+ }
59
+ }
60
+ for (var i = 0; i < offset.length; i++) {
61
+ if (/^[+-]=/.exec(offset[i])) {
62
+ fx.end[i] = fx.start[i] + parseFloat(offset[i].replace(/=/, ''));
63
+ }
64
+ }
65
+ }
66
+ fx.set = true;
67
+ }
68
+ var value = $.map(fx.start, function(n, i) {
69
+ return (fx.pos * (fx.end[i] - n) + n);
70
+ }).join(',');
71
+ (attr ? attr.nodeValue = value : fx.elem.setAttribute('stroke-dasharray', value));
72
+ };
73
+
74
+ /** Parse a strokeDashArray definition: dash, gap, ...
75
+ @private
76
+ @param value {string} The definition.
77
+ @return {number[]} The extracted values. */
78
+ function parseDashArray(value) {
79
+ var dashArray = value.split(/[, ]+/);
80
+ for (var i = 0; i < dashArray.length; i++) {
81
+ dashArray[i] = parseFloat(dashArray[i]);
82
+ if (isNaN(dashArray[i])) {
83
+ dashArray[i] = 0;
84
+ }
85
+ }
86
+ if (dashArray.length % 2 === 1) { // Must have an even number
87
+ var len = dashArray.length;
88
+ for (var i = 0; i < len; i++) { // So repeat
89
+ dashArray.push(dashArray[i]);
90
+ }
91
+ }
92
+ return dashArray;
93
+ }
94
+
95
+ // Enable animation for the SVG viewBox attribute
96
+ $.fx.step['svgViewBox'] = $.fx.step['svg-viewBox'] = function(fx) {
97
+ var attr = fx.elem.attributes.getNamedItem('viewBox');
98
+ if (!fx.set) {
99
+ fx.start = parseViewBox(attr ? attr.nodeValue : '');
100
+ var offset = (jQueryNew ? fx.end : fx.options.curAnim['svgViewBox'] || fx.options.curAnim['svg-viewBox']);
101
+ fx.end = parseViewBox(offset);
102
+ if (/^[+-]=/.exec(offset)) {
103
+ offset = offset.split(/[, ]+/);
104
+ while (offset.length < 4) {
105
+ offset.push('0');
106
+ }
107
+ for (var i = 0; i < 4; i++) {
108
+ if (/^[+-]=/.exec(offset[i])) {
109
+ fx.end[i] = fx.start[i] + parseFloat(offset[i].replace(/=/, ''));
110
+ }
111
+ }
112
+ }
113
+ fx.set = true;
114
+ }
115
+ var value = $.map(fx.start, function(n, i) {
116
+ return (fx.pos * (fx.end[i] - n) + n);
117
+ }).join(' ');
118
+ (attr ? attr.nodeValue = value : fx.elem.setAttribute('viewBox', value));
119
+ };
120
+
121
+ /** Parse a viewBox definition: x, y, width, height.
122
+ @private
123
+ @param value {string} The definition.
124
+ @return {number[]} The extracted values. */
125
+ function parseViewBox(value) {
126
+ var viewBox = value.split(/[, ]+/);
127
+ for (var i = 0; i < viewBox.length; i++) {
128
+ viewBox[i] = parseFloat(viewBox[i]);
129
+ if (isNaN(viewBox[i])) {
130
+ viewBox[i] = 0;
131
+ }
132
+ }
133
+ while (viewBox.length < 4) {
134
+ viewBox.push(0);
135
+ }
136
+ return viewBox;
137
+ }
138
+
139
+ // Enable animation for the SVG transform attribute
140
+ $.fx.step['svgTransform'] = $.fx.step['svg-transform'] = function(fx) {
141
+ var attr = fx.elem.attributes.getNamedItem('transform');
142
+ if (!fx.set) {
143
+ fx.start = parseTransform(attr ? attr.nodeValue : '');
144
+ fx.end = parseTransform(fx.end, fx.start);
145
+ fx.set = true;
146
+ }
147
+ var transform = '';
148
+ for (var i = 0; i < fx.end.order.length; i++) {
149
+ switch (fx.end.order.charAt(i)) {
150
+ case 't':
151
+ transform += ' translate(' +
152
+ (fx.pos * (fx.end.translateX - fx.start.translateX) + fx.start.translateX) + ',' +
153
+ (fx.pos * (fx.end.translateY - fx.start.translateY) + fx.start.translateY) + ')';
154
+ break;
155
+ case 's':
156
+ transform += ' scale(' + (fx.pos * (fx.end.scaleX - fx.start.scaleX) + fx.start.scaleX) + ',' +
157
+ (fx.pos * (fx.end.scaleY - fx.start.scaleY) + fx.start.scaleY) + ')';
158
+ break;
159
+ case 'r':
160
+ transform += ' rotate(' + (fx.pos * (fx.end.rotateA - fx.start.rotateA) + fx.start.rotateA) + ',' +
161
+ (fx.pos * (fx.end.rotateX - fx.start.rotateX) + fx.start.rotateX) + ',' +
162
+ (fx.pos * (fx.end.rotateY - fx.start.rotateY) + fx.start.rotateY) + ')';
163
+ break;
164
+ case 'x':
165
+ transform += ' skewX(' + (fx.pos * (fx.end.skewX - fx.start.skewX) + fx.start.skewX) + ')';
166
+ case 'y':
167
+ transform += ' skewY(' + (fx.pos * (fx.end.skewY - fx.start.skewY) + fx.start.skewY) + ')';
168
+ break;
169
+ case 'm':
170
+ var matrix = '';
171
+ for (var j = 0; j < 6; j++) {
172
+ matrix += ',' + (fx.pos * (fx.end.matrix[j] - fx.start.matrix[j]) + fx.start.matrix[j]);
173
+ }
174
+ transform += ' matrix(' + matrix.substr(1) + ')';
175
+ break;
176
+ }
177
+ }
178
+ (attr ? attr.nodeValue = transform : fx.elem.setAttribute('transform', transform));
179
+ };
180
+
181
+ /** Decode a transform string and extract component values.
182
+ @private
183
+ @param value {string} The transform string to parse.
184
+ @param original {object} The settings from the original node.
185
+ @return {object} The combined transformation attributes. */
186
+ function parseTransform(value, original) {
187
+ value = value || '';
188
+ if (typeof value === 'object') {
189
+ value = value.nodeValue;
190
+ }
191
+ var transform = $.extend({translateX: 0, translateY: 0, scaleX: 0, scaleY: 0,
192
+ rotateA: 0, rotateX: 0, rotateY: 0, skewX: 0, skewY: 0, matrix: [0, 0, 0, 0, 0, 0]}, original || {});
193
+ transform.order = '';
194
+ var pattern = /([a-zA-Z]+)\(\s*([+-]?[\d\.]+)\s*(?:[\s,]\s*([+-]?[\d\.]+)\s*(?:[\s,]\s*([+-]?[\d\.]+)\s*(?:[\s,]\s*([+-]?[\d\.]+)\s*[\s,]\s*([+-]?[\d\.]+)\s*[\s,]\s*([+-]?[\d\.]+)\s*)?)?)?\)/g;
195
+ var result = pattern.exec(value);
196
+ while (result) {
197
+ switch (result[1]) {
198
+ case 'translate':
199
+ transform.order += 't';
200
+ transform.translateX = parseFloat(result[2]);
201
+ transform.translateY = (result[3] ? parseFloat(result[3]) : 0);
202
+ break;
203
+ case 'scale':
204
+ transform.order += 's';
205
+ transform.scaleX = parseFloat(result[2]);
206
+ transform.scaleY = (result[3] ? parseFloat(result[3]) : transform.scaleX);
207
+ break;
208
+ case 'rotate':
209
+ transform.order += 'r';
210
+ transform.rotateA = parseFloat(result[2]);
211
+ transform.rotateX = (result[3] ? parseFloat(result[3]) : 0);
212
+ transform.rotateY = (result[4] ? parseFloat(result[4]) : 0);
213
+ break;
214
+ case 'skewX':
215
+ transform.order += 'x';
216
+ transform.skewX = parseFloat(result[2]);
217
+ break;
218
+ case 'skewY':
219
+ transform.order += 'y';
220
+ transform.skewY = parseFloat(result[2]);
221
+ break;
222
+ case 'matrix':
223
+ transform.order += 'm';
224
+ transform.matrix = [parseFloat(result[2]), parseFloat(result[3]),
225
+ parseFloat(result[4]), parseFloat(result[5]), parseFloat(result[6]), parseFloat(result[7])];
226
+ break;
227
+ }
228
+ result = pattern.exec(value);
229
+ }
230
+ if (transform.order === 'm' && Math.abs(transform.matrix[0]) === Math.abs(transform.matrix[3]) &&
231
+ transform.matrix[1] !== 0 && Math.abs(transform.matrix[1]) === Math.abs(transform.matrix[2])) {
232
+ // Simple rotate about origin and translate
233
+ var angle = Math.acos(transform.matrix[0]) * 180 / Math.PI;
234
+ angle = (transform.matrix[1] < 0 ? 360 - angle : angle);
235
+ transform.order = 'rt';
236
+ transform.rotateA = angle;
237
+ transform.rotateX = transform.rotateY = 0;
238
+ transform.translateX = transform.matrix[4];
239
+ transform.translateY = transform.matrix[5];
240
+ }
241
+ return transform;
242
+ }
243
+
244
+ // Enable animation for all of these SVG colour properties - based on jquery.color.js
245
+ $.each(['fill', 'stroke'],
246
+ function(i, attrName) {
247
+ var ccName = attrName.charAt(0).toUpperCase() + attrName.substr(1);
248
+ $.fx.step['svg' + ccName] = $.fx.step['svg-' + attrName] = function(fx) {
249
+ if (!fx.set) {
250
+ fx.start = $.svg._getColour(fx.elem, attrName);
251
+ var toNone = (fx.end === 'none');
252
+ fx.end = (toNone ? $.svg._getColour(fx.elem.parentNode, attrName) : $.svg._getRGB(fx.end));
253
+ fx.end[3] = toNone;
254
+ $(fx.elem).css(attrName, '');
255
+ fx.set = true;
256
+ }
257
+ var colour = 'rgb(' + [
258
+ Math.min(Math.max(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0], 10), 0), 255),
259
+ Math.min(Math.max(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1], 10), 0), 255),
260
+ Math.min(Math.max(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2], 10), 0), 255)
261
+ ].join(',') + ')';
262
+ colour = (fx.end[3] && fx.state === 1 ? 'none' : colour);
263
+ var attr = fx.elem.attributes.getNamedItem(attrName);
264
+ (attr ? attr.nodeValue = colour : fx.elem.setAttribute(attrName, colour));
265
+ }
266
+ }
267
+ );
268
+
269
+ /** Find this attribute value somewhere up the node hierarchy.
270
+ @private
271
+ @param elem {SVGElement} The starting element to find the attribute.
272
+ @param attr {string} The attribute name.
273
+ @return {number[]} RGB components for the attribute colour. */
274
+ $.svg._getColour = function(elem, attr) {
275
+ elem = $(elem);
276
+ var colour;
277
+ do {
278
+ colour = elem.attr(attr) || elem.css(attr);
279
+ // Keep going until we find an element that has colour, or exit SVG
280
+ if ((colour !== '' && colour !== 'none') || elem.hasClass($.svg.markerClassName)) {
281
+ break;
282
+ }
283
+ } while (elem = elem.parent());
284
+ return $.svg._getRGB(colour);
285
+ };
286
+
287
+ /** Parse strings looking for common colour formats.
288
+ @private
289
+ @param colour {string} Colour description to parse.
290
+ @return {number[]} RGB components of this colour. */
291
+ $.svg._getRGB = function(colour) {
292
+ var result;
293
+ // Check if we're already dealing with an array of colors
294
+ if (colour && colour.constructor === Array) {
295
+ return (colour.length === 3 || colour.length === 4 ? colour : colours['none']);
296
+ }
297
+ // Look for rgb(num,num,num)
298
+ if (result = /^rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)$/.exec(colour)) {
299
+ return [parseInt(result[1], 10), parseInt(result[2], 10), parseInt(result[3], 10)];
300
+ }
301
+ // Look for rgb(num%,num%,num%)
302
+ if (result = /^rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)$/.exec(colour)) {
303
+ return [parseFloat(result[1]) * 2.55, parseFloat(result[2]) * 2.55, parseFloat(result[3]) * 2.55];
304
+ }
305
+ // Look for #a0b1c2
306
+ if (result = /^#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})$/.exec(colour)) {
307
+ return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)];
308
+ }
309
+ // Look for #abc
310
+ if (result = /^#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])$/.exec(colour)) {
311
+ return [parseInt(result[1] + result[1], 16), parseInt(result[2] + result[2], 16),
312
+ parseInt(result[3] + result[3], 16)];
313
+ }
314
+ // Otherwise, we're most likely dealing with a named color
315
+ return colours[$.trim(colour).toLowerCase()] || colours['none'];
316
+ };
317
+
318
+ // The SVG named colours
319
+ var colours = {
320
+ '': [255, 255, 255, 1],
321
+ none: [255, 255, 255, 1],
322
+ aliceblue: [240, 248, 255],
323
+ antiquewhite: [250, 235, 215],
324
+ aqua: [0, 255, 255],
325
+ aquamarine: [127, 255, 212],
326
+ azure: [240, 255, 255],
327
+ beige: [245, 245, 220],
328
+ bisque: [255, 228, 196],
329
+ black: [0, 0, 0],
330
+ blanchedalmond: [255, 235, 205],
331
+ blue: [0, 0, 255],
332
+ blueviolet: [138, 43, 226],
333
+ brown: [165, 42, 42],
334
+ burlywood: [222, 184, 135],
335
+ cadetblue: [95, 158, 160],
336
+ chartreuse: [127, 255, 0],
337
+ chocolate: [210, 105, 30],
338
+ coral: [255, 127, 80],
339
+ cornflowerblue: [100, 149, 237],
340
+ cornsilk: [255, 248, 220],
341
+ crimson: [220, 20, 60],
342
+ cyan: [0, 255, 255],
343
+ darkblue: [0, 0, 139],
344
+ darkcyan: [0, 139, 139],
345
+ darkgoldenrod: [184, 134, 11],
346
+ darkgray: [169, 169, 169],
347
+ darkgreen: [0, 100, 0],
348
+ darkgrey: [169, 169, 169],
349
+ darkkhaki: [189, 183, 107],
350
+ darkmagenta: [139, 0, 139],
351
+ darkolivegreen: [85, 107, 47],
352
+ darkorange: [255, 140, 0],
353
+ darkorchid: [153, 50, 204],
354
+ darkred: [139, 0, 0],
355
+ darksalmon: [233, 150, 122],
356
+ darkseagreen: [143, 188, 143],
357
+ darkslateblue: [72, 61, 139],
358
+ darkslategray: [47, 79, 79],
359
+ darkslategrey: [47, 79, 79],
360
+ darkturquoise: [0, 206, 209],
361
+ darkviolet: [148, 0, 211],
362
+ deeppink: [255, 20, 147],
363
+ deepskyblue: [0, 191, 255],
364
+ dimgray: [105, 105, 105],
365
+ dimgrey: [105, 105, 105],
366
+ dodgerblue: [30, 144, 255],
367
+ firebrick: [178, 34, 34],
368
+ floralwhite: [255, 250, 240],
369
+ forestgreen: [34, 139, 34],
370
+ fuchsia: [255, 0, 255],
371
+ gainsboro: [220, 220, 220],
372
+ ghostwhite: [248, 248, 255],
373
+ gold: [255, 215, 0],
374
+ goldenrod: [218, 165, 32],
375
+ gray: [128, 128, 128],
376
+ grey: [128, 128, 128],
377
+ green: [0, 128, 0],
378
+ greenyellow: [173, 255, 47],
379
+ honeydew: [240, 255, 240],
380
+ hotpink: [255, 105, 180],
381
+ indianred: [205, 92, 92],
382
+ indigo: [75, 0, 130],
383
+ ivory: [255, 255, 240],
384
+ khaki: [240, 230, 140],
385
+ lavender: [230, 230, 250],
386
+ lavenderblush: [255, 240, 245],
387
+ lawngreen: [124, 252, 0],
388
+ lemonchiffon: [255, 250, 205],
389
+ lightblue: [173, 216, 230],
390
+ lightcoral: [240, 128, 128],
391
+ lightcyan: [224, 255, 255],
392
+ lightgoldenrodyellow: [250, 250, 210],
393
+ lightgray: [211, 211, 211],
394
+ lightgreen: [144, 238, 144],
395
+ lightgrey: [211, 211, 211],
396
+ lightpink: [255, 182, 193],
397
+ lightsalmon: [255, 160, 122],
398
+ lightseagreen: [32, 178, 170],
399
+ lightskyblue: [135, 206, 250],
400
+ lightslategray: [119, 136, 153],
401
+ lightslategrey: [119, 136, 153],
402
+ lightsteelblue: [176, 196, 222],
403
+ lightyellow: [255, 255, 224],
404
+ lime: [0, 255, 0],
405
+ limegreen: [50, 205, 50],
406
+ linen: [250, 240, 230],
407
+ magenta: [255, 0, 255],
408
+ maroon: [128, 0, 0],
409
+ mediumaquamarine: [102, 205, 170],
410
+ mediumblue: [0, 0, 205],
411
+ mediumorchid: [186, 85, 211],
412
+ mediumpurple: [147, 112, 219],
413
+ mediumseagreen: [60, 179, 113],
414
+ mediumslateblue: [123, 104, 238],
415
+ mediumspringgreen: [0, 250, 154],
416
+ mediumturquoise: [72, 209, 204],
417
+ mediumvioletred: [199, 21, 133],
418
+ midnightblue: [25, 25, 112],
419
+ mintcream: [245, 255, 250],
420
+ mistyrose: [255, 228, 225],
421
+ moccasin: [255, 228, 181],
422
+ navajowhite: [255, 222, 173],
423
+ navy: [0, 0, 128],
424
+ oldlace: [253, 245, 230],
425
+ olive: [128, 128, 0],
426
+ olivedrab: [107, 142, 35],
427
+ orange: [255, 165, 0],
428
+ orangered: [255, 69, 0],
429
+ orchid: [218, 112, 214],
430
+ palegoldenrod: [238, 232, 170],
431
+ palegreen: [152, 251, 152],
432
+ paleturquoise: [175, 238, 238],
433
+ palevioletred: [219, 112, 147],
434
+ papayawhip: [255, 239, 213],
435
+ peachpuff: [255, 218, 185],
436
+ peru: [205, 133, 63],
437
+ pink: [255, 192, 203],
438
+ plum: [221, 160, 221],
439
+ powderblue: [176, 224, 230],
440
+ purple: [128, 0, 128],
441
+ red: [255, 0, 0],
442
+ rosybrown: [188, 143, 143],
443
+ royalblue: [65, 105, 225],
444
+ saddlebrown: [139, 69, 19],
445
+ salmon: [250, 128, 114],
446
+ sandybrown: [244, 164, 96],
447
+ seagreen: [46, 139, 87],
448
+ seashell: [255, 245, 238],
449
+ sienna: [160, 82, 45],
450
+ silver: [192, 192, 192],
451
+ skyblue: [135, 206, 235],
452
+ slateblue: [106, 90, 205],
453
+ slategray: [112, 128, 144],
454
+ slategrey: [112, 128, 144],
455
+ snow: [255, 250, 250],
456
+ springgreen: [0, 255, 127],
457
+ steelblue: [70, 130, 180],
458
+ tan: [210, 180, 140],
459
+ teal: [0, 128, 128],
460
+ thistle: [216, 191, 216],
461
+ tomato: [255, 99, 71],
462
+ turquoise: [64, 224, 208],
463
+ violet: [238, 130, 238],
464
+ wheat: [245, 222, 179],
465
+ white: [255, 255, 255],
466
+ whitesmoke: [245, 245, 245],
467
+ yellow: [255, 255, 0],
468
+ yellowgreen: [154, 205, 50]
469
+ };
470
+
471
+ })(jQuery);