Javascript 将源于ajax的svg组添加到现有画布

我的页面上有一个空白的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的答案，并解析出要插入的组（id=“lollipop”）。不过，最好只复制我想要的组，并将其保存为可以调用和解析的文本文件。不管怎样

使用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');

编辑加载阅读后，它有一个漂亮的功能，可以轻松完成您想要的操作：

 //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');

---

链接到文档：请参阅“加载页面片段”。

使用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');

编辑加载阅读后，它有一个漂亮的功能，可以轻松完成您想要的操作：

 //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');

---

链接到文档：请参阅“加载页面片段”。

谢谢。我的描述“ajax”在这里被错误地使用了。很抱歉你的答案很好，但不幸的是，它不起作用。从我在过去几天收集到的信息来看，如果没有像jQuerySVG这样的库，jquery就不能用于此目的，这就是我最终使用的。我会做更多的调查，并发布最终答案。谢谢您的时间。jQuery绝对可以使用。我是根据经验说的，普通jQuery将完成您描述的所有操作。具体来说，什么不起作用？你有没有试过我最初的解决方案，因为那应该100%都能奏效。是加载失败，还是追加失败？很抱歉响应时间太长。我得到的印象是，jquery不能单独用于添加来自外部svg源的元素，这些元素来自我在本主题中阅读的一些线程。我没有全部的，但这里有一个。但后来我也看到了一个帖子，它反映了你在这里的反应。我会继续测试。作为旁注。jquery的.load函数从技术上讲是ajax，所以我唯一的错误是用ajax制作动词。很抱歉，我删除了批评。我以为你是AJAX新手，但看看你的其他帖子，你显然不是。您是否尝试过遍历您的实现？文件加载正确吗？或者append方法失败了？谢谢。我的描述“ajax”在这里被错误地使用了。很抱歉你的答案很好，但不幸的是，它不起作用。从我在过去几天收集到的信息来看，如果没有像jQuerySVG这样的库，jquery就不能用于此目的，这就是我最终使用的。我会做更多的调查，并发布最终答案。谢谢您的时间。jQuery绝对可以使用。我是根据经验说的，普通jQuery将完成您描述的所有操作。具体来说，什么不起作用？你有没有试过我最初的解决方案，因为那应该100%都能奏效。是加载失败，还是追加失败？很抱歉响应时间太长。我得到的印象是，jquery不能单独用于添加来自外部svg源的元素，这些元素来自我在本主题中阅读的一些线程。我没有全部的，但这里有一个。但后来我也看到了一个帖子，它反映了你在这里的反应。我会继续测试。作为旁注。jquery的.load函数从技术上讲是ajax，所以我唯一的错误是用ajax制作动词。很抱歉，我删除了批评。我以为你是AJAX新手，但看看你的其他帖子，你显然不是。您是否尝试过遍历您的实现？文件加载正确吗？或者append方法失败了？