Charge src contenu SVG image dynamiquement

J'ai un SVG <image> rendu dans le navigateur. Je voudrais changer son contenu de manière dynamique lors de la tentative sur http://jsfiddle.net/dt1510/pXA9P/1/ . Dans la console.déboguer le contenu est modifié, cependant dans le navigateur, il est le même.

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

J'ai lu quelque part qu'il pourrait être possible avec des requêtes AJAX, cependant, la page doit pouvoir s'afficher en mode hors connexion. J'ai aussi la contrainte, que le contenu de l'image doit être stockée dans une variable et ne peut pas être enregistré comme une ressource externe.

Est-il un moyen simple pour modifier le contenu d'une image SVG dynamiquement?

OriginalL'auteur Dávid Natingga | 2012-08-14

  1. 18

    1. Comme vous l'avez vu, SVG <image> éléments, utiliser un href attribut à la source de leur contenu. La fixation d'un src attribut (comme avec de l'HTML <img> éléments) ne fonctionnera pas.

    2. La href attribut est dans le XLink espace de noms. Même si vous n'avez jamais déclaré le préfixe d'espace de noms, c'est ce qu'il est, et vous devez le définir comme tel.

    Vous pouvez le faire soit via jQuery démo: http://jsfiddle.net/pXA9P/4/:

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

    Ou standard DOM démo: http://jsfiddle.net/pXA9P/5/:

    document.querySelector('image')
  .setAttributeNS('http://www.w3.org/1999/xlink','href',srcAirline);
    Merci beaucoup, je suis tellement heureuse que tu m'a donné une solution aussi simple!
    Voir mon édité réponse; c'est encore plus simple. 🙂
    Merci encore une fois!

    OriginalL'auteur Phrogz

  2. 1

    Si vous utilisez D3 bibliothèque ensuite, vous pouvez utiliser la commande suivante pour charger image svg dynamique. 

    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

    Cela peut être très utile pour ceux qui sont à l'aide de D3 de la bibliothèque.

    OriginalL'auteur vicky