使用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');
我哪里错了?
答案 0 :(得分:10)
这应该有用,它离你的例子不远了,所以如果没有现场例子和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)来检查它是否加载了正确的标记。