我的嵌入式SVG和嵌入式SVG出现问题 [英] Problems with my inline SVG and embeded SVG
问题描述
我有一个简单的SVG地图，如下所示:
I have a simple SVG map like this :
<?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>
它可以正常工作，如您在此处
It works fine as it is, as you can see it here
现在，由于加载时间相当长，我想向其中添加一些简单的加载动画.我一直在这里和那里进行挖掘，我知道一些简单的技巧，但是它们仅适用于html格式文件，不适用于svg格式文件.因此，我已将地图放在单独的html文件中，一个用于嵌入式svg，另一个用于嵌入式svg(<html>文档的<embed>标记内的svg文件.
Now, because of the rather lengthy loading time, i would like to add some simple loading animation to it. I've been digging here and there, and i know some simple tricks, however they are only work for html format file, not on svg format file. So i've put my map in separated html file, one for inline svg, the other for embeded svg (svg file inside <embed> tag of a <html> document.
因此，这些问题:
- 嵌入的svg:在这里. 该文件非常简单，您可以想象，我只是将svg文件嵌入html文件中.问题是:您无法从中访问外部链接，请尝试将鼠标悬停在MENU上以弹出菜单，然后单击任意位置，我将所有链接都链接到了google. 如果您单击它，您将永远无法到达google.尝试将其与上面的正常svg文件进行比较，该链接可以正常工作.
-
在线svg:您可以在此处.我复制svg文件的内容，将其粘贴到标准html文件中，仅此而已.这里的问题变得越来越严重:当我将鼠标悬停在平台上时，我无法弹出菜单，当我将其悬停时，位置也不会闪烁.尝试通过与上面的原始svg文件进行比较来对此进行测试. 威奇很烦人.粘贴文件时我什么也没改变，但是问题出现了. 现在，我已经使用这个文件工作了一段时间以识别这种特殊症状:发生这种情况是因为无法检测到两个开始的外部脚本:
- Embeded svg : Here it is. The file is quite simple as you can imagine, i merely embed the svg file inside html file. Problem is : you can't visit external link from it, try hover onto the MENU to bring out the popup menu, and and click anywhere, i linked all of them to google. You can never reach google if you click it. Try compare it to the normal svg file above, where the links work just fine.
Inline svg : you can see it here. I copy the content of the svg file, paste it into a standard html file, nothing more. Here is where the problem getting worse : I cannot bring out the popup MENU when i hover onto the plat, and the locations don't blink when i hover it. Try test this by comparing to the original svg file above. Wich is quite annoying; i changed nothing when i pasted the file, yet problem arise. Now, i've been working quite some time with this file to recognize this particular symptom : this happens because the 2 beginning external scripts cannot be detected :
<script xlink:href="/resources/helper_functions.js" type="text/ecmascript"/>
<script xlink:href="/resources/mapApp.js" type="text/ecmascript"/>
请问一个问题:为什么?我只是复制粘贴它，它在正常的svg中可以正常工作，在嵌入的svg中也可以(尽管存在其他问题).
Wich begs the question : WHY? I merely copy-paste it, it works fine in the normal svg, it also okay in the embeded svg (despite of the other problem).
(仅供参考，这2个.js文件用于将Window客户坐标转换为svg视图框坐标)
(FYI these 2 .js files are used to translate Window client coordinate into svg viewbox coordinate)
有什么需要帮助的吗?
Any help please?
哦，这仍然是台式机版本，尚无移动版本...
Oh, and this is still desktop version, no mobile version yet...
推荐答案
我可以给你一个提示，以加快SVG的加载速度:现在，它充满了重复的嵌入式PNG图像.例如，此小屋是SVG中 5次的base64编码:
I can give you one tip to speed up the loading of the SVG: Right now, its full of duplicated embedded PNG images. For example, this hut is base64-encoded five times inside your SVG:
让SVG 链接到外部图像文件，而不是嵌入这些图像，您可能会发现SVG加载速度足够快！
Instead of embedding those images, let the SVG link to external image files, and you may find that your SVG loads fast enough!
哪个是哪个"下的嵌入和链接之间的区别的一些信息.此处: http://libregraphicsworld.org/blog/entry/inkscape-embedding-或链接
Some info on the difference between embedding and linking under "Which is which?" here: http://libregraphicsworld.org/blog/entry/inkscape-embedding-or-linking
编辑-内联版本不起作用的原因:
Edit - Why the inline version doesn't work:
- 由于
<script>标记未正确关闭，因此未加载外部脚本.
自闭合标签在html5中无效，因此在您的三个脚本标签中，您需要将.../>更改为...></script>. - 由于SVG不再是根文档，因此脚本也需要进行一些更改，但是最后的细节应该易于修复.如果还没有，请查看浏览器
- The external scripts aren't loaded because the
<script>tags aren't closed properly.
Self-closing tags aren't valid in html5, so in your three script tags you need to change.../>to...></script>. - It looks like the scripts also need some changes now that the SVG is no longer the root document, but the last details should be easy to fix. If you aren't already, look at the error messages in your browser's developer console.
这篇关于我的嵌入式SVG和嵌入式SVG出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
