html2canvas结合fabricjs截图时元素错位错乱问题求助

问题现象 #

页面正常渲染时，.garrafa-personalizavel容器内元素排版整齐，调用html2canvas对该容器执行截图操作后，导出的截图内所有元素排布混乱、存在明显位置偏移。

现有截图实现代码 #

html2canvas(document.querySelector(".garrafa-personalizavel"), {allowTaint: true}).then(canva => {
  let a = document.createElement('a')
  a.href = canva.toDataURL('image/png')
  a.download = 'a.png'
  a.click()
  console.log(canva.toDataURL('image/png'))
})

效果对比 #

• 页面正常渲染效果：
  
• html2canvas导出的异常截图：
  

页面结构说明 #

项目中瓶型展示使用SVG元素，.garrafa-personalizavel容器核心结构如下（SVG内容已做精简）：

<div class="garrafa-personalizavel" ref="garrafa">
  <Canva />
  <svg
    v-if="$route.params.id == 'galao1'"
    class="imagem"
    id="Camada_1"
    data-name="Camada 1"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 244.64 528.21"
  ></svg>
</div>

<script>
import Canva from "@/components/Canva.vue";
export default {
  components: { Canva },
};
</script>

引入的Canva组件为fabricjs画布的挂载节点，组件结构如下：

<div :class="`canva-${$route.params.id}`">
  <canvas :id="`canva-${$route.params.id}`"></canvas>
</div>

内容的提问来源于stack exchange，提问作者GustavoTrentinidev