1

ページに空白の SVG キャンバスがあります

<svg 
xmlns="http://www.w3.org/2000/svg" 
version="1.1"
width="100%"
height="100%"
id="svg_canvas"
preserveAspectRatio="xMinYMin meet"
viewBox="0 0 250 250">

</svg>

外部ファイルに、次の形式の別の svg があります。

 <?xml ...>
    <svg id="external"
    ...>
      <g id="lollipop"
      ...>
        //LOTS OF VECTOR INSTRUCTIONS IN THIS GROUP
      </g>
    </svg>

外部 svg を ajax して、ロリポップ グループを現在のキャンバスに挿入したいと思います。私は、.svg 全体を ajax し、グループ (id="lollipop") を解析して挿入する回答を受け入れます。ただし、必要なグループだけをコピーし、それを呼び出して解析できるテキスト ファイルとして保存することをお勧めします。どちらにしても。

4

1 に答える 1

1

jQuery を使用すると、必要なものの基本的な考え方は次のようになります。

 //here I have a hidden div element in my document called "hiddenDiv";
 //I'm loading the SVG into the DOM via AJAX so we can access its elements.
 $("#hiddenDiv").load("/some/path/to/yourfile.svg", function(){

     //grab the content you want and add it to the canvas.
     $("#lollipop").clone().appendTo("#svg_canvas");

     //get rid of the extra unneeded svg
     $("#hiddenDiv").empty();
 }

編集ロード時に読んだ後、必要なことを簡単に行うための気の利いた機能があります。

     $("#svg_canvas").load('/some/path/to/yourfile.svg #lollipop');

ドキュメントへのリンク: http://api.jquery.com/load/「ページフラグメントの読み込み」を参照してください。

于 2012-07-18T18:37:20.547 に答える