1

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>

そして、このようなものを使用してファイルからデータを抽出します

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

次に、rect や text などのすべての要素を取得し、次のようなものを取得します (値がどこから来るかを知るために、内側の ' ' を除外します):

'Element' rect、'rescale' none、'move' static

およびテキストの場合 (内側の ' ' を除く): '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 以外の変数データを渡さない問題が見つかりました

最初alert(rect2);に正しいデータを与える

2番目alert(rect2);は未定義です

グローバル変数を与えていない理由を誰もが知っています:Xはすでに変数を外部に作成しようとしていますが、機能しません

コメントを変更するのを忘れて申し訳ありません:f 今は正しいです

4

3 に答える 3

2

これは私が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');
});
于 2015-06-23T19:39:13.060 に答える
0

ドキュメントから: http://api.jquery.com/jquery.parsexml/

var xml = "<rss version='2.0'><channel><title>RSS Title</title></channel></rss>",
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" );

「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);

http://www.w3.org/TR/SVG/struct.html#Groupsから取得した SVG サンプル データ

于 2014-08-23T16:14:06.757 に答える