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

Question

我想将

matrix

transform

应用于

svg

。 这是一个小提琴。在 Firefox 上，它看起来像这样：

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

在我看来，我可以尝试找到一种方法来强制 Firefox 不进行光栅化，或者使用某种形式的嵌入。 （

<embed>

？

<object>

？

iframe

？出于某种原因，我认为这些都是不好的做法。）我正在使用 JavaScript 动态加载这些 SVG。那我该怎么办？

PS：如果有一种方法可以使用 svg.js，那就是我现在正在使用的方法，但我非常愿意使用普通方式来使其正常工作。

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

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>