svg Animating SVG with CSS

13.4 Scripting SVG - Nodes, attributes, styles

DOM Nodes

As the SVG viewer reads the markup (structure) in an SVG document, it creates a tree of nodes, which are objects in memory that correspond to the structure and content of the markup. This is the Document Object Model (DOM), and it is accessible to your scripts.

The first thing you need to do in order to deal with the DOM is to access the nodes.

The main function you will probably use to deal with the DOM is document.getElementById(idString).
This function takes a string that is the id of an SVG element and returns a reference to that element's node in the DOM.
If you want all of the elements in a document that have a particular tag name (the tag name is the “svg” in <svg> or “rect” in <rect>),
you can use another document method, getElementsByTagName(name); this returns an array of nodes.

DOM Nodes' Attributes

Once you have an element's node, you can reach and modify its attributes and styles. You can:

Read its attributes by calling element.getAttribute(attributeName), which returns the attribute value as a string.
Change an attribute's value by calling element.setAttribute(name, newValue);
if the attribute with the given name does not exist, it will be created.
Remove attributes by calling element.removeAttribute(name).

DOM Nodes' Styles

You could modify inline styles using element.setAttribute("style",newStyleValue), but this overwrites all styles on the element.
Instead, you can work with the element.style property. Use:

element.style.getPropertyValue(propertyName) to access a specific style
element.style.setProperty(propertyName, propertyValue) to set a specific style
element.style.removeProperty(propertyName) to delete it.

If you do want to set all styles at once, then you can directly modify element.style.cssText, which is a string representation of all the styles in property-name: value format. When you read this property, it returns the concatenated text of all of the node's descendants. If you set it, you will replace any descendant nodes with a single text block.

Example. Script that displays info about the rectangle and changes its property

Notice. The script in Example 13-5 is included in the SVG file after the <rect> and <text> elements that it uses. This ensures that the elements exist in the DOM before the script is run.

Explanation

In order to easily access an element from a script, give it a unique id.
The <![CDATA[ is used to ensure that any stray < or > signs
are not interpreted as markup.
Select elements from the document by id, and save the results in variables:
var txt = document.getElementById("output"); var r = document.getElementById("rectangle");
The results of getAttribute() and style.getPropertyValue() are strings; these are concatenated together with + to create the message string.
This r.setAttribute("height", "30"); changes the height of the rectangle to convert it to a square.
Finally txt.textContent= msg;, set the content of the <text> element to display the attributes.

<svg width="300" height="100" viewBox="0 0 300 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Accessing Content in SVG</title>
<rect id="rectangle" x="10" y="20" width="30" height="40"
style="stroke:gray; fill: #ff9; stroke-width:3"/>
<text id="output" x="10" y="80" style="font-size:9pt"></text>
<script type="application/ecmascript">
    // <![CDATA[
    var txt = document.getElementById("output");
    var r = document.getElementById("rectangle");
    var msg = r.getAttribute("x") + ", " +
    r.getAttribute("y") + " " +
    r.style.getPropertyValue("stroke") + " " +
    r.style.getPropertyValue("fill");
    r.setAttribute("height", "30");
    txt.textContent= msg;
    // ]]>
</script>
</svg>