javascript - 将 ajax 来源的 svg 组添加到现有画布

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 并将棒棒糖组插入当前画布。我会接受整个 .svg 的 ajax 答案并解析出要插入的组 (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/请参阅“加载页面片段”。