Comments: Because SVG is an html element, it supports common DOM operations. Because SVG is essentially an xml document, it also has a special DOM operation, most of which are called svg dom, this article will introduce DOM operations in SVG in detail. If you are interested, do not miss it. using scripts can easily complete various complex tasks, it is also a mainstream way to complete animation and interaction. Because SVG is an html element, it supports common DOM operations. Because SVG is essentially an xml document, it also has a special DOM operation, most of which are called svg dom. Of course, because IE currently does not support SVG, different methods are required to develop IE-based SVG pages. This part of knowledge is actually quite familiar to everyone. Let's take a look at it.
DOM operations on HTML pages
You should be familiar with DOM. Here is a small example:
The Code is as follows:
<Head>
<Style>
# SvgContainer {
Width: 400px;
Height: 400px;
Background-color: # a0a0a0;
}
</Style>
<Script>
Function CreateSVG (){
Var xmlns = "http://www.w3.org/2000/svg ";
Var boxWidth = 300;
Var box height = 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 (300, 0 )');
// 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% ");
Grazd. 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 coords = "M 0, 0 ";
Coords + = "l 0,300 ";
Coords + = "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', coords );
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 onload = "CreateSVG ()">
<Div id = "svgContainer"> </div>
</Body>
No, just like the DOM operation of common html elements:
Select element: document. getElementById
Creation element: document. createElementNS
Another method for creating child elements: element. createChildNS
Add element: node. appendChild
Set the attributes of an element: element. setAttributeNS/element. setAttribute
In addition to the preceding operations, the following operations and attributes are also common:
Get the attribute value of an element: element. getAttributeNS/element. getAttribute
Check whether an element has an attribute: 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 are not described in detail here; in addition, the node Structure of the DOM tree and the inheritance relationships between objects are also similar, so we will not detail them here. For more information, see the DOM Core Object document.
However, it should be noted that SVG is essentially an XML document, so the basic DOM method is to provide the relevant namespace by ending with NS; If namespace is provided when an element is created, if there are no problems with multiple namespaces, you can also select a version without NS when setting relevant attributes, such as using element directly. setAttribute sets the attribute value. In general, we strongly recommend that you use a version with the end of NS, because this version always works normally, even in the case of multiple namespaces.
SVG DOM
What is the difference between this and the standard DOM? I have not found any comprehensive information. Currently, I only know that the attribute assignment method is different. If you know more about this, Please scream.
In the above example, we use element. setAttributeNS/element. setAttribute is used to assign values to attributes. in svg dom, you can assign values to attributes of an object through the access point number. For example, the following two methods are used for comparison:
Common DOM method:
The Code is as follows:
Element. setAttribute ("x", "10 ");
Element. setAttribute ("y", "20 ");
Element. setAttribute ("width", "100% ");
Element. setAttribute ("height", "2em ");
The svg dom method:
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 scripts are a traditional script that builds a "value string" to set each item. The advantage of the svg dom script style is that you do not have to build a "value string", so the performance is better than that of the DOM script.
Script for embedding SVG
If you want to add a script inside SVG, you need to use the script element. As mentioned above, this is basically the same as placing the script in the HTML outside. Let's look at an example:
The Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
</Head>
<Body>
<Svg xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink" width = "300" height = "300">
<Script type = "text/ecmascript">
<! [CDATA [
Function showRectColor (){
Alert (document. getElementById ("myBlueRect"). getAttributeNS (null, "fill "));
}
Function showRectArea (evt ){
Var width = parseFloat(evt.tar get. getAttributeNS (null, "width "));
Var height = parseFloat(evt.tar get. getAttributeNS (null, "height "));
Alert ("The rectangle area is:" + (width * height ));
}
Function showRootChildrenNr (){
Alert ("Nr of Children:" invalid document.doc umentElement. childNodes. length );
}
]>
</Script>
<G id = "firstGroup">
<Rect id = "myBlueRect" width = "100" height = "50" x = "40" y = "20" fill = "blue" onclick = "showRectArea (evt) "/>
<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, we list common methods for obtaining DOM objects.:
1. Get the object through methods such as document. getElementById or document. getElementByClassName;
2. Get the document Object through document.doc umentElement or document. rootElement;
3. get the object that generates the event through the event upload evt.tar get. The advantage of this method is that you can obtain the object that generates the event without using the id.
The rest of the scripts are basically the same as the common 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
Hot reference: http://www.chinasvg.com/
Official documents: 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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
