使用Snap SVG将SVG加载到特定的div中 [英] Load SVG into a specific div with Snap SVG

问题描述

使用 SnapSVG 将SVG文件加载到特定div中的正确方法是什么？

What is the correct way to load an SVG file into a specific div using SnapSVG?

根据文档我有这个JS：

Following the documentation I have this JS:

var s = Snap();
Snap.load("fox.svg", function (f) {
    s.append(f.select("g#fox"));
});

这会将SVG加载到正文上方标签，但如果我尝试设置它的位置，没有任何反应，没有错误。这是我到目前为止所尝试的：

This loads the SVG just above the body tag, however if I try to set it's location, nothing happens, there is no error. This is what I have attempted so far:

var s = Snap('#myDiv');

我哪里错了？

推荐答案

这应该有效，它离你的例子不远了，所以如果没有现场例子和svg可以很难说出你的错误。

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.

如果您想上传小提琴或其他内容，可能会有帮助。

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

编辑：只是为了扩展Duopixels答案，你试图添加的元素，应该是一个svg元素（即

Just to extend on Duopixels answer, the element you are trying to add, should be an svg element (ie

<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或路径或其他）添加到现有svg标记/你的HTML中的元素。我怀疑你可能正在尝试将一个元素直接添加到div中，这将无法正常工作，但如果没有该文件则很难判断。

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.

还要仔细检查Snap加载正常，你可以在函数中执行console.log（data）来检查它是否加载了正确的标记。

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 SVG将SVG加载到特定的div中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！