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

Posted 2023-03-28

【中文标题】根据 SVG 元素顶部位置定位工具提示

【英文标题】：Positioning a tool tip in regard of SVG element top position

【发布时间】：2018-06-17 13:54:12

【问题描述】：

我被这个困住了： 我得到了这个由 300 多个多边形组成的 Raphael 生成的 SVG 图形。我想在悬停多边形时显示工具提示。我希望工具提示位于悬停路径旁边。 到目前为止，一切都很好...我可以使用 .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>

【参考方案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>

【讨论】：

非常感谢您@FixMaker 的回答。它确实适用于我提供的简化示例。但是，我想出了另一个问题。由于图形高度非常重要，我们经常需要上下滚动。然后......它变得一团糟:-(有什么建议吗？

哦，我想我明白了！ posy = pos.top + window.scrollY;应该做的工作。感谢您的帮助！