javascript - Load src content to SVG image dynamically

Question

I have a SVG <image> 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 content is changed, however in the browser it is the same.

<svg>  
  <image x="20" y="20" width="300" height="80"
     xlink:href="http://www.erh.noaa.gov/ilm/OpenLayers/img/marker.png" />    
</svg>?

var srcAirline = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD0AAAA9CAYAAAAeYmHpAAADD0lEQVR42u2aq3LrMBCG+0oH9hUOPK9QWFhYemBhYWhhYWBpYGBgqGGgYduv039mq65l+SY7sjXjcS62pW/1e6Vd6eZ9heVGH46nS/FHdal/Qv+5OxZ/PO+rDTpr5bf3x/fDp9wed+f1QO8Pl686689XDAMUDw2kLU+vVfnQSNqW47kuH1rStqV46HNV/4L+9/9UNrRXcnnxWaDpUa/s9lW50HdPPnQuZzYL9O670g36e5JSLLQ3XOWsfxZoZLxBZx6rFweNZy8OmsAiVjDI1BFXNmjFzikFLz5lj2eBBqC6dE/cTTVDmxy6aUxOLVPIfTJoGhpzWF3K2HKfBJoG1vX4eeqXt2qZ0EPl3FaIw/8+npYBPaacU+T+8HyeF5oG1Hl4R5H7YGgqTi2M00xOYqElBiQgSTViH7n3hqYiL8/lgZIGssNOahIBA2DUtjG+q9x7QcfkzO/0VAiakjmJTUYIRNoMQL0pY3ov6NBhCTTV2qhkyAwMA3Ctp7QUqfeClsU59500eKXPKgeQ3CcDXF0KOEdYOSu0N6avEjrXyuVs0N74XvxaVphQwDEWu5aFhJsmNUPn1IuEpidTMihTL9BnhaaHcWBMLOhRK3E8N7BMcrju6nNkbQt5gK5qSxWSz7nJZttHNgZ0alzLdepdzlfb04Aw5LRlM7SrSI4Kp8VxtT0NcNsEQ1kTQWOERe8YRIYaVpT6sdIESDCc+a7Yl4NrPWjF0ahFz+B31eGth/Ef7QiHNt2nugdDhxvewhSPTQR4eTAPWoFHakbFC1Q0i/Pq9IzWWd40jMZbA8SgsbqGJk/eHjSzNuqQn+C70lThM/lfPkHP4jolFzwn2QmaSqiQh3NoShmDDuWXAu31rL0XWeuVsW3Q/3KoTaNJJ2glAzlbmeWGjm3b4BqbtPScZDJ0KD0bE+eC1oJ+SiSm18/bppUMbTOYknjunlYb6EmgMLpdyqVdvN8YR/cNgg7lRY/bBuWAVg9a+fJZTtJmRWPxeWfvjbVzJfBi8wXa0NQOtbFpersFHBv0Bl049JrKB2+Sq02r4bQjAAAAAElFTkSuQmCC";

$('document').ready(change_image);

function change_image(){    
    var images = $("image");
    var image = images[0];        
    $(image).removeAttr("xlink:href");
    $(image).attr("src", srcAirline);
    console.debug(image);
}

I read somewhere that it might be possible with AJAX requests, however the page needs to be displayable offline. I also have the constraint, that the image content needs to be stored in a variable and cannot be saved as an external resource.

Is there any simple way to change the content of a SVG image dynamically?

Answer 1

1. As you've seen, SVG <image> elements use an href attribute to source their content. Setting a src attribute (as with HTML's <img> elements) will not work.

2. The href attribute is in the XLink namespace. Even though you never declared the namespace prefix, that's what it is, and so you need to set it as such.

You can do this either via jQuery demo: http://jsfiddle.net/pXA9P/4/:

$("image").attr('xlink:href',srcAirline);

Or standard DOM demo: http://jsfiddle.net/pXA9P/5/:

document.querySelector('image')
  .setAttributeNS('http://www.w3.org/1999/xlink','href',srcAirline);