Load src content to SVG image dynamically

Question

I have a SVG rendered in the browser. I would like to change its content dynamically as attempted on http://jsfiddle.net/dt1510/pXA9P/1/ . In console.debug the

Answer 1

If you are using D3 library then you can use following to load svg image dynamically.

d3.select("body") //select body in html
.append("svg")  //add svg element in body tag
.append("image")  // add image tag in svg element
.attr('xlink:href',"image.svg") //set href property of image element..
.attr("width",50) //set width of image
.attr("height",50) //set height of image

This can be very useful for those who are using D3 library.