根据SVG元件顶部位置定位刀尖

Question

我坚持这一个：
我得到了拉斐尔生成的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

您可以使用事件对象的@Mapping(expression = "java(parameters.get(\"name\"))", target = "name") public MyEntity mapToEntity(final Map<String, String> parameters); 属性来获取边界矩形。如下所示：

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 = "";

  });

}