使用 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');
我哪里错了?
最佳答案
这应该有效,它与您的示例相距不远,因此如果没有实际示例和要查看的 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 ) 以检查它是否已正确加载标记。
关于javascript - 使用 Snap SVG 将 SVG 加载到特定的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20110422/