Расположение наконечника инструмента относительно верхней позиции SVG-элемента

1

Я застрял в этом:
Я получил эту графику SVG, созданную Рафаэлем, с более чем 300 полигонами. Я хочу отображать всплывающую подсказку, когда вы навешиваете многоугольник. Я хотел бы, чтобы всплывающая подсказка располагалась рядом с зависающей дорожкой.
Пока что так хорошо... Я могу использовать свойства.pageX и.pageY.
Теперь, вот где я сейчас застрял...
Я не хочу, чтобы всплывающая подсказка располагалась там, куда входит мышь, но выравнивается с вершиной многоугольника, независимо от того, куда входит мышь.

Изображение 174551

Я, очевидно, провел некоторое исследование, прежде чем публиковать его, и выяснилось, что метод.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>
Теги:
svg
raphael

1 ответ

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>
Поделиться
  • 0
    Большое спасибо за ваш ответ @FixMaker. Это отлично работает для упрощенного примера, который я привел. Однако я придумаю еще одну проблему. Поскольку высота графики довольно важна, нам часто приходится прокручивать вверх и вниз. А потом ... становится все грязно :-( Есть предложения?
  • 0
    О, я думаю, я понял! posy = pos.top + window.scrollY; должен сделать работу. Спасибо за вашу помощь!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню