SVG utility

svg.js

/*global define, document */
/*jslint white: true */

(function ( global ) {
	
	'use strict';

	var svg, trimWhitespace;

	trimWhitespace = /\s+/g;

	svg = {
		
		// the SVG namespace, required by document.createElementNS
		ns: 'http://www.w3.org/2000/svg',

		// create an SVG element. E.g.
		//
		//     // create a canvas and append to a container element
		//     canvas = svg.create( 'svg', null, container );
		//
		//     // create a group element with no attributes
		//     group = svg.create( 'g' );
		//
		//     // add some path elements to our group, using fictional geometry data
		//     countries.forEach( function ( country ) {
		//         svg.create( 'path', {
		//             'class': 'country',
		//             'data-id': country.id,
		//             d: geometry[ country.id ]
		//         }, group );
		//     });
		//
		//     // append group to canvas (we could have done this at initialisation but this is more efficient)
		//     canvas.appendChild( group );
		create: function ( type, attrs, parent ) {
			var el, key;

			el = document.createElementNS( svg.ns, type );

			if ( attrs ) {
				for ( key in attrs ) {
					if ( attrs.hasOwnProperty( key ) ) {
						el.setAttribute( key, attrs[ key ] );
					}
				}
			}

			if ( parent ) {
				parent.appendChild( el );
			}

			return el;
		},


		// these methods aren't specific to SVG, but I've included them because not all browsers let you
		// do el.classList.add( 'some-class' ) with SVG elements as you would with regular HTML elements
		addClass: function ( el, className ) {
			var classString, classNames;

			if ( el.classList ) {
				el.classList.add( className );
			}

			classString = el.getAttribute( 'class' );

			if ( classString ) {
				classNames = classString.replace( trimWhitespace, ' ' ).split( ' ' );
			} else {
				el.setAttribute( 'class', className );
				return;
			}
			

			if ( classNames.indexOf( className ) === -1 ) {
				el.setAttribute( 'class', classNames.concat( className ).join( ' ' ) );
			}
		},

		removeClass: function ( el, className ) {
			var classString, classNames, index;

			if ( el.classList ) {
				el.classList.remove( className );
			}

			classString = el.getAttribute( 'class' );

			if ( !classString ) {
				return;
			}

			classNames = classString.replace( trimWhitespace, ' ' ).split( ' ' );

			index = classNames.indexOf( className );

			if ( index !== -1 ) {
				classNames.splice( index, 1 );
			}
			
			el.setAttribute( 'class', classNames.join( ' ' ) );
		}
	};


	// export as CommonJS module...
	if ( typeof module !== 'undefined' && module.exports ) {
		module.exports = svg;
	}
 
	// ... or as AMD module...
	else if ( typeof define !== 'undefined' && define.amd ) {
		define( function () { return svg; });
	}
 
	// ... or as browser global
	else {
		global.svg = svg;
	}

}( typeof window !== 'undefined' ? window: this ));