0

I want to inject svg code inside html for animation purposes. Linking svg using either img, embed, object or iframe tags have not worked for me, since the animation takes into consideration precise page positioning. It works if I put the code directly, but the code to load depends on a url variable called "name". Depending on that variable, I display a little map of port rotation, and the animation is to have a little vessel moving along the route.

The only option I see is using javascript to inject the svg code using innerHTML, but I must select the proper javascript file, depending on the "name" url variable. I'll have a separate js for each of the services.

For calling the image I use the following script:

document.write("<img class ='svc-image' src='images/" + getUrlVars()["name"].replace(/\s+/g, '_').toLowerCase() + ".jpg' style='position:absolute;left:370px;top:185px;'>");

Then the svg code is this:

<svg style="position:absolute;left:385px;top:175px;z-index:2;height:900px;">
<defs>
<path id="curve" d="M204,98c0,0-8-42-40-48s-57.3,68-57.3,77.3s4,18,4,26.7
s-8.7,58-11.3,69.3c-2.7,11.3-28,120-28.7,124.7c-0.7,4.7-6,24-5.3,36.7c0.7,12.7,1.3,22,10.7,21.3s21.3-8.7,28.7-13.3" 
stroke="black" fill="none" stroke-width="5" />
</defs>
<image xlink:href="images/vsl.png" x="0" y="0" height="42" width="60">
<animateMotion dur="10s"
rotate="auto" fill="freeze" repeatCount="indefinite" >
<mpath xlink:href="#curve"/>
</animateMotion>
</image>
</svg>

And I'm trying to load it using the following js:

var anim = document.getElementById("anim");
document.addEventListener('DOMContentLoaded', function(){
anim.innerHTML = "<svg style='position:absolute;left:385px;top:175px;z-index:2;height:900px;'><defs><path id='curve' d='M204,98c0,0-8-42-40-48s-57.3,68-57.3,77.3s4,18,4,26.7,s-8.7,58-11.3,69.3c-2.7,11.3-28,120-28.7,124.7c-0.7,4.7-6,24-5.3,36.7c0.7,12.7,1.3,22,10.7,21.3s21.3-8.7,28.7-13.3' stroke='black' fill='none' stroke-width='5' /></defs><image xlink:href='images/vsl.png' x='0' y='0' height='42' width='60'><animateMotion dur='10s' rotate='auto' fill='freeze' repeatCount='indefinite' ><mpath xlink:href='#curve'/></animateMotion></image></svg>"; 
});

I'm looking to inject the js file, in the example above is called ame.js, (America's Service), into the html, but not using (script src), since I want the url to change depending on the url variable.

Something like:

<script src="js/" + getUrlVars()["name"].replace(/\s+/g, '_').toLowerCase() + ".js" type="text/javascript">

I know it doesn't work, but that is what I need. Make the url of the js file variable.

Few questions:

  1. Is that possible?

  2. Is there an alternate way of injecting svg without having to have a separate js file for each service, maybe put a filename in the anim.innerHTML, and make that url change using the getUrlVars?

Thanks for your help

Martin Ocando
  • 914
  • 2
  • 8
  • 18
  • As for loading and running js based on file name, [look here](http://stackoverflow.com/questions/950087/how-to-include-a-javascript-file-in-another-javascript-file), but you could just import the SVG instead of the js to load the SVG... Something like `element.innerHTML = /* Get SVG from file based on file name */`. I'm not *fully* sure what you're trying to do – Zach Saucier Aug 26 '14 at 16:55
  • Well, that will work, as long as I figure out what to put in the element.innerHTML for filename, and be able to change its name according to the url variable. For example, I have several service names, like: ame, bcx and cal. And there will be ame.svg, bcx.svg and cal.svg files, as well as the same filenames but .jpg for the images. I figured out how to load the images, which are the mini maps. The question now is how to load the svgs, which contain the animation part. – Martin Ocando Aug 26 '14 at 17:14
  • You'll likely need to use AJAX to import the SVG then, given it's not already being loaded into the page. [Something likes this](http://stackoverflow.com/a/6802540/2065702) would work if you're using jQuery, though it's not necessary – Zach Saucier Aug 26 '14 at 17:26

1 Answers1

0

You can make a ajax to retrieve the SVG from other files:

WORKING DEMO

var url = getUrlVars()["name"].replace(/\s+/g, '_').toLowerCase();
var anim = document.getElementById("anim");
document.addEventListener('DOMContentLoaded', function(){
  var client = new XMLHttpRequest();
  client.onreadystatechange = function(){
    anim.innerHTML = this.response; 
  };
  client.open("GET", url);
  client.send();
});
rafaelcastrocouto
  • 11,781
  • 3
  • 38
  • 63