HTML and CSS Reference
This adds the child ( <rect> in this case) to the end of the SVG container. Because SVG doesn't have the
idea of a zIndex, the order of SVG elements in the container is actually quite important as later elements are
drawn over previous elements.
Setting and Getting SVG Attributes
Armed with an <svg> container and the ability to create elements inside of that container, you might think that
setting properties on those elements is as easy as setting the attribute the way you would on a DOM element:
// This won't work
rect.width = 500;
Unfortunately, that's not the case. Trying to set attributes on SVG elements directly isn't going to work. To
set attributes you need to use the setAttribute or setAttributeNS methods, which set a named prop-
erty either without a namespace or in a specific provided namespace.
Most svg element properties aren't in a namespace, so using the setAttribute method works for prop-
erties like width , height , and the like. For example, to set the width on a rect object, you could write:
// This will work
Some elements, however, do have properties in a namespace. One example is the xlink:href property
from the <image> tag discussed earlier:
<image xlink:href='images/penguin.png' width='32' height='32' />
To set this property, you need to use setAttributeNS and provide the correct namespace:
There is an equivalent set of methods— getAttribute and getAttributeNS —that act as getters of
specific attributes. To retrieve the width of a rect object, for example, you could write:
var width = rect.getAttribute('width');
Armed with the ability to create and manipulate SVG elements, it's now time to use an extension to the Quin-
tus engine that adds support for SVG elements.
Adding SVG Support to Quintus
SVG elements are going to be added to the engine in much the same way that DOM elements were: by adding
in a custom Q.setupSVG method to set up an <svg> element and then creating a custom Q.SVGSprite
class that knows to create a corresponding SVG element.
The major complication to creating a game with SVG elements is that the collision detection becomes tricky
if you allow elements made up of arbitrary polygons that can be rotated at random angles. Luckily, this isn't a
problem that the engine must solve because the 2-D physics engine, Box2dweb that is going to be added in the
next section is responsible for the details of handling collisions.