在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 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;
}
}
}
}
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)
}
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;
}
}
}
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
2006-10-09 技巧:ArrayList的使用方法(转)
2006-10-09 HtmlEncode 以及HtmlDecode 方法(转)