加载svg文件(xml)并使用javascript提取特定信息 [英] Load a svg file(xml) and extract specific information using javascript

问题描述

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

I am trying to get a svg file using jquery/javascript svg example:

<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>      

并使用类似的方法从文件中提取数据

And using something like this to extract the data from a file

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

然后获取所有元素，例如rect或text 并说得到类似的东西(排除里面的"只是为了知道值从何而来):

then get all the elements like rect or text and say get something like(exclude the inside ' ' just to know where the values come from):

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

'Element' rect, 'rescale' none, 'move' static

和文本(不包括内部的''): 元素"矩形，缩放"无，移动"静态，"text_pos"中线，"id"演员角色名称，节点值"演员角色

and for text(exclude the inside ' '): 'Element' rect, 'rescale' none, 'move' static, 'text_pos' midcenter ,'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

Issue found it doesnt pass the variable data, outside that $.get

第一个alert(rect2);提供正确的数据

第二个alert(rect2);给了我未定义的

任何人都知道为什么它没有给出全局变量:X 已经尝试在外部制作变量，但也无法正常工作

anyone knows why it isn't giving a global variable :X already try making the variable outside but doesn't work also

很抱歉为此忘记了更改注释:f，现在它是正确的

well sorry for this forgot to change the coment :f now its correct

推荐答案

这是我一直在加载SVG文件的方式:

This is how I've been loading the SVG file:

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

这篇关于加载svg文件(xml)并使用javascript提取特定信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！