html2canvas не отображает SVG-элементы в правильном положении, как это решить?

Question

У меня есть группа элементов SVG, которая является частью приложения Angular, и каждый из этих элементов SVG относится к разным Angular компонентам. При запуске приложения эти элементы объединяются, чтобы сформировать изображение аватара (различные карикатуры c группировок частей человеческого тела объединяются в одну человеческую карикатуру). Но теперь мне нужно захватить это изображение аватара, которое в данный момент находится в файле component.html, чтобы получить его в формате PNG. Итак, я использую для этого JavaScript library html2canvas . Но проблема в том, что все элементы SVG отображаются, но они разбросаны по позициям, которые они сформировали в приложении. Я думаю, что при рендеринге этих SVG библиотека html2canvas не принимает стили.

Будет полезна любая помощь.

Код, используемый для преобразования HTML в PNG на нажатие кнопки:

myClickFunction(event) {
    console.log(event);
    var Container = document.querySelector(".avatar-container");
    html2canvas(Container).then(function (canvas) {
      console.log(canvas);
      var getImage = canvas.toDataURL();
      console.log(getImage);
    });
  }