html动态<img>,html – 将img.src设置为动态svg元素

你可以用JavaScript做到这一点：

var svg = document.querySelector('svg'),

img = document.querySelector('img');

setImageToSVG(img,svg);

function setImageToSVG(img,svg){

var xml = (new XMLSerializer).serializeToString(svg);

img.src = "data:image/svg+xml;charset=utf-8,"+xml;

}​

如果您的SVG元素是动态的(更改),那么每次SVG元素更改时您都需要重新运行此代码.

或者,这是一个演示@ Robert的答案的演示,使用另一个< svg>元素引用第一个,直播：

该演示还显示您可以调整大小并以其他方式转换引用的SVG文档,并且引用是实时的：对原始文件的更改会立即反映在< use>中.