Mar*_*ura 11 javascript svg snap.svg
问题:我正在使用Snap.svg创建一些基本的交互式图形,但由于某种原因,我无法使用加载我的外部SVG文件Snap.load().我直接从snap.io 的教程中提取代码并检查并仔细检查了文档.我的SVG文件在浏览器中呈现正常,它只是不显示在Snap SVG中.其他形状(即未使用Snap.load())会显示.
代码:我已经将我的例子简化为可以想象的最简单的HTML和SVG文件,而Snap.load()方法仍然不适合我.有谁看到我错过了什么？
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(最初从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>
更新:根据@ Ian的建议更新代码 -
var s = Snap("#svg");
Snap.load("http://www.w3.org/TR/SVG/images/struct/Use01.svg", onSVGLoaded ) ;
function onSVGLoaded( data ){
s.append( data );
}
Ian*_*Ian 23
加载函数需要回调,因为加载可能需要一些时间.所以我认为你会做类似以下的事情......
var s = Snap("#svg");
Snap.load("svgtest.svg", onSVGLoaded ) ;
function onSVGLoaded( data ){
s.append( data );
}
编辑:如果不从与脚本相同的服务器访问,可能存在一些访问控制问题,请检查控制台日志中是否有任何错误.
我只是在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">
如果像我一样,你使用Grunt来缩小SVG,你可以通过在Gruntfile中添加以下选项来保留doctype:
svgmin: {
options: {
plugins: [
{ removeDoctype: false }
]
}
// etc...
}