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

我正在尝试使用jquery/javascript获取svg文件 svg示例：

<svg width="111" height="123" xmlns="http://www.w3.org/2000/svg">
 <g>
  <title>Layer 1</title>
  <rect fill="#ffffff" stroke="#000000" stroke-width="3" x="1.5" y="1.5"width="108.00001" height="119.99999" id="svg_1" rescale="none" move="Static"/>
  <text text_pos="midcenter" xml:space="preserve" text-anchor="middle" font-family="Fantasy" font-size="14" id="Actor Role name" y="68" x="55" stroke-width="0" stroke="#000000" fill="#000000" rescale="none" move="Static">Actor Role</text>
</g>
</svg>      

然后获取所有元素，如rect或text 并说get类似（排除内部“”以了解值的来源）：

“元素”rect、“重缩放”none、“移动”static

对于文本（不包括内部“”）： 'Element'rect'，'rescale'none'，move'static'，text_pos'中间位置，'id'Actor Role name'，node value'Actor Role

部分解决

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

$.get（文件\u url，函数（数据）{
var teste=data；//所有数据
rect1=$（''）.append（$（teste）.find（“text”）.attr（“id”）.html（）；
rect2=rect1+“-”+$（''）.append（$（teste）.find（“text”）.attr（“text_pos”）.html（）；
警报（rect2）；
});
警报（rect2）；

问题发现它没有传递变量数据，超出了$.get

第一个

警报（rect2）提供正确的数据

第二个
警报（rect2）给我未定义的代码

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

很抱歉，我忘了更改参数：f现在它正确了
我将使用这里找到的代码：with

因此，您现在可以使用jQuery（mySVG）
或纯javascript来提取属性。
从文档中：

var xml=“RSS Title”，
xmlDoc=$.parseXML（xml），
$xml=$（xmlDoc），
$title=$xml.find（“title”）；

在我的例子中，svg数据包括

<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">



因此，对于我来说，SVG是这样完成的：

var xml = "<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="2" height="2"><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 1 1 l 1 1"/></svg>",
xmlDoc = $.parseXML( xml ),
$xml = $( xmlDoc ),
$svg = $xml.find( "svg" );

var xml=“”，
xmlDoc=$.parseXML（xml），
$xml=$（xmlDoc），
$svg=$xml.find（“svg”）；

尽管有人问起了关于“g”元素的问题。运行了快速测试，但无法使用提供的数据获得结果，无论以下示例代码是否有帮助：

var xml = '<?xml version="1.0" standalone="no"?><\!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="5cm" height="5cm">  <desc>Two groups, each of two rectangles</desc>  <g id="group1" fill="red">    <rect x="1cm" y="1cm" width="1cm" height="1cm"/>    <rect x="3cm" y="1cm" width="1cm" height="1cm"/>  </g>  <g id="group2" fill="blue">    <rect x="1cm" y="3cm" width="1cm" height="1cm"/>    <rect x="3cm" y="3cm" width="1cm" height="1cm"/>  </g><\!-- Show outline of canvas using \'rect\' element -->  <rect x=".01cm" y=".01cm" width="4.98cm" height="4.98cm"  fill="none" stroke="blue" stroke-width=".02cm"/></svg>',
xmlDoc = $.parseXML( xml ),
$xml = $( xmlDoc ),
$g = $xml.find( "g" );
console.log($g);

var xml='两个组，每个组有两个矩形'，
xmlDoc=$.parseXML（xml），
$xml=$（xmlDoc），
$g=$xml.find（“g”）；
控制台日志（g美元）；

从
获取的SVG示例数据这是我加载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');
});

代码中没有
alert（rect1）
，只有2个
alert（rect2）
。第二个是未定义的，这是很正常的，因为：1-在上面的函数中定义了它2-在ajax回调中定义了它（异步）。我更改了代码区域，但忘了更改其余部分，现在它是正确的
var xml = "<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="2" height="2"><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 1 1 l 1 1"/></svg>",
xmlDoc = $.parseXML( xml ),
$xml = $( xmlDoc ),
$svg = $xml.find( "svg" );

var xml = '<?xml version="1.0" standalone="no"?><\!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="5cm" height="5cm">  <desc>Two groups, each of two rectangles</desc>  <g id="group1" fill="red">    <rect x="1cm" y="1cm" width="1cm" height="1cm"/>    <rect x="3cm" y="1cm" width="1cm" height="1cm"/>  </g>  <g id="group2" fill="blue">    <rect x="1cm" y="3cm" width="1cm" height="1cm"/>    <rect x="3cm" y="3cm" width="1cm" height="1cm"/>  </g><\!-- Show outline of canvas using \'rect\' element -->  <rect x=".01cm" y=".01cm" width="4.98cm" height="4.98cm"  fill="none" stroke="blue" stroke-width=".02cm"/></svg>',
xmlDoc = $.parseXML( xml ),
$xml = $( xmlDoc ),
$g = $xml.find( "g" );
console.log($g);

$( 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');
});