javascript 使用 Snap SVG 将 SVG 加载到特定的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20110422/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load SVG into a specific div with Snap SVG
提问by Sheixt
What is the correct way to load an SVG file into a specific div using SnapSVG?
使用SnapSVG将 SVG 文件加载到特定 div 的正确方法是什么？
Following the documentation I have this JS:
按照文档我有这个JS：
var s = Snap();
Snap.load("fox.svg", function (f) {
s.append(f.select("g#fox"));
});
This loads the SVG just above the bodytag, however if I try to set it's location, nothing happens, there is no error. This is what I have attempted so far:
这会在body标签上方加载 SVG ，但是如果我尝试设置它的位置，则没有任何反应，也没有错误。这是我迄今为止尝试过的：
var s = Snap('#myDiv');
Where am I going wrong?
我哪里错了？
回答by Ian
This should work, its not far removed from your example, so its hard to tell whats wrong with yours without a live example and the svg to look at.
这应该有效，它与您的示例相距不远，因此如果没有现场示例和要查看的 svg，很难判断您的示例有什么问题。
If you want to upload a fiddle or something, it may help.
如果您想上传小提琴或其他东西，它可能会有所帮助。
var s = Snap("#svgdiv");
var l = Snap.load("path.svg", onSVGLoaded ) ;
function onSVGLoaded( data ){
s.append( data );
}
Edit: Just to extend on Duopixels answer, the element you are trying to add, should be an svg element (ie
编辑：只是为了扩展 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
in the file) or add the element (g or path or whatever) to an existing svg tag/element in your html. I suspect you may be trying to add a element direct to a div, which won't work, but its hard to tell without the file.
在文件中）或将元素（g 或路径或其他）添加到 html 中现有的 svg 标签/元素。我怀疑您可能正在尝试将元素直接添加到 div，这将不起作用，但如果没有文件就很难判断。
Also double check that Snap is loaded fine, and you can do a console.log( data ) in the function to check that it has loaded the markup correct.
还要仔细检查 Snap 是否加载正常，您可以在函数中执行 console.log( data ) 以检查它是否正确加载了标记。
