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

Question

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

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

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

PS：如果有svg.js方式，那就是我现在正在使用的方式，但我非常愿意为了让这种方式发挥作用而去找香草。

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

Answer 1

解决方法是制作原始尺寸＆＃34;更大并调整变换以按相同比例缩小。

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