Building Games with SVG and Physics - HTML5 Mobile Game Development - page 267

Creating an SVG Module
Armed with the knowledge of how to interact with SVG via JavaScript, it's time to create the Quintus SVG
module. Open up a new file called quintus_svg.js , and enter the code from Listing 14-4 .
Listing 14-4: The base Quintus.SVG module
Quintus.SVG = function(Q) {
var SVG_NS ="http://www.w3.org/2000/svg";
Q.setupSVG = function(id,options) {
options = options || {};
id = id || "quintus";
Q.svg = $(_.isString(id) ? "#" + id : id)[0];
if(!Q.svg) {
Q.svg = document.createElementNS(SVG_NS,'svg');
Q.svg.setAttribute('width',320);
Q.svg.setAttribute('height',420);
document.body.appendChild(Q.svg);
}
if(options.maximize) {
var w = $(window).width()-1;
var h = $(window).height()-10;
Q.svg.setAttribute('width',w);
Q.svg.setAttribute('height',h);
}
Q.width = Q.svg.getAttribute('width');
Q.height = Q.svg.getAttribute('height');
Q.wrapper = $(Q.svg)
.wrap("<div id='" + id + "_container'/>")
.parent()
.css({ width: Q.width,
height: Q.height,
margin: '0 auto' });
setTimeout(function() { window.scrollTo(0,1); }, 0);
$(window).bind('orientationchange',function() {
setTimeout(function() { window.scrollTo(0,1); }, 0);
});
return Q;
};
};
The Q.setupSVG method follows a lot of the same patterns as the Q.setup and Q.setupDOM methods
before it. The major difference is that this method needs to use the document.createElementNS method
and setAttribute to create and modify elements instead of trusty old jQuery or setting object properties
directly.