Question

我的页面上有一个空白的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并将棒棒糖组插入当前画布。我会接受ajax为整个.svg的答案并解析出要插入的组（id =“lollipop”）。但是，最好只复制我想要的组并将其保存为可以调用和解析的文本文件。无论哪种方式。

Answer 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/请参阅“加载页面碎片”。

将ajax sourced svg group添加到现有画布

1 个答案: