javascript - 根据 SVG 元素顶部位置定位工具提示

Question

我被这个困住了:
我得到了这个由 Raphael 生成的 SVG 图形，其中包含 300 多个多边形。我想在悬停多边形时显示工具提示。我希望工具提示位于悬停路径旁边。
到目前为止，一切顺利...我可以使用 .pageX 和 .pageY 属性。
现在，这就是我现在被困的地方......
我并不完全希望工具提示位于鼠标进入的位置，而是与多边形的顶部对齐，而不管鼠标进入的位置。

我显然在发布此之前进行了一些研究，结果发现 .getBoundingClientRect() 方法可能是我所需要的。不幸的是，我无法让它工作。控制台返回“无法读取未定义的属性‘getBoundingClientRect’。

我对 javascript 不是很好，如果有任何帮助，我将不胜感激!

代码如下:

var rsr = Raphael('rsr', '147.99', '151');
var shapes = [];

var path_a = rsr.path("M 59.288,50.5 44.58,25.5 59.288,0.5 88.703,0.5 103.41,25.5 88.703,50.5 z");
path_a.data('id', 'path_a');

var path_b = rsr.path("M 103.288,75.5 88.58,50.5 103.288,25.5 132.703,25.5 147.41,50.5 132.703,75.5 z");
path_b.data('id', 'path_b');

var path_c = rsr.path("M 59.288,100.5 44.58,75.5 59.288,50.5 88.703,50.5 103.41,75.5 88.703,100.5 z");
path_c.data('id', 'path_c');

var path_d = rsr.path("M 15.288,75.5 0.58,50.5 15.288,25.5 44.703,25.5 59.41,50.5 44.703,75.5 z");
path_d.data('id', 'path_d');

var path_e = rsr.path("M 103.288,125.5 88.58,100.5 103.288,75.5 132.703,75.5 147.41,100.5 132.703,125.5 z");
path_e.data('id', 'path_e');

var path_f = rsr.path("M 59.288,150.5 44.58,125.5 59.288,100.5 88.703,100.5 103.41,125.5 88.703,150.5 z");
path_f.data('id', 'path_f');

var path_g = rsr.path("M 15.288,125.5 0.58,100.5 15.288,75.5 44.703,75.5 59.41,100.5 44.703,125.5 z");
path_g.data('id', 'path_g');

shapes.push(path_a, path_b, path_c, path_d, path_e, path_f, path_g);

for (var i = 0; i < shapes.length; i++) {
  shapes[i].node.setAttribute('fill', '#8c1c40');
  shapes[i].node.setAttribute('stroke', 'white');
  shapes[i].node.setAttribute('stroke-width', '1');
  shapes[i].node.style.cursor = "pointer";

  shapes[i].mouseover(function(e) {
    var posx;
    var posy;
    // var pos = shapes[i].getBoundingClientRect(); 
    //	The above line returns "undefined"

    if (typeof e !== 'undefined') {
      posx = e.pageX - 300;
      posy = e.pageY - 0;
    }


    this.node.setAttribute('fill', '#888'); // 

    var box = document.getElementById('textbox');
    box.style.position = "absolute";
    box.style.left = '200px';
    box.style.top = posy + 'px';

    document.getElementById('textbox').innerHTML = this.data('id');

    e.preventDefault();
    e.stopPropagation();
  });

  shapes[i].mouseout(function(e) {
    this.node.setAttribute('fill', '#8c1c40');

    document.getElementById('textbox').innerHTML = "";

  });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<div id="rsr">
</div>

<div id="textbox">
</div>

Answer 1

您可以使用事件对象的 target 属性来获取边界矩形。类似于以下内容:

var rsr = Raphael('rsr', '147.99', '151');
var shapes = [];

var path_a = rsr.path("M 59.288,50.5 44.58,25.5 59.288,0.5 88.703,0.5 103.41,25.5 88.703,50.5 z");
path_a.data('id', 'path_a');

var path_b = rsr.path("M 103.288,75.5 88.58,50.5 103.288,25.5 132.703,25.5 147.41,50.5 132.703,75.5 z");
path_b.data('id', 'path_b');

var path_c = rsr.path("M 59.288,100.5 44.58,75.5 59.288,50.5 88.703,50.5 103.41,75.5 88.703,100.5 z");
path_c.data('id', 'path_c');

var path_d = rsr.path("M 15.288,75.5 0.58,50.5 15.288,25.5 44.703,25.5 59.41,50.5 44.703,75.5 z");
path_d.data('id', 'path_d');

var path_e = rsr.path("M 103.288,125.5 88.58,100.5 103.288,75.5 132.703,75.5 147.41,100.5 132.703,125.5 z");
path_e.data('id', 'path_e');

var path_f = rsr.path("M 59.288,150.5 44.58,125.5 59.288,100.5 88.703,100.5 103.41,125.5 88.703,150.5 z");
path_f.data('id', 'path_f');

var path_g = rsr.path("M 15.288,125.5 0.58,100.5 15.288,75.5 44.703,75.5 59.41,100.5 44.703,125.5 z");
path_g.data('id', 'path_g');

shapes.push(path_a, path_b, path_c, path_d, path_e, path_f, path_g);

for (var i = 0; i < shapes.length; i++) {
  shapes[i].node.setAttribute('fill', '#8c1c40');
  shapes[i].node.setAttribute('stroke', 'white');
  shapes[i].node.setAttribute('stroke-width', '1');
  shapes[i].node.style.cursor = "pointer";

  shapes[i].mouseover(function(e) {
    var posx;
    var posy;
    
    var pos = e.target.getBoundingClientRect();

    if (typeof e !== 'undefined') {
      posx = e.pageX - 300;
      posy = pos.top;
    }


    this.node.setAttribute('fill', '#888'); // 

    var box = document.getElementById('textbox');
    box.style.position = "absolute";
    box.style.left = '200px';
    box.style.top = posy + 'px';

    document.getElementById('textbox').innerHTML = this.data('id');

    e.preventDefault();
    e.stopPropagation();
  });

  shapes[i].mouseout(function(e) {
    this.node.setAttribute('fill', '#8c1c40');

    document.getElementById('textbox').innerHTML = "";

  });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<div id="rsr">
</div>

<div id="textbox">
</div>