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

【问题标题】：Problems with my inline SVG and embeded SVG我的内联 SVG 和嵌入式 SVG 的问题
【发布时间】：2016-03-12 06:02:06
【问题描述】：

我有一个像这样的简单 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（<embed>标签内的svg文件<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 视图框坐标）

有什么帮助吗？

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

【问题讨论】：

我不太确定将所有这些交互性打包到 SVG 本身是一个好主意，脚本文件也可能需要宝贵的时间来加载。
现在，我正在集中精力使页面正常工作，之后，我将优化代码。 BTW @DJDavid98，将外部 ECMAScipt 文件链接到 SVG 文件的正确语法是什么？有时候，我会忘记这些简单的事情......

标签： javascript html svg snap.svg

【解决方案1】：

在一个div中放一个loader gif，放在body的顶部。根据需要定位。这将首先加载，在 DOM 的其余部分之前（在加载 SVG 以及页面的其余部分之前它不会隐藏）

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

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

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

【讨论】：

我已经知道这种方法@Danny，这不是我的问题。我的问题是我的 svg 文件在嵌入或内联到 <html> 格式文件时表现异常。

【解决方案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 文件在 <html> 格式文件中表现异常？
我会尝试缩小我的问题范围：在我的.svg 文件中，我使用两个外部脚本<script xlink:href="/resources/helper_functions.js" type="text/ecmascript"/> 和<script xlink:href="/resources/mapApp.js" type="text/ecmascript"/>。这两行在.svg 格式文件中表现正确（意思是：我的.svg 文件可以检测和使用外部脚本），但是，当我将.svg 文件放入内联<html> 格式文件时，这些资源无法阅读...谁能指出原因？
@Rickard - 我已经编辑了我的答案并提出了一个至少适用于 Chrome 的修复程序。
恐怕结束标签不是这样，因为我已经用.../> 正确关闭了我的标签，请参阅上面的原始问题。此外，我正在使用 3 个外部 .js 源：helper_function.js 和 mapApp.js（用于将窗口坐标转换为视图框坐标）以及快照脚本 snap.svg-min.js。外部快照脚本可以被我的 scipt 检测到，而前两个脚本不能。顺便说一句，我已经在 chrome 上测试过，它没有用，如果你愿意的话就试试吧：pristineparadise.com/desktop/districts/sumba/eastSumba/….
@Rickard - 正如我所说，.../> 不是关闭脚本标签的正确方法。你需要...></script>。然后它确实可以工作（至少在 Chrome 中）。