javascript - 在具有相同 SVG 坐标的 Canvas 图像上定位 Div

Question

我有一个用例，其中我有一个可拖动到 SVG 元素上的 div。它是一个便利贴，放置在 SVG 中的各个元素附近，然后我使用canvas.drawImage().

问题是它的定位不正确当我开始从左到右拖动它时，它与 SVG 中的元素的距离开始发生变化。我附上几个截图来澄清情况

定位在 SVG 上的元素：image1.1

绘制后出现在画布上的元素：image1.2

SVG image2.1上的第二个元素位置

绘制后出现在画布上的第二个元素： image2.2

正如您在图像 1.1 和 2.1 中看到的，我将元素定位在两个不同的条上，但它们在完全相同的坐标上。

但是在图像 1.2 和 2.2 中，两个元素都应该在条形图上的相同位置，但两者都不同。当我向右走时，红色盒子向左漂移。我希望两个盒子相对于盒子处于相同的位置。

这是我用来从整个 svg 中获取像素坐标的代码

var pt = $("#bar-chart-modal").find(".si-dataviz-bar")[0].createSVGPoint();  // Created once for document
              pt.x = e.clientX;
              pt.y = e.clientY;
              // The cursor point, translated into svg coordinates
              var cursorpt = pt.matrixTransform($("#bar-chart-modal").find(".si-dataviz-bar")[0].getScreenCTM().inverse());
              console.log("(" + cursorpt.x + ", " + cursorpt.y + ")");

每当我拖动给我 X 和 Y 的元素时，这段代码就会运行。然后我在 drawImage() 中使用这些坐标，如下所示

 ctx.drawImage(footerImg, self.pagex, self.pagey);

注意：由于我无法将 Div 元素附加到 SVG，它被附加到 SCG 的父 div 中，其宽度和高度与 SVG 相同，谁能帮忙告诉我哪里出错了

谢谢

标签： javascriptjqueryd3.jssvgcanvas