我有一个SVG< image>在浏览器中呈现。我想在http://jsfiddle.net/dt1510/pXA9P/1/上尝试动态更改其内容。在console.debug中,内容已更改,但在浏览器中它是相同的。
<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请求可能的情况,但页面需要离线显示。我也有约束,图像内容需要存储在变量中,不能保存为外部资源。
有没有简单的方法可以动态更改SVG图像的内容?
答案 0 :(得分:18)
正如您所见,SVG <image>
元素使用href
属性来获取其内容。设置src
属性(与HTML的<img>
元素一样)将无效。
href
属性位于the XLink namespace。即使您从未声明过命名空间前缀,但它就是这样,因此您需要将其设置为这样。
您可以通过jQuery 演示:http://jsfiddle.net/pXA9P/4/ 执行此操作:
$("image").attr('xlink:href',srcAirline);
或标准DOM 演示:http://jsfiddle.net/pXA9P/5/ :
document.querySelector('image')
.setAttributeNS('http://www.w3.org/1999/xlink','href',srcAirline);
答案 1 :(得分:1)
如果您使用的是 D3库,则可以使用以下内容动态加载svg图像。
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
这对使用D3库的人非常有用。