将img.src设置为动态svg元素

Question

我知道我可以将svg文件设置为srcHTML img元素,如下所示:

<img src="mySVG.svg"/>

但我不知怎么设置动态SVG元素作为src的img？

<svg id="mySVGElement">
    ...
</svg>

<img src="?"/>

Answer 1

你可以用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元素更改时您都需要重新运行此代码.

演示:http://jsfiddle.net/3PfcC/

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

演示:http://jsfiddle.net/3PfcC/3/

<svg id="src" xmlns="http://www.w3.org/2000/svg" …>
  <!-- Your SVG here -->
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink" …>
  <use x:href="#src" x="80" y="30" width="100" height="100" />
</svg>

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

Answer 2

这更新了 Phrogz 接受的答案（8 年后！）

该示例在 Chrome 或 Firefox 上不起作用（图像显示已损坏）更改为

  img.src = "data:image/svg+xml;base64,"+btoa(xml);

我不确定原件停止工作的原因，但这可能有助于有人登陆这里。