Manipulate SVG In HTML With JS

I'm having an problem with construction of a svg element using javascript in an html-embedded svg image. I created two files that should be exactly the same but one of them is bein

Solution 1:

var path = document.createElementNS('http://www.w3.org/2000/svg/','path');

is wrong. You want

var path = document.createElementNS('http://www.w3.org/2000/svg','path');

Note the lack of a trailing / character. Same problem with

var anim = document.createElementNS('http://www.w3.org/2000/svg/','animate');

If you fix these two lines you should see the arrow (I do in Firefox), here's a jsfiddle to prove it.

Solution 2:

One of the problems you may have is that you run the script as soon as you load page, instead of waiting for all the elements to load.

So basically document.getElementById('pozadi'); might be null when you run it, and since you have an external request (http://www.w3.org/2000/svg) there is a good chance that happens.

Try adding an onload listener calling a function with your current script. If you have jQuery this is what you are looking for http://api.jquery.com/ready/. If not... make it manually.