将src内容动态加载到SVG图像 [英] Load src content to SVG image dynamically

问题描述

我有一个SVG< image>在浏览器中呈现.我想动态更改其内容，如在 http://jsfiddle.net/dt1510/pXA9P/1上尝试的那样/.在console.debug中，内容已更改，但是在浏览器中，内容相同.

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

我在某处读到AJAX请求可能会出现这种情况，但是该页面需要可离线显示.我还有一个约束，那就是图像内容需要存储在变量中，并且不能另存为外部资源.

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.

有没有简单的方法可以动态更改SVG图像的内容?

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

推荐答案

1. 如您所见，SVG <image>元素使用href属性来获取其内容.设置src属性(与HTML的<img>元素一样)将不起作用.

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.

href属性位于 XLink命名空间中.即使您从未声明过名称空间前缀，也是如此，因此您需要这样设置.

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.

您可以通过jQuery 演示来执行此操作: http://jsfiddle.net/pXA9P/4 / :

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

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

或标准DOM 演示: http://jsfiddle.net/pXA9P/5/ :

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

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

这篇关于将src内容动态加载到SVG图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！