HTML5 SVG 2D Introduction 12 - Introduction to SVG DOM and DOM Operations

Author：Eve Cole Update Time：2025-04-03 16:00:04

Using scripts can easily complete various complex tasks, and it is also a mainstream way to complete animation and interaction. Since SVG is an element of html, it supports ordinary DOM operations. Since SVG is essentially an XML document, there is also a special DOM operation, which is mostly called SVG DOM. Of course, since IE does not support SVG at present, developing SVG pages based on IE requires different methods. Everyone is actually very familiar with this part of the knowledge, so let’s take a look at it briefly below.

DOM operations in HTML pages

Everyone should be familiar with DOM. Here is a small example:

<head>

<style>

#svgContainer {

width: 400px;

height: 400px;

background-color: #a0a0a0;

}

</style>

function CreateSVG () {

var xmlns = "http://www.w3.org/2000/svg";

var boxWidth = 300;

var boxHeight = 300;

var svgElem = document.createElementNS (xmlns, "svg");

svgElem.setAttributeNS (null, "viewBox", "0 0 " + boxWidth + " " + boxHeight);

svgElem.setAttributeNS (null, "width", boxWidth);

svgElem.setAttributeNS (null, "height", boxHeight);

svgElem.style.display = "block";

var g = document.createElementNS (xmlns, "g");

svgElem.appendChild (g);

g.setAttributeNS (null, 'transform', 'matrix(1,0,0,-1,0,300)');

// draw linear gradient

var defs = document.createElementNS (xmlns, "defs");

var grad = document.createElementNS (xmlns, "linearGradient");

grad.setAttributeNS (null, "id", "gradient");

grad.setAttributeNS (null, "x1", "0%");

grad.setAttributeNS (null, "x2", "0%");

grad.setAttributeNS (null, "y1", "100%");

grad.setAttributeNS (null, "y2", "0%");

var stopTop = document.createElementNS (xmlns, "stop");

stopTop.setAttributeNS (null, "offset", "0%");

stopTop.setAttributeNS (null, "stop-color", "#ff0000");

grad.appendChild (stopTop);

var stopBottom = document.createElementNS (xmlns, "stop");

stopBottom.setAttributeNS (null, "offset", "100%");

stopBottom.setAttributeNS (null, "stop-color", "#0000ff");

grad.appendChild (stopBottom);

defs.appendChild (grad);

g.appendChild (defs);

// draw borders

var coordinates = "M 0, 0";

coordinates += " l 0, 300";

coordinates += " l 300, 0";

coords += " l 0, -300";

coords += " l -300, 0";

var path = document.createElementNS (xmlns, "path");

path.setAttributeNS (null, 'stroke', "#000000");

path.setAttributeNS (null, 'stroke-width', 10);

path.setAttributeNS (null, 'stroke-linejoin', "round");

path.setAttributeNS (null, 'd', coordinates);

path.setAttributeNS (null, 'fill', "url(#gradient)");

path.setAttributeNS (null, 'opacity', 1.0);

g.appendChild (path);

var svgContainer = document.getElementById ("svgContainer");

svgContainer.appendChild (svgElem);

}

</script>

</head>

</body>

Have you discovered it? It's exactly the same as the DOM operation of ordinary html elements:

Select element: document.getElementById

Create element: document.createElementNS

Another way to create child elements: element.createChildNS

Add element: node.appendChild

Set the attribute of the element: element.setAttributeNS/element.setAttribute

In addition to the above operations, the following operations and properties are also very common:

Get the attribute value of the element: element.getAttributeNS/element.getAttribute

Check whether an attribute exists in an element: element.hasAttributeNS

Remove an attribute of an element: element.removeAttributeNS

Parent element, child element and sibling node: element.parentNode/element.firstChild/child.nextSibling

These methods will not be introduced in detail here; in addition, the node structure of the DOM tree and the inheritance relationship between objects are similar, so I will not explain in detail. Students who need it will refer to the documentation for the DOM Core Object below.

However, it should be noted that SVG is essentially an XML document, so the DOM method basically uses is a method with NS ending to provide related namespaces; if the namespace is already provided when creating an element and there is no problem with multiple namespaces, then when setting the related attributes, you can also choose to use a version without NS, such as using element.setAttribute to set the attribute value directly. However, in general, it is still highly recommended to use a version with NS ending, because this version always works normally, even in the case of multiple namespaces.

SVG DOM

I have not found any comprehensive information about this and the standard DOM. At present, I only know that the assignment methods of attributes are different. If you have any students who understand this, please give me a message.

In the above example, we use element.setAttributeNS/element.setAttribute to assign values to attributes. In SVG DOM, we can use an object-oriented method to assign values to object attributes through access points. For example, the following is a comparison of the two methods:

Ordinary DOM method:

element.setAttribute("x", "10");

element.setAttribute("y", "20");

element.setAttribute("width", "100%");

element.setAttribute("height", "2em");

And SVG DOM method:

element.x.baseVal.value = 10;

element.y.baseVal.value = 20;

element.width.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 100);

element.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_EMS, 10);

DOM scripts are traditional scripts, and their characteristics are to set individual items by building a value string. The advantage of SVG DOM script style is that you don't have to build value strings, so performance is better than DOM scripts.

Scripts embedded in SVG

If you want to add scripts inside SVG, you need to use script elements. This has been mentioned before. In addition to this, it is basically the same as putting scripts in the HTML outside. See an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

<![CDATA[

function showRectColor() {

alert(document.getElementById("myBlueRect").getAttributeNS(null,"fill"));

}

function showRectArea(evt) {

var width = parseFloat(evt.target.getAttributeNS(null,"width"));

var height = parseFloat(evt.target.getAttributeNS(null,"height"));

alert("The rectangle area is: " + (width * height));

}

function showRootChildrenNr() {

alert("Nr of Children: "+document.documentElement.childNodes.length);

}

]]>

</script>

<text x="40" y="100" onclick="showRectColor()">Click on this text to show rectangle color.</text>

<text x="40" y="130">Click on rectangle to show rectangle area.</text>

<text x="40" y="160" onclick="showRootChildrenNr()">Click on this text to show the number of child

<tspan x="40" dy="20">elements of the root element.</tspan></text>

</g>

</svg>

</body>

</html>

In this example, a common way to get DOM objects is listed :

1. Get the object through methods such as document.getElementById or document.getElementByClassName;

2. Get the document object through document.documentElement or document.rootElement;

3. Get the object that generates the event through the event parameter evt.target. The advantage of this method is that you can get the object that generates the event without using id.

The rest of the scripts are basically the same as ordinary DOM.

Practical reference:

Script index: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Development Center: https://developer.mozilla.org/en/SVG

Popular reference: http://www.chinasvg.com/

Official document: http://www.w3.org/TR/SVG11/

DOM Core Object API: http://reference.sitepoint.com/javascript/Document

Common properties and methods of SVG DOM: http://riso.iteye.com/blog/393454, http://riso.iteye.com/blog/393459