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

【问题标题】：set img.src to dynamic svg element将 img.src 设置为动态 svg 元素
【发布时间】：2023-03-05 00:40:01
【问题描述】：

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

<img src="mySVG.svg"/>

但我能否以某种方式将动态 SVG 元素设置为 src 的 img？

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

<img src="?"/>

【问题讨论】：

标签： html svg

【解决方案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 文档的大小或以其他方式转换引用的 SVG 文档，并且引用是实时的：对原始文件的更改会立即反映在 <use> 中。

【讨论】：

整洁。谢谢。公认。不幸的是，第一个版本（数据 uri）似乎不适用于我的目标平台 IE10，因此在不先创建文件的情况下似乎无法将其设置为 img。
谢谢，效果很好。我玩弄了一下，注意到源 SVG 元素不需要任何属性，就像在小提琴中所做的那样，至少在 Chrome 中是这样。 Destination SVG 属性将负责缩放和裁剪。
似乎是 FireFox 对带有标签的 SVG 有问题（就像这里，fill="#900"），因为它读取它作为 svg 的结尾，我们需要将其替换为“%23”。这个适用于 Chrome 和 FireFox：jsfiddle.net/taaf9ah7/2
在您的演示中，图像是损坏的图像。这曾经有效，现在在 Chrome 中无效。似乎 Chrome 将 SVG 的某些内容更改为 new Image().src，它曾经触发我的 .onload 处理程序，现在改为触发我的 .onerror 处理程序......不知道为什么会突然改变
2020年，该解决方案在Chrome或Firefox上不起作用 img.src = "data:image/svg+xml;base64,"+btoa(xml);修复它（在下面添加为 aswer）

【解决方案2】：

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

该示例无法在 Chrome 或 Firefox 上运行（图像显示已损坏）改为

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

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

【讨论】：