Question

26

Load src content to SVG image dynamically

rated 0 times [ 30] [ 4] / answers: 1 / hits: 16495 / 12 Years ago, tue, august 14, 2012, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

coleman

Add To Favorites

Follow

Total Points: 518

Total Questions: 81

Total Answers: 96

Location: Aland Islands

Member since Wed, Nov 17, 2021

3 Years ago

answered 12 Years ago jaycie · Accepted Answer

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.

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);