加载svg文件（xml）并使用javascript提取特定信息

我试图使用jquery / javascript svg示例获取svg文件：

    Actor Role   

并使用类似的东西从文件中提取数据

  $.get(file_url, function(data) { var teste=data; },'xml')// or use text instead of xml 

然后获取所有元素，如rect或text，并说得到类似的内容（排除内部”只是为了知道值的来源）：

‘元素’矩形，’重新缩放’无，’移动’静态

和文本（排除内部”）：’元素’矩形，’重新缩放’无，’移动’静态，’text_pos’midcenter，’id’角色名称，’节点值’角色扮演角色

议决-期部分

  $.get(file_url, function(data) { var teste=data; //all data rect1=$('').append($(teste).find("text").attr("id")).html(); rect2=rect1+"-"+$('').append($(teste).find("text").attr("text_pos")).html(); alert(rect2); }); alert(rect2); 

问题发现它没有传递可变数据，在$ .get之外

第一次alert(rect2); 给出正确的数据

第二次alert(rect2); 给我未定义

任何人都知道为什么它没有给出一个全局变量：X已经尝试将变量放在外面但是也不起作用

对不起，忘记改变了co：f现在正确了

Answer 1

这就是我加载SVG文件的方式：

 $( document ).ready( function() { $.get("path-to-svg.svg", null, function(data){ var svgNode = $("svg", data); var docNode = document.adoptNode(svgNode[0]); var pageNode = $("#element-to-hold-svg"); pageNode.html(docNode); }, 'xml'); }); 

Answer 2

我将使用此处的代码： Ajax或JavaScript：根据服务器响应更改样式

  var XMLrequest = newXMLHttpRequest(); // new XML request XMLrequest.open("GET", myURL, false); // URL of the SVG file on server XMLrequest.send(null); // get the SVG file var mySVG = XMLrequest.responseXML.getElementsByTagName("svg")[0]; 

所以你现在可以使用jQuery(mySVG)或纯javascript来提取属性。

Answer 3

来自文档： http ： //api.jquery.com/jquery.parsexml/

 var xml = "", xmlDoc = $.parseXML( xml ), $xml = $( xmlDoc ), $title = $xml.find( "title" ); 

在我的情况下，svg数据包括

所以对我来说，SVG是这样完成的：

 var xml = "", xmlDoc = $.parseXML( xml ), $xml = $( xmlDoc ), $svg = $xml.find( "svg" ); 

虽然有人问过’g’元素。 快速测试并无法获得所提供数据的结果，无论以下示例代码应如何帮助：

 var xml = '<\!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">', xmlDoc = $.parseXML( xml ), $xml = $( xmlDoc ), $g = $xml.find( "g" ); console.log($g); 

从http://www.w3.org/TR/SVG/struct.html#Groups获取的SVG样本数据