避免使用 svg 图像进行光栅化，以便在 Firefox 中进行转换答案

【问题标题】：Avoiding rasterization with svg image so that transforms work in Firefox避免使用 svg 图像进行光栅化，以便在 Firefox 中进行转换
【发布时间】：2015-08-15 10:10:19
【问题描述】：

我想将matrix transformation 应用到svg。 Here's a fiddle。在 Firefox 上，它看起来像这样：

由于我的视图框，它看起来像是在转换之前将其光栅化为 10x10 位图。我怎样才能避免这种情况？

按照我的看法，我可以尝试找到一种方法来强制 Firefox 不进行光栅化，或者使用某种形式的嵌入。（<embed>？<object>？iframe？我认为出于某种原因这些都是不好的做法。）我正在使用 JavaScript 动态加载这些 SVG。那我该怎么做呢？

PS：如果有 svg.js 的方法，这就是我现在正在使用的方法，但我更愿意使用香草来让它正常工作。

编辑：FWIW，显然它已在夜间 Firefox 中修复，但我现在仍然想要一个解决方案；我正在努力尽快推出。（也意识到我没有明确说明它适用于 Chrome 和 IE）

【问题讨论】：

它已在 nightlies 中修复，因此请尝试 beta 版或开发者版 mozilla.org/en-US/firefox/channel，因为它可能已修复，否则肯定已修复：nightly.mozilla.org
哇，谢谢。不幸的是，我希望它尽快工作 :) Try'na 发布一个在 Chrome 中完全开发的游戏保存这个。
每 6 周发布一次。您尝试过 Beta 版吗？
是的，beta 看起来很漂亮！ 6月23日……嗯……值得等待吗？ :)

标签： javascript firefox svg transform

【解决方案1】：

一种解决方法是使“原始尺寸”变大，并将变换调整为按相同比例缩小。

<svg viewbox="0 0 20 20">
    <image xlink:href="https://www.adobe.com/inspire-apps/exporting-svg-illustrator-0913/fig11/img/napoleon%20for%20svg%201.svg"
           width="100" height="100" transform="matrix(0.1, 0.02, 0.02, 0.1, 1, 2)" />
</svg>

【讨论】：

谢谢，我确实认为这是一个选项。这对我来说并不理想，因为我有复杂的矩阵计算，但知道结局在望，我想我会这样做一个月。