Problems with my inline SVG and embeded 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

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.

And thus, the problems :

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"/>
```
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).

(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...

回答1:

Put a loader gif in a div and put it at the top of the body. Position as needed. This will load first, before the rest of the DOM (it wont hide until the SVG is loaded as well as the rest of the page)

In a jQuery ready function, add a method that hides the loader div on page load. Anything in the ready function will not load until the DOM load is completed.

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

Another method, if you want to apply a loader to individual images, you could try a lazy load library like this one. http://www.appelsiini.net/projects/lazyload

回答2:

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:

Instead of embedding those images, let the SVG link to external image files, and you may find that your SVG loads fast enough!

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:

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.

来源：https://stackoverflow.com/questions/34136886/problems-with-my-inline-svg-and-embeded-svg

标签

javascript

html

svg

snap.svg