使用javaScript和DOM操作svg元素

基本的svgdom树：

 <?xml version="1.0" encoding="utf-8" standalone="no"?> <!doctype svg public "-//w3c//dtd svg 1.0//en" "http://www.w3.org/tr/2001/rec-svg-20010904/dtd/svg10.dtd">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">

<g id="firstgroup">

<rect id="mybluerect" width="100" height="50" x="40" y="20" fill="blue" />

<text x="40" y="100">this is a basic svg document!</text>

</g>

</svg>

使用javascript访问svg元素，并获取属性值

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!doctype svg public "-//w3c//dtd svg 1.0//en" "http://www.w3.org/tr/2001/rec-svg-20010904/dtd/svg10.dtd"> <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.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>

<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>

设置单个元素的属性值

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!doctype svg public "-//w3c//dtd svg 1.0//en" "http://www.w3.org/tr/2001/rec-svg-20010904/dtd/svg10.dtd">

<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 changerectcolor(evt) { var red = math.round(math.random() * 255); var green = math.round(math.random() * 255); var blue = math.round(math.random() * 255); evt.target.setattributens(null,"fill","rgb("+ red +","+ green+","+blue+")"); } ]]> </script> <g id="firstgroup"> <rect id="mybluerect" width="100" height="50" x="40" y="20" fill="blue" onclick="changerectcolor(evt)"/> <text x="40" y="100">click on rectangle to change it's color.</text> </g> </svg>

检查，并删除属性值

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!doctype svg public "-//w3c//dtd svg 1.0//en" "http://www.w3.org/tr/2001/rec-svg-20010904/dtd/svg10.dtd"> <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 removefill(evt) {

//通过获得元素，

var element = evt.target;

if (element.hasattributens(null,"fill")) {

element.removeattributens(null,"fill"); }

else { alert("this element doesn't have a fill attribute."); } } ]]></script>

 <g id="firstgroup"> <rect width="70" height="50" x="40" y="5" fill="blue" onclick="removefill(evt)"/> <rect width="70" height="50" x="40" y="65" fill="blue" onclick="removefill(evt)"/> <rect width="70" height="50" x="40" y="125" fill="blue" onclick="removefill(evt)"/> <rect width="70" height="50" x="40" y="185" fill="blue" onclick="removefill(evt)"/> <rect width="70" height="50" x="40" y="245" fill="blue" onclick="removefill(evt)"/> <text x="150" y="30">click on rectangle<tspan x="150" dy="15">to remove it's color.</tspan></text> </g> </svg>

父结点，子结点，和兄弟结点

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="100"> <script type="text/ecmascript">

<![cdata[ function showcontentandrelatives(evt)

{

//get reference to text element

var textelement = document.getelementbyid("mytext");

//get reference to parent of element

var parent = textelement.parentnode; alert("the parent node has id '"+parent.getattributens(null,'id')+"'/nnodename is '" +parent.nodename+"'");

//get a reference to the first child of the element "mytext"

var child = textelement.firstchild; //loop over all childs

while (child != null) {

//see if child is a tspan and has child nodes

if (child.nodename == "tspan" && child.haschildnodes()) {

//see if firstchild is of nodetype "text" if (child.firstchild.nodetype == 3)

{ alert("child's text content="+child.firstchild.nodevalue); } }

child = child.nextsibling; } alert("the content of the second tspan child is: "+textelement.childnodes.item(1).firstchild.nodevalue); } ]]></script>

<text id="mytext" x="50" y="30" onclick="showcontentandrelatives(evt)">

<tspan>click on text</tspan> <tspan x="50" dy="15">to get parent node data</tspan>

<tspan x="50" dy="15">and to see the text node values </tspan>

 <tspan x="50" dy="15">of each line</tspan> </text> </g> </svg>