12

问题：我正在使用 Snap.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 );
}

- 但仍然没有显示外部 SVG。我尝试使用来自 w3.org 的 SVG，以确保文件本身或我的域没有问题。

4

4 回答 4

23

load 函数需要回调，因为加载可能需要一些时间。所以我认为你会做类似以下的事情......

var s = Snap("#svg");
Snap.load("svgtest.svg", onSVGLoaded ) ;

function onSVGLoaded( data ){ 
    s.append( data );
}

编辑：如果不从与脚本相同的服务器访问，可能存在一些访问控制问题，请检查控制台日志是否有任何错误。

于 2013-11-12T10:25:31.960 回答
5

我只是在 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 中添加以下选项来保留文档类型：

svgmin: {
    options: {
        plugins: [
            { removeDoctype: false }
        ]
    }
    // etc...
}
于 2014-06-02T15:13:21.890 回答
0

发行版中有一个小错误 - 请参阅https://github.com/adobe-webplatform/Snap.svg/issues/196。建议的修复工作正常。在线演示有效，因为它引用了一个更旧的库版本。

于 2014-06-02T19:47:17.403 回答
0

安装了 0.5.1 版。上面正确答案中的代码需要重写如下才能工作：

var s = Snap();
Snap.load("svgtest.svg", onSVGLoaded ) ;

function onSVGLoaded( data ){ 
    s.append( data );
}
于 2017-10-25T05:05:27.950 回答