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

Question

我想申请matrix transform一个svg.这是一个小提琴.在Firefox上,它看起来像这样:

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

我看到它的方式,我可以尝试找到一种方法来强制Firefox不要栅格化,或使用某种形式的嵌入.(<embed>？<object>？iframe？我认为这些都是由于某种原因或其他所有不好的做法.)我是动态加载这些SVGs使用JavaScript.那我该怎么办呢？

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>