避免使用栅格化的SVG图像以使变换在Firefox中生效

Question

我想对一个 svg 应用矩阵变换。现在的情况是，在 Firefox 上它看起来像这样：这里有一个范例。这是因为我的视口，它在变换之前将其光栅化为 10x10 的位图。我该怎么避免这个问题？

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

另外，如果有用svg.js解决的办法，那就太好了，因为我现在正使用它。但我很乐意使用纯代码让它能够工作。

PS：据说在 Firefox 的夜间版本中已经修复了这个问题，但我仍然希望现在能够找到一个解决方案；我打算尽快发布。 （还意识到我没有明确说明它在 Chrome 和 IE 中可以工作）

- Cosine

---

它已经在夜间版本中修复，因此请尝试使用beta版或开发人员版https://www.mozilla.org/en-US/firefox/channel/，如果没有修复，则肯定已经在这里修复：https://nightly.mozilla.org/。 - Robert Longson

哇，谢谢。不幸的是，我希望这个能够很快工作 :) 我试图发布一个完全在 Chrome 中开发的游戏，除了这个问题。 - Cosine

发布版本每6周一次。你试过Beta版吗？ - Robert Longson

是的，beta看起来很漂亮！6月23日... 嗯...值得等待吗？ :) - Cosine

Answer 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>

- Paul LeBeau

---

谢谢，我确实看到这个选项。对我来说并不是最理想的，因为我有复杂的矩阵计算。但是，既然知道了终点在望，我想我会使用这种方式进行一个月的临时解决方案。 - Cosine