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
Vous devez vous connecter pour publier un commentaire.
Comme vous l'avez vu, SVG
<image>
éléments, utiliser unhref
attribut à la source de leur contenu. La fixation d'unsrc
attribut (comme avec de l'HTML<img>
éléments) ne fonctionnera pas.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/:
Ou standard DOM démo: http://jsfiddle.net/pXA9P/5/:
Voir mon édité réponse; c'est encore plus simple. 🙂
Merci encore une fois!
OriginalL'auteur Phrogz
Si vous utilisez D3 bibliothèque ensuite, vous pouvez utiliser la commande suivante pour charger image svg dynamique.
Cela peut être très utile pour ceux qui sont à l'aide de D3 de la bibliothèque.
OriginalL'auteur vicky