我有一个像这样的简单 SVG map :
<?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 格式文件。所以我把我的 map 放在单独的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 中也运行良好(尽管存在其他问题)。
(仅供引用，这 2 个 .js 文件用于将 Window 客户端坐标转换为 svg View 框坐标)
请问有什么帮助吗？
哦，这仍然是桌面版本，还没有移动版本......
最佳答案
将 loader gif 放入 div 中，并将其放在 body 的顶部。根据需要定位。这将首先加载，然后是 DOM 的其余部分(在加载 SVG 以及页面的其余部分之前它不会隐藏)
在 jQuery 就绪函数中，添加一个在页面加载时隐藏加载器 div 的方法。在 DOM 加载完成之前，ready 函数中的任何内容都不会加载。
$( document ).ready(function() {
$('#loader).hide();
});
另一种方法，如果您想将加载程序应用于单个图像，您可以尝试像这样的延迟加载库。 http://www.appelsiini.net/projects/lazyload
关于javascript - 我的内联 SVG 和嵌入式 SVG 存在问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34136886/