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

add ajax sourced svg group to existing canvas

本文关键字：布中 添加 ajax svg      更新时间：2023-10-24

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

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

EDIT加载读取后，它有一个漂亮的功能，可以轻松地执行您想要的操作：

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

文档链接：http://api.jquery.com/load/请参阅"加载页面碎片"。

相关文章：