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