Tránh rasterization với hình ảnh svg để biến đổi làm việc trong Firefox

Question

Tôi muốn áp dụng một matrixtransform ation đến một svg. Here's a fiddle. Trên Firefox, nó trông như thế này:

Dường như nó rasterizing nó vào một bitmap 10x10 trước khi chuyển nó vì viewbox tôi. Làm thế nào tôi có thể tránh điều này?

Cách tôi xem, tôi có thể cố gắng tìm cách buộc Firefox không rasterize hoặc sử dụng một số dạng nhúng. (<embed>? <object>? iframe? Tôi nghĩ rằng đây là tất cả các thực hành xấu vì một lý do này hay lý do khác.) Tôi đang tải các SVG động này bằng JavaScript. Làm thế nào tôi sẽ làm điều đó, sau đó?

PS: Nếu có cách nào đó với svg.js, đó là những gì tôi đang sử dụng ngay bây giờ, nhưng tôi sẵn sàng dùng vani để chỉ làm việc này.

EDIT: FWIW, có vẻ như nó đã được sửa trong Firefox hàng đêm, nhưng tôi vẫn muốn một giải pháp cho bây giờ; Tôi đang cố gắng tung ra sớm. (Cũng nhận ra rằng tôi đã không tuyên bố rõ ràng rằng nó hoạt động trong Chrome và IE)

Answer 1

Cách giải quyết là làm cho "kích thước ban đầu" lớn hơn và điều chỉnh biến đổi để giảm tỷ lệ theo cùng tỷ lệ.

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