javascript Snap.load() 外部 SVG 无法加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19924999/
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
Snap.load() external SVG fails to Load
提问by Marcatectura
PROBLEM:
I'm using Snap.svg to create some basic interactive graphics, but for some reason I can't get my external SVG file to load using Snap.load(). I've pulled code straight from the tutorialat snap.io and checked and double-checked the docs. My SVG file renders in the browser fine, it just doesn't display inside the Snap SVG. Other shapes (i.e. not pulled in using Snap.load()) do display.
问题：我正在使用 Snap.svg 创建一些基本的交互式图形，但由于某种原因，我无法使用 .svg 加载外部 SVG 文件Snap.load()。我直接从snap.io的教程中提取了代码，并检查并仔细检查了文档。我的 SVG 文件在浏览器中呈现得很好，它只是没有显示在 Snap SVG 中。其他形状（即未使用 拉入Snap.load()）会显示。
CODE: I've boiled my example down to the most simple HTML and SVG files imaginable, and the Snap.load() method still isn't working for me. Does anyone see what I'm missing?
代码：我已经将我的示例归结为可以想象到的最简单的 HTML 和 SVG 文件，但 Snap.load() 方法仍然不适合我。有没有人看到我错过了什么？
HTML:
HTML:
<head>
<style media="screen">
#svg {
width: 300px;
height: 300px;
}
</style>
<script src="snap.svg-min.js"></script>
<meta charset=utf-8 />
</head>
<body>
<svg id="svg"></svg>
<script type="text/javascript">
var s = Snap("#svg");
Snap.load("svgtest.svg");
</script>
</body>
SVG (originally exported from Illustrator):
SVG（最初从 Illustrator 导出）：
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<rect x="14" y="33" fill="#2BB673" width="70" height="30"/>
</svg>
UPDATE: Updated the code as per @Ian's suggestion -
更新：根据@Ian 的建议更新代码 -
var s = Snap("#svg");
Snap.load("http://www.w3.org/TR/SVG/images/struct/Use01.svg", onSVGLoaded ) ;
function onSVGLoaded( data ){
s.append( data );
}
- but still no display of external SVG. I tried using an SVG from w3.orgjust to be sure it wan't a problem with the file itself or my domain.
回答by Ian
The load function takes a callback, as loading can take some time. So I think you would do something like the following...
load 函数需要回调，因为加载可能需要一些时间。所以我认为你会做类似以下的事情......
var s = Snap("#svg");
Snap.load("svgtest.svg", onSVGLoaded ) ;
function onSVGLoaded( data ){
s.append( data );
}
Edit: There may be some access control issues if not accessing from the same server as the script, check the console log for any errors.
编辑：如果不是从与脚本相同的服务器访问，则可能存在一些访问控制问题，请检查控制台日志是否有任何错误。
回答by Nick F
I was having exactly this problem in Internet Explorer only, and it turned out to be because the SVG file I was loading in was a minified one from which the doctype had been removed. Other browsers were ok without the doctype, but leaving the doctype in fixed the problem in IE as well:
我只在 Internet Explorer 中遇到了这个问题，结果证明是因为我加载的 SVG 文件是一个缩小的文件，其中 doctype 已被删除。其他浏览器没有 doctype 也可以，但保留 doctype 也解决了 IE 中的问题：
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
In case, like me, you're using Grunt to minify SVGs, you can leave the doctype in by adding the following option to your Gruntfile:
如果像我一样，您正在使用 Grunt 来缩小 SVG，您可以通过将以下选项添加到 Gruntfile 来保留文档类型：
svgmin: {
options: {
plugins: [
{ removeDoctype: false }
]
}
// etc...
}
回答by Tom
There is a small bug in the distribution - see https://github.com/adobe-webplatform/Snap.svg/issues/196. The suggested fix works correctly. The online demo works because it is referencing a much older build of the library.
分发中有一个小错误 - 请参阅https://github.com/adobe-webplatform/Snap.svg/issues/196。建议的修复工作正常。在线演示之所以有效，是因为它引用了库的更旧版本。
回答by Altaf Aali
With version 0.5.1 installed. The code in the correct answer above needs to be re-written as follows to work:
安装了 0.5.1 版。上面正确答案中的代码需要重新编写如下才能工作：
var s = Snap();
Snap.load("svgtest.svg", onSVGLoaded ) ;
function onSVGLoaded( data ){
s.append( data );
}
