Javascript 使用Snap SVG将SVG加载到特定的div中

使用将SVG文件加载到特定div中的正确方法是什么

根据文档，我有一个JS：

var s = Snap();
Snap.load("fox.svg", function (f) {
    s.append(f.select("g#fox"));
});

这会将SVG加载到

body

标记的正上方，但是如果我尝试设置它的位置，则不会发生任何事情，也不会出现错误。这就是我迄今为止所做的尝试：

var s = Snap('#myDiv');

---

我哪里出了问题？

这应该行得通，它离您的示例不远，因此如果没有一个实例和svg来查看，很难判断您的示例出了什么问题

如果你想上传小提琴什么的，可能会有帮助

编辑：为了扩展双像素答案，您尝试添加的元素应该是svg元素（即

..//您可以将svg添加到div
…//您不能将其添加到div中，但可以添加到svg元素中

或者将元素（g或path或其他）添加到html中现有的svg标记/元素中。我怀疑您可能试图将一个元素直接添加到div中，这是行不通的，但是如果没有该文件，很难判断

---

还要仔细检查Snap是否加载良好，您可以在函数中执行console.log（data）来检查它是否加载了正确的标记。

我认为

#myDiv

可能需要是SVG元素，例如：

尝试过。。。不幸的是没有。我刚刚得到一个错误：

无法调用null的方法“append”

加载文档后，脚本需要执行。追加将是

null

，因为如果在DOM准备就绪之前执行脚本，ID选择器将失败。感谢您提供的详细答案，它非常有用。您是对的，最初我试图在

元素中呈现

SVG

。

var s = Snap("#svgdiv");
var l = Snap.load("path.svg", onSVGLoaded ) ;

function onSVGLoaded( data ){ 
    s.append( data );
}

<svg id="mysvgtoload">...</svg> // you can add an svg to a div
<g id="mygrouptoload">...</g> // you can't add this to a div, but could to an svg element