Edit Question - KnowledgeHub

Title Body

Like my title says, I'm trying to programmatically creating an SVG image element in a HTML page using javascript. For some reason my basic javascript code isn't working, however if I use the raphaeljs library it works fine. So there's obviously a problem with my js - I just can't seem to figure out what it is. (note: the target browser is FF4+) Here is the basic page with an html version of what I'm trying to achieve up the top: <html> <head> <script type="text/javascript" src="http://raphaeljs.com/raphael.js"></script> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="test1" height="200px" width="200px"> <image id="testimg1" xlink:href="http://i.imgur.com/LQIsf.jpg" width="100" height="100" x="0" y="0"/> </svg> <hr /> <p id="testP1"> </p> <hr /> <p id="testP2"> </p> </body> </html> And here is my javascript: var paper = Raphael(document.getElementById("testP1"), 200, 200); paper.image("http://i.imgur.com/LQIsf.jpg", 0,0, 100, 100); var svg = document.createElementNS('http://www.w3.org/2000/svg','svg'); svg.setAttributeNS('http://www.w3.org/2000/svg','xlink','http://www.w3.org/1999/xlink'); svg.setAttributeNS('http://www.w3.org/2000/svg','height','200'); svg.setAttributeNS('http://www.w3.org/2000/svg','width','200'); svg.setAttributeNS('http://www.w3.org/2000/svg','id','test2'); var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image'); svgimg.setAttributeNS('http://www.w3.org/2000/svg','height','100'); svgimg.setAttributeNS('http://www.w3.org/2000/svg','width','100'); svgimg.setAttributeNS('h

Tags (comma-separated) Cancel