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

Question

如何使用SnapSVG将SVG文件加载到特定的div中？

根据文档，我有以下JS代码：

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

这将在body标签上方加载SVG，但如果我尝试设置它的位置，什么都不会发生，也没有错误。目前为止，我尝试过以下内容：

var s = Snap('#myDiv');

我哪里做错了吗？

- Sheixt

---

我认为 #myDiv 可能需要成为一个 SVG 元素，例如：<svg id="myDiv"></svg>。 - methodofaction

尝试过了...不幸的是，没有成功。我只得到了一个错误：无法调用null的'append'方法。 - Sheixt

脚本需要在文档加载后执行。如果脚本在DOM准备就绪之前执行，附加将为null，因为ID选择器将失败。 - Jordan McCullough

Answer 1

这个应该可行，它与你的示例相差不大，所以很难在没有实时示例和要查看的SVG的情况下判断你的问题出在哪里。

如果您想上传一个fiddle或其他东西，可能会有所帮助。

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

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

编辑：为了补充Duopixels的回答，你尝试添加的元素应该是一个SVG元素（即

<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

您需要在现有的SVG标签/元素中添加元素（g或path或其他），而不是直接将元素（例如

另外，请仔细检查Snap是否已正确加载，您可以在函数中运行console.log(data)以检查其是否正确加载了标记。

- Ian

---

谢谢您提供详细的答案，非常有用。您是正确的，最初我试图在<div>元素中呈现SVG。 - Sheixt