获取svg外部对象中html的有效偏移量

Question

我在有效计算svg的异物偏移时遇到问题。

这是我的代码：

var canvas = SVG()
    .addTo('#container')
    .size(400, 300)
    .viewbox('0 0 200 200')
    .css('background-color', '#f3f3f3');

var table = canvas.group();

var rect = canvas.rect(80, 20).fill('#f00');
rect.move(50, 150);

var fo1 = canvas.foreignObject(80, 20);
fo1.add($(`
    <div class='fortooltip'>Some text goes here</div>
`)[0]);

fo1.move(50, 150);

table.add(rect);
table.add(fo1);

$('.fortooltip').bind('mouseover', function(e){
    console.log($(this).offset());
    console.log(e.clientX + ' ' + e.clientY);
});

$('<div>').appendTo('body').css({
    "position": "absolute",
    "width": "10px",
    "height": "10px",
    "top": "275px",
    "left": "315px",
    "background-color": "grey"
})

这里是小提琴：https://jsfiddle.net/grayter/ham4w3ng/11/

我创建了一个灰色的小矩形，它的坐标是我希望的助手（我希望此坐标来自某种偏移）。

jQuery偏移量方法返回无效位置：

console.log($(this).offset());

返回

{
  left: 393.75,
  top: 343.75
}

这与我期望的结果相去甚远

{
  left: 275,
  top: 315
}

根据此问题的标题，异物的偏移量也不正确：

console.log($(this).closest('foreignobject').offset());

我想念什么？

Answer 1

使用svg.js rbox()方法而不是偏移量。它返回一个包含div的框。在这种情况下，X和y属性将是偏移量。

SVG('.fortooltip').rbox()