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

我哪里错了？

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

在文件中)或将元素(g 或路径或其他)添加到 html 中现有的 svg 标签/元素。我怀疑您可能正在尝试将一个元素直接添加到 div，这不会起作用，但如果没有文件就很难判断。

还要仔细检查 Snap 是否正常加载，您可以在函数中执行 console.log( data ) 以检查它是否已正确加载标记。