Javascript Marker.JS SVG图层偏离中心

我试图使用Marker.JS中的一个简单设置，允许用户使用文本框和箭头对图像进行注释。然而，当我去渲染最终产品时，它会将所有内容推到右边。我认为这是SVG层偏离图像中心的问题

我想让编辑器的SVG层正确地分层在图像上，这样文本框和图标在渲染过程中仍保留在预期的位置

谢谢大家!

HTML:#canvasIMG是marker.js初始化的地方，#resultImage是render（）生成结果的地方

<img id="canvasIMG" src="<?php echo $imgURL[1] ?>" alt="" width="100%" height="auto">

<img id="resultImage" src="" alt="..." width="100%" height="auto" style="display:none;">

这是用户编辑的图像的屏幕截图，在SVG层关闭时高亮显示。

这是从渲染函数生成的结果IMG。从上面生成的SVG是关闭的。

//processes SVG layer and IMG and returns them in one Base64 IMG

  function render() {
            if (markerArea) {
                markerArea.render((dataUrl) => {
                    const res = document.getElementById("resultImage");
                    res.src = dataUrl;
                    res.style.display = "block";
                    localStorage.setItem('savedIMG', dataUrl);
                });
            }
        }