Chapter 14. Using the SVG DOM
The methods and properties used in the scripting examples in Chapter 13—creating and selecting elements, getting and setting styles and attributes—are part of the Document Object Model (DOM) specification, and are not unique to SVG. The SVG 1.1 specifications define numerous additional methods to make it easier to work with the two-dimensional graphical layout of SVG. These methods allow you to figure out exactly where your text or path elements have been drawn, control the timing of your animation elements, and convert between transformed coordinate systems.
Determining the Value of Element Attributes
In Scripting SVG, we used
setAttribute to access element attributes. Those methods treat the attributes as simple strings, without worrying about what they represent. If you need to calculate the difference in width between an element with
width="10em" and an element with
width="100px", you would need to extract the numbers from the strings, find out the font size, and convert the measurements.
To make things easier, SVG element objects have properties representing the key attributes for that element type. An
SVGCircleElement object, which represents a
<circle> in your SVG code, has properties
<rect> in markup) has properties
These properties don’t store simple numbers, however. In most cases, the properties each contain two subproperties:
animVal object ...