SVG JavaScript Node Reference

By mbystedt on Dec 11, 2012, 6:53:24 AM

This SVG JavaScript reference shows the major properties and methods available for nodes. Nodes can be thought of as the components of a parsed XML file. So, each SVG element (rectangles, paths, groups, etc.) in the file becomes a node. As well, the text between the tags in the xml source become nodes. These nodes are all connected together in a hierarchy that matches the XML file.

The JavaScript examples below will all use this sample SVG document:

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
    width="640" height="180" viewBox="0 0 640 180" >
 
  <g id="group">
    <rect id="myRectangle" x="20" y="20" width="100" height="100" fill="blue" />
    <circle id="myCircle" cx="120" cy="120" r="40" fill="none" stroke="red" />
    <image id="myImage" x="200" y="100" width="300" height="300" xlink:href="dog.jpg" />
  </g>
  <script type="text/ecmascript"><![CDATA[
    var rectNode = document.getElementById("myRectangle");
    var imgNode = document.getElementById("myImage");
 
    // Sample code running here!
  ]]></script>
</svg>

SVG Node Properties

Type: String

The unique id of this node.

// Get the rectangle's id. Result: id contains myRectangle.
var id = rectNode.id;
// Set the rectangle's id to newId
rectNode.id = "newId";

Type: String

nodeName

The tag name of the element.

// Will output "rect" to console.
console.log(rectNode.nodeName);

Type: Node

parentNode

The immediate parent of this node.

// Will output "group" to console.
console.log(rectNode.parentNode.id);

Type: Node

previousSibling

This is set to the previous node or null if there is none.

// Will output "#text" to console.
// All text between elements becomes a node as well. 
console.log(imgNode.previousSibling.nodeName);

Type: Node

nextSibling

This is set to the next node or null if there is none.

// Will output "circle". There is a "#text" node between them.
console.log(rectNode.nextSibling.nextSibling.nodeName);

Type: Array[Node]

childNodes

An array containing all the child nodes of this node.

The code 'node.childNodes[0]' is equivalent to 'node.firstChild';

// Will output: #text, rect, #text, circle, #text, image, #text
var groupNode = document.getElementById("group");
var i = 0;
for (; i < groupNode.childNodes.length; i++) {
  console.log(groupNode.childNodes[i].nodeName);
}

Type: Node

firstChild

The first child node. See: childNodes

SVG Node Methods

Return: String

getAttributeNS(nameSpace, attributeName)

Returns the attribute with the passed in name. The returned object is always a string. If you are getting a numeric attribute, explicitly call the function parseInt(string) or parseFloat(string) to convert it into a numeric type. This will avoid problems with the '+' operator as it also concatenates strings.

// Will output "blue" to console.
console.log(rectNode.getAttributeNS(null, "fill"));
// Will output "2020" to console. This is not the intended result.
console.log(20 + rectNode.getAttributeNS(null, "x"));
// Will output "40" to console. Correct!
console.log(20 + parseInt(rectNode.getAttributeNS(null, "x")));

Return: n/a

setAttributeNS(nameSpace, attributeName, attributeValue)

Sets the attribute with the passed in name and value.

// Will turn the rectangle green
rectNode.setAttributeNS(null, "fill", "green");
// Will switch to a different image. Requires namespace to be set.
var xlinkns = "http://www.w3.org/1999/xlink";
imgNode.setAttributeNS(xlinkns, "xlink:href", "cat.jpg");

Return: n/a

appendChild(node)

Appends the node to this node. See Creating Nodes

Return: n/a

replaceChild(targetNode, replacementNode)

Replaces the child node with the new node. See Creating Nodes

Return: n/a

insertBefore(targetNode, newNode)

Inserts the child node before the target node. See Creating Nodes

Return: n/a

removeChild(node)

This removes the specified node from this node. This, by definition, alters the childNodes array. See Destroying Nodes