Question

我有一个简单的SVG地图：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg>
  /*The opening svg tag is longer, thanks to attributes, but for the sake of simplicity, 
    i cut it short like this....*/
  <script xlink:href="/resources/helper_functions.js"    type="text/ecmascript"/>
  <script xlink:href="/resources/mapApp.js" type="text/ecmascript"/>
  <script xlink:href="/resources/snap.svg-min.js" type="text/ecmascript"/>

 //it is almost 1 Mb filesize, so shortened it, for simplicity..
</svg>

它可以正常工作，因为你可以看到它here

现在，由于加载时间相当长，我想为它添加一些简单的加载动画。我一直在这里和那里挖掘，我知道一些简单的技巧，但它们只适用于html格式文件，而不适用于svg格式文件。所以我将我的地图放在单独的html文件中，一个用于内联svg，另一个用于嵌入svg（svg文件位于<embed>文档的<html>标记内。

因此，问题：

嵌入svg：Here it is。文件非常简单，你可以想象，我只是将svg文件嵌入到html文件中。问题是：您无法访问其中的外部链接，尝试将鼠标悬停在菜单上以显示弹出菜单，然后点击任意位置，我将所有这些链接到谷歌。如果点击它，你永远无法访问谷歌。尝试将它与上面的普通svg文件进行比较，链接工作正常。
内联svg：你可以看到here。我复制svg文件的内容，将其粘贴到标准的html文件中，仅此而已。问题变得越来越严重：当我将鼠标悬停在平台上时，我无法显示弹出菜单，当我将鼠标悬停在其上时，位置不会闪烁。尝试通过与上面的原始svg文件进行比较来测试它。这很烦人;我粘贴文件时没有改变，但问题出现了。现在，我已经用这个文件工作了很长时间来识别这个特殊的症状：这是因为无法检测到2个开始的外部脚本：
```
<script xlink:href="/resources/helper_functions.js" type="text/ecmascript"/>
<script xlink:href="/resources/mapApp.js" type="text/ecmascript"/>
```
问这个问题：为什么？我只是复制粘贴它，它在正常svg中工作正常，它也可以嵌入svg（尽管有其他问题）。

（仅供参考，这两个.js文件用于将Window客户端坐标转换为svg视图框坐标）

请帮忙吗？

哦，这还是桌面版，还没有移动版......

Answer 1

将装载机GIF放入div并将其放在机身顶部。根据需要定位。这将首先加载到DOM的其余部分之前（它不会隐藏，直到加载SVG以及页面的其余部分）

在jQuery ready函数中，添加一个在页面加载时隐藏loader div的方法。在DOM加载完成之前，就不会加载就绪函数中的任何内容。

$( document ).ready(function() {
  $('#loader).hide();
});

另一种方法，如果你想将加载器应用于单个图像，你可以尝试像这样的延迟加载库。 http://www.appelsiini.net/projects/lazyload

Answer 2

我可以给你一个提示，以加快SVG的加载：现在，它充满了重复的嵌入的PNG图像。例如，这个小屋在你的SVG中是base64编码的五次：

而不是嵌入这些图像，让SVG 链接到外部图像文件，你可能会发现你的SVG加载速度足够快！

有关“哪个是哪个？”下嵌入和链接之间区别的一些信息。在这里：http://libregraphicsworld.org/blog/entry/inkscape-embedding-or-linking

修改 - 为什么内联版本不起作用：

未加载外部脚本，因为<script>标记未正确关闭自动关闭代码aren't valid in html5，因此在您的三个脚本代码中，您需要将.../>更改为...></script>。
看起来脚本也需要进行一些更改，因为SVG不再是根文档，但最后的细节应该很容易修复。如果您还没有，请查看浏览器developer console。

我的内联SVG和嵌入式SVG的问题

2 个答案: