使用javaScript和DOM操作svg元素-阿里云开发者社区

开发者社区> slalx_1986> 正文

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Java对文件的读、写随机访问,RandomAccessFile类的使用分析
  在网上看了一些关于java中的RandomAccessFile类的介绍,又经过查看Java API和自己编的测试程序,总算是对RandomAccessFile的使用有了一定的了解。自己做了以下比较详细的总结吧。
1022 0
从零开始学 Web 之 DOM(二)对样式的操作,获取元素的方式
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
1037 0
javascript 常见数组操作( 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQue
原文:javascript 常见数组操作( 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、j...
945 0
为什么阿里巴巴禁止在 foreach 循环里进行元素的 remove/add 操作
我们使用的增强for循环,其实是Java提供的语法糖,其实现原理是借助Iterator进行元素的遍历。
4830 0
jquery 遍历dom元素
$('#navBarID').children()  //选定元素的所有孩子节点 $('#navBarID').children().eq(i) //选定元素的第i个孩子节点,从0计数
854 0
VC与ADO数据库操作
      VC与ADO数据库操作     学研部的同志们,大家好! 想开一次学习会,实习时间冲突了,只好把文档发给大家看了。重点推荐李振龙的BMP读图教程! 尤其是大三GIS班的同志,注意了,可能实习用得上的!     一、ADO简介ADO(ActiveX Data Object)是...
1037 0
JavaScript之作用域与变量
在javascript中声明变量时,我们经常使用的是 var 变量名=value; 例如: var =100; 可是你也许没有注意到这种声明变量的方式产生的变量是一个局部变量,而不是全局变量。
488 0
+关注
41
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载