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

The SVG namespace is set at the top of the page for later reuse. After you create an SVG element, it still
behaves like a normal DOM element, so the Q.wrapper element can be created the same way it is normally
created.
Adding SVG Sprites
Up next is the SVG sprite class, which shares a lot of the same ideas as the DOMSprite: It must actually create
a browser element and set properties on that element to move it around. The difference here is that the type of
element created is dependent on the shape that the SVGSprite is set to.
Open up quintus_svg.js again, and add the code from Listing 14-5 to the bottom of the file before the
final closing curly brace.
Listing 14-5: The Q.SVGSprite class
Q.SVGSprite = Q.Sprite.extend({
init: function(props) {
this._super(_(props).defaults({
shape: 'block',
color: 'black',
angle: 0,
active: true,
cx: 0,
cy: 0
}));
this.createShape();
this.svg.sprite = this;
this.rp = {};
this.setTransform();
},
set: function(attr) {
_.each(attr,function(value,key) {
this.svg.setAttribute(key,value);
},this);
},
createShape: function() {
var p = this.p;
switch(p.shape) {
case 'block':
this.svg = document.createElementNS(SVG_NS,'rect');
_.extend(p,{ cx: p.w/2, cy: p.h/2 });
this.set({ width: p.w, height: p.h });
break;
case 'circle':
this.svg = document.createElementNS(SVG_NS,'circle');
this.set({ r: p.r, cx: 0, cy: 0 });