SVG 中的 PNG - 在 Firefox 中不起作用

【问题标题】：PNG inside SVG - not working in FirefoxSVG 中的 PNG - 在 Firefox 中不起作用
【发布时间】：2018-01-20 09:42:47
【问题描述】：

我正在尝试将 PNG 图像直接放入 SVG 文件（使用 Base64）。这是一个演示：

https://jsfiddle.net/bL11Lp8d/

<use href="#img1" transform="matrix(20,10,-5,20,50,50)" />

它在 Chrome 中运行良好，但在 Firefox 中无法运行。你知道是什么问题吗？

【问题讨论】：

标签： svg base64 png

【解决方案1】：

图像没有宽度和高度属性。 Firefox 仍然需要它们。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="500" height="500">
  <defs>
    <image  id="img1"  href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="  width="5" height="5" />
  </defs>
  <use href="#img1" transform="matrix(20,10,-5,20,50,50)" />
</svg>

SVG 1.1 说它们是强制性的，SVG 2 规范说是可选的。

【讨论】：