Introduction to SVG 2D in HTML5 12—Introduction to SVG DOM and DOM operations_html5 tutorial skills

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. And since SVG is essentially an xml document, there is also a special DOM operation, which is mostly called SVG DOM. Of course, since IE currently does not support SVG, developing SVG pages based on IE requires different methods. Everyone is actually familiar with this part of knowledge, so let’s just take a brief look at it.

DOM operations in HTML pages
Everyone should be familiar with DOM. Here is a small example:

Copy code

The code is as follows:

<script> <br />function CreateSVG () { <br />var xmlns = "http://www.w3.org/2000/svg"; <br />var boxWidth = 300; <br />var boxHeight = 300; <br />var svgElem = document.createElementNS (xmlns, "svg"); <br />svgElem.setAttributeNS (null, "viewBox", "0 0 " boxWidth " " boxHeight); <br />svgElem.setAttributeNS (null, "width", boxWidth); <br />svgElem.setAttributeNS (null, "height" , boxHeight); <br />svgElem.style.display = "block"; <br />var g = document.createElementNS (xmlns, "g"); <br />svgElem.appendChild (g); <br />g.setAttributeNS (null, 'transform', 'matrix(1,0,0,-1,0,300)'); <br />// draw linear gradient <br />var defs = document.createElementNS (xmlns, "defs"); <br />var grad = document.createElementNS (xmlns, "linearGradient"); <br />grad.setAttributeNS (null, "id", "gradient"); <br />grad.setAttributeNS (null, "x1", "0% "); <br />grad.setAttributeNS (null, "x2", "0%"); <br />grad.setAttributeNS (null, "y1", "100%"); <br />grad.setAttributeNS (null, "y2", "0%"); <br />var stopTop = document.createElementNS (xmlns, "stop"); <br />stopTop.setAttributeNS (null, "offset", "0%"); <br />stopTop .setAttributeNS (null, "stop-color", "#ff0000"); <br />grad.appendChild (stopTop); <br />var stopBottom = document.createElementNS (xmlns, "stop"); <br />stopBottom.setAttributeNS (null, "offset", "100%"); <br />stopBottom.setAttributeNS (null, "stop-color", "#0000ff"); <br />grad.appendChild (stopBottom); <br />defs.appendChild (grad); <br />g.appendChild (defs); <br />// draw borders <br />var coords = "M 0, 0"; <br />coords = " l 0, 300"; <br />coords = " l 300, 0"; <br />coords = " l 0, -300"; <br />coords = " l -300, 0"; <br />var path = document.createElementNS (xmlns, "path") ; <br />path.setAttributeNS (null, 'stroke', "#000000"); <br />path.setAttributeNS (null, 'stroke-width', 10); <br />path.setAttributeNS (null, 'stroke- linejoin', "round"); <br />path.setAttributeNS (null, 'd', coords); <br />path.setAttributeNS (null, 'fill', "url(#gradient)"); <br />path .setAttributeNS (null, 'opacity', 1.0); <br />g.appendChild (path); <br />var svgContainer = document.getElementById ("svgContainer"); <br />svgContainer.appendChild (svgElem); <br /> } <br /></script>

Have you noticed, the DOM operation of ordinary html elements is exactly the same:
Select element: document.getElementById
Create element: document.createElementNS
Another way to create child elements: element. createChildNS
Add an element: node.appendChild
Set the element's attributes: element.setAttributeNS/element.setAttribute
In addition to the above operations, the following operations and attributes are also common:
Get the element's attributes Attribute value: element.getAttributeNS/element.getAttribute
Check whether an attribute exists on the element: element.hasAttributeNS
Remove an attribute of the 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 also similar, so they will not be described in detail. Students who need it can refer to the documentation of DOM Core Object later.
However, it should be noted that SVG is essentially an XML document, so the basic DOM methods used are all ending with NS to provide related namespaces; if a namespace has been provided when creating an element, and there are not multiple namespaces problem, then when setting related attributes, you can also choose to use the version without NS, such as directly using element.setAttribute to set the attribute value, but in general, it is still strongly recommended to use the version with NS ending, because this version always It works fine, even in the case of multiple namespaces.
SVG DOM
How is this different from the standard DOM? I haven’t found any comprehensive information. Currently, I only know that the methods of assigning attributes are different. If there are any students who know about this, please let me know.
In the above example, we use element.setAttributeNS/element.setAttribute to assign values ​​to attributes. In SVG DOM, you can use the object-oriented method to assign values ​​to the attributes of objects by accessing dot numbers. For example, the following are two Comparison of methods:
Common DOM method:

Copy the code

The code is as follows:

element.setAttribute("x", "10");
element.setAttribute("y", "20");
element.setAttribute("width", "100%");
element.setAttribute("height", "2em");

And the SVG DOM way:

Copy code

The code is as follows:

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 script is a traditional script, which is characterized by passing Construct "value strings" to set individual items. The advantage of the SVG DOM script style is that you don't have to build a "value string", so the performance is better than DOM script.

Script embedded in SVG
If you want to add a script inside SVG, you need to use the script element. This has been mentioned before. Apart from this, it is basically the same as putting the script in It's the same into the external HTML. Look at an example:

Copy the code

The code is as follows:

Click on this text to show rectangle color.
Click on rectangle to show rectangle area.
Click on this text to show the number of child
elements of the root element.

在这个例子中，列举了常见的获取DOM对象的方式：
1. 通过document.getElementById或者document.getElementByClassName之类的方法获取对象；
2. 通过document.documentElement或者document.rootElement获取document对象；
3. 通过事件参数evt.target获取产生事件的对象。这种方式的优点就是不使用id就可以获取到产生事件的对象。
其余的脚本基本和普通的DOM是一样的。

实用参考：
脚本索引：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
开发中心：https://developer.mozilla.org/en/SVG
热门参考：http://www.chinasvg.com/
官方文档：http://www.w3.org/TR/SVG11/
DOM Core Object API：http://reference.sitepoint.com/javascript/Document
SVG DOM常用属性和方法:http://riso.iteye.com/blog/393454, http://riso.iteye.com/blog/393459