使用javaScript和DOM操作svg元素

2022-06-12 21:39:28

基本的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>
<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>
设置单个元素的属性值
<?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>
父结点，子结点，和兄弟结点
<?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="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>
<g id="firstGroup">
<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>

码农公寓

相关文章