javascript 将 src 内容动态加载到 SVG 图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11961120/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load src content to SVG image dynamically
提问by Dávid Natingga
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>。我想像在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);
}
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.
我在某处读到 AJAX 请求可能是可能的，但是页面需要可离线显示。我也有限制，即图像内容需要存储在变量中，不能保存为外部资源。
Is there any simple way to change the content of a SVG image dynamically?
有没有什么简单的方法可以动态更改 SVG 图像的内容？
回答by Phrogz
As you've seen, SVG
<image>elements use anhrefattribute to source their content. Setting asrcattribute (as with HTML's<img>elements) will not work.The
hrefattribute 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.
正如您所见，SVG
<image>元素使用一个href属性来获取其内容。设置src属性（与 HTML<img>元素一样）将不起作用。该
href属性位于XLink 命名空间中。即使您从未声明过命名空间前缀，它也是如此，因此您需要这样设置它。
You can do this either via jQuery demo: http://jsfiddle.net/pXA9P/4/:
您可以通过 jQuery演示执行此操作：http: //jsfiddle.net/pXA9P/4/：
$("image").attr('xlink:href',srcAirline);
Or standard DOM demo: http://jsfiddle.net/pXA9P/5/:
或标准 DOM演示：http: //jsfiddle.net/pXA9P/5/：
document.querySelector('image')
.setAttributeNS('http://www.w3.org/1999/xlink','href',srcAirline);
回答by vicky
If you are using D3 librarythen you can use following to load svg image dynamically.
如果您使用的是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
This can be very useful for those who are using D3 library.
这对于使用 D3 库的人来说非常有用。
