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

Question

我知道我可以将 svg 文件设置为srcHTMLimg元素，如下所示：

<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>元素来引用第一个，现场：

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

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

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

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

Answer 2

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

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

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

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