zoukankan      html  css  js  c++  java
  • 遍历SVG中的各元素

     在SVG中,要遍历所有的元素,得用javascript(js)实现,嘻嘻,这个等于没说,只要学SVG的人都知道,此外还需要用到一些DOM接口。以下所说代码均为js代码。
      首先,通过document.documentElement属性,获得整个SVG文档,即SVG的根元素,所有的节点都包含在该元素中。当然,如果是想访问某个已知ID的节点中的各子节点,则可以直接通过document.getElementById("元素的ID")找到局部的根元素。为了叙述连贯,假设node代表要访问的各元素的根节点。
      接下来就可以对根元素中的各节点进行访问了。可以通过for语句依次访问各节点,初值为0,终值为node.childNodes.length。在SVG中,两个节点元素之间的空白区域也算是一个元素,它的nodeType值为3,即为Text_Node,所以可通过该特点将其排除掉。至于其余的具体的每个节点,可通过node.childNodes.item(i)访问。
        var SvgMainMapDoc=id2.getSVGDocument();
       
         var node=SvgMainMapDoc.documentElement;
            var child;      
            for(var i=0;i<node.childNodes.length;i++){
               if(node.childNodes.item(i).nodeType!=3){           
                  child=node.childNodes.item(i);
                  if(child.getAttribute("id"))
                  {
                  alert(child.getAttribute("id")) 
                  }          
               }      
            }
    其中id2是
        <embed src="未命名-1.svg" type="image/svg+xml" name="id2" pluginspage="http://www.adobe.com/svg/viewer/install/main.html"
            menu="false" width="30" height="30"></embed>


    下面是递归遍历所有的父子节点

    function getlayer()
    {
        var SvgMainMapDoc=id2.getSVGDocument();
       
         var node=SvgMainMapDoc.documentElement;

         findnode(node)
    }

    //递归遍历节点nodeType为3两个节点元素之间的空白区域也算是一个元素,4时是脚本
    function findnode(node)
    {
        for(var i=0;i<node.childNodes.length;i++)
        {
          if(node.childNodes.item(i).nodeType!=3&&node.childNodes.item(i).nodeType!=4)
          {       
              var child=node.childNodes.item(i);
              if(child.getAttribute("layer"))
              {
                alert(child.getAttribute("layer"));
              } 
              if(child.childNodes)
              {
                findnode(child);
              }
              else
              {
                break;
              }
          }
        }
    }





  • 相关阅读:
    阅读提问
    阅读笔记
    结对需求分析
    分工
    对软件工程课程的期望
    JAVAWEB-Spring Boot学习
    团队编程-项目作业6-程序维护
    团队-吃货之家-项目总结
    团队编程项目作业5-小组评分
    安装Vue.js之Node.js,NMP环境搭建
  • 原文地址:https://www.cnblogs.com/cuihongyu3503319/p/918438.html
Copyright © 2011-2022 走看看