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"));
});

这会在标签上方加载 SVG body，但是如果我尝试设置它的位置，则什么也没有发生，也没有错误。这是我到目前为止所尝试的：

var s = Snap('#myDiv');

我哪里错了？

Answer 1

这应该可行，它与您的示例相距不远，因此如果没有现场示例和要查看的 svg，很难说出您的问题。

如果您想上传小提琴或其他东西，它可能会有所帮助。

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) 以检查它是否已正确加载标记。