文章/答案/技术大牛

发布

社区首页 >问答首页 >Snap.svg遍历元素树

问Snap.svg遍历元素树
EN

Stack Overflow用户

提问于 2017-04-26 02:09:03

回答 1查看 181关注 0票数 0

我想用Snap.svg构建SVG操作UI，而不是单独发送，而是使用服务器端图形包。

我需要Snap.svg加载一个外部svg文件，分析它的结构，为它的一些元素定义一些事件侦听器(基于分析)，并进行一些更改。

我注意到一个元素的子元素不仅仅包含XML树定义的元素。因此，简单地遍历子对象是行不通的。

或者，.selectAll方法假定预先了解svg结构。

当然，这些是可以解决的，但我想知道我是否错过了另一种更自然的遍历结构的方式。

javascript

svg

snap.svg

回答 1

Stack Overflow用户

发布于 2017-04-27 02:58:16

我在下面包含了一个通过Snap.ajax()调用svg文件的示例。它显示了两个SVG绘图。它将响应作为单个片段放置在绘图片段SVG中。它还允许XML方法访问/编辑单个元素，并将元素片段添加到另一个绘图XML SVG中。

这有帮助吗？

<!DOCTYPE HTML>

<html>

<head>
  <title>Snap.ajax()</title>
<script type="text/javascript" src="http://svgDiscovery.com/_SNP/snap.svg-min.js"></script>
</head>

<body onload=loadXML()>
This loads an .svg file via Snap.ajax(). It places the response as single fragment in <b>Fragment SVG</b>. It also allows XML methods to access/edit individual elements, and adds element fragments into <b>XML SVG</b>.

 <center>
 <b>Fragment SVG</b>
 <div id=fragDiv style='border:1px solid black;width:500px;height:500px'>
<svg id=fragSVG width=500 height=500 ></svg>
 </div>
  <b>XML SVG</b>
 <div id=xmlDiv style='border:1px solid black;width:500px;height:500px'>
<svg id=xmlSVG width=500 height=500 ></svg>
 </div>
</center>
<script>
 var SNPsvgFrag = Snap("#fragSVG");
 var SNPsvgXML = Snap("#xmlSVG");


//---onload---
function loadXML()
{
    var svgFile="http://svgDiscovery.com/SVGFiles/Logo.svg"

    var xml=Snap.ajax(svgFile,function()
    {
        //---insert as one fragment---
        var xmlString=xml.responseText
        var fragment=Snap.fragment(xmlString)
        SNPsvgFrag.append(fragment)

        //---DOMParser---
        var parser = new DOMParser();
        var XMLdoc=parser.parseFromString(xmlString,"text/xml").documentElement;

        for(var k=0;k<XMLdoc.childNodes.length;k++)
        {
            var elem=XMLdoc.childNodes.item(k)

            console.log(elem.nodeName)

            if(elem.nodeName=="circle")
                elem.setAttribute("fill","red")

            //---each element inserted as a fragment---
            var elemString=new XMLSerializer().serializeToString(elem)

            var elemFrag=Snap.fragment(elemString)
            SNPsvgXML.append(elemFrag)
        }
    })
}

</script>
</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43618033

复制

相似问题

问Snap.svg遍历元素树
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Snap.svg遍历元素树EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Snap.svg遍历元素树
EN