Question

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

我需要Snap.svg来加载外部svg文件，分析其结构，为其某些元素定义一些事件监听器（基于分析）并进行一些更改。

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

或者，.selectAll方法假设有关svg结构的预先知识。

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

Answer 1

我在下面添加了一个通过Snap.ajax（）调用svg文件的示例。它显示了两个SVG图纸。它将响应作为单个片段放置在绘制 Fragment 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>

Snap.svg遍历元素树

1 个答案: