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

Question

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

<img src="mySVG.svg"/>

但是我可以以某种方式将动态SVG元素设置为src的{​​{1}}吗？

img

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" …>
  <!-- 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);

我不确定原件停止工作的原因，但这可能会帮助有人降落在这里。

Answer 3

并非完全没有，根据SVG规范，<img>标记必须引用完整文件。听起来像你想要<use xlink:href="#mySVGElement"/>

之类的东西