Ошибка преобразования Safari 11.1 matrix3d ​​при использовании внутри foreginObject и преобразовании в данные: image / svg + xml

Question

Я пытаюсь преобразовать произвольный html (тег изображения с преобразованием matrix3d ​​в ​​данном случае) в изображение.

Если я применяю подобное преобразование к тегу изображения, заключенному в теги foreignObject и SVG

transform: matrix3d(1,0,0,-0.002,0,1,0,0,0,0,1,0,0,0,0,1);

А затем попытайтесь сгенерировать из него данные изображения

const svgElement = document.querySelector('svg');
let imageData = new XMLSerializer().serializeToString(svgElement);
imageData = `data:image/svg+xml;charset=utf-8,${imageData}`;

Он корректно отображается во всех вечнозеленых браузерах, кроме Safari .

Пожалуйста, проверьте JSFiddle , чтобы увидеть его в действии.

Я пробовал оба html2canvas и dom-to-image - первый не поддерживает преобразования ввсе и последние имеют одинаковую ошибку в Safari.

Любая помощь или идеи будут с благодарностью.Спасибо!