滚动窗口时出现SVG问题

Question

我创建了一个网页，在其中使用svg画布并将矩形放置在此svg画布中。

我已将此svg画布放置在两个div中。一个用于svg，另一个用于滚动该svg。

<div id="initialCanvas">
    <div id="svg_Canvas"></div>
</div>

Css：

#initialCanvas {
    border: 1px solid gray;
    margin: 0px;
    margin-left: 1%;
    width: auto;
    height: 20vw; 
    overflow: auto !important;
    resize: vertical !important;
    background-color: #e6e6e6;
}

#svg_Canvas{
    margin: -27px;
    padding: 0 !important;
    border: 1px solid #f2f2f2;
    background-color: #e6e6e6;
    width:6000px; 
    height:6000px;
}

svg {
    position: relative !important;
    border: 1px solid #e6e6e6;
    background-color: white;
    width:"100%";
    height: "100%";
}

对于我使用的draw2d

我能够创建新的矩形并移动并在svg中选择它们。如果我在<div id="initialCanvas"></div>的 inside 中滚动，我也可以访问rects。

我已将我的canvas-ScrollArea设置为svg_Canvas。

canvas.setScrollArea('#svg_Canvas')

但是现在当我滚动浏览器窗口时遇到了问题。滚动窗口的那一刻，如果我在rect下方单击，则只能访问我的rect（下面的数量取决于我滚动窗口的数量。）

不滚动窗口： Correct moving of upper right port

滚动窗口后： Not correct moving of upper right port

谢谢，希望你能帮助我。