HTML and CSS Reference
In-Depth Information
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
rect.setAttribute('width',500);
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:
image.setAttributeNS("http://www.w3.org/1999/xlink","href","image.png");
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.
