Пройдите по дереву из элемента shadowRoot в SVG - PullRequest
Новая
       11

Пройдите по дереву из элемента shadowRoot в SVG

0 голосов
/ 08 ноября 2018

Готовлю визуализацию для мониторинга системы пожарной сигнализации. План Flor выполнен в SVG, детекторы - клоны символов в легенде. Мне нужно отобразить идентификатор текущего / неисправного детектора при наведении мыши.

Наведите указатель мыши на элемент (клонировано): 

<use
     xmlns="http://www.w3.org/2000/svg"
     x="0"
     y="0"
     xlink:href="#T0.000.0"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     id="T0.2002.2"
     width="100%"
     height="100%"
     transform="translate(214.99997,-507.73845)"
     inkscape:label="#czujka"
     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
     style="opacity: 1; fill: rgb(255, 255, 255); fill-opacity: 1; stroke: none; stroke-opacity: 1;"
/>

Родительский элемент (в легенде): 

<g
    xmlns="http://www.w3.org/2000/svg"
    style="display:inline;fill-opacity:1;enable-background:new"
    inkscape:label="#czujka"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    id="T0.000.0"
    transform="matrix(0.97129703,0,0,0.88838831,-264.13104,95.785416)"
>
    <rect
        y="-65.32663"
        x="547.59875"
        height="13.507604"
        width="12.354611"
        id="rect11435"
        style="fill-opacity:1;stroke:#000000;stroke-width:1.07652116;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
    />
    <path
        inkscape:connector-curvature="0"
        id="path11475" d="m 556.86474,-63.075369 c -15.44327,9.005071 9.26596,0 -6.17731,9.005071"
        style="fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.07652116;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
        sodipodi:nodetypes="cc"
        xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    />
</g>

Курсор мыши выбирает элементы прямоугольника или контура. parentNode.id указывает на «T0.000.0», а его parentNode равен нулю. Как я могу получить идентификатор элемента "T0.2002.2"?

Дополнительная информация перенесена из комментария:

Символы легенды не добавляют самих слушателей событий. Детекторы добавили прослушиватели событий: 

function over(x) {
    pop.innerHTML = x.originalTarget.parentNode.id;
    var pageX = x.pageX;
    var pageY = x.pageY + 25;
    pop.style.left = pageX+"px";
    pop.style.top = pageY+"px";
    pop.style.display = 'block';
}

function out() {
    pop.style.display = 'none';
}

1 Ответ

0 голосов
/ 09 ноября 2018

Вы должны избегать перехода от теневого корня к элементу экземпляра. Все становится намного проще, если вы присоедините слушателей событий к элементам <use>. Например, вы могли бы дать всем <use> элементам, представляющим детектор, class="detector" и написать что-то вроде этого: 

var detectors = deocument.querySelectorAll('.detector');

function over(x) {
    pop.innerHTML = x.currentTarget.id;
    ....
}
function out() {....}

detectors.forEach(function (el) {
    el.addEventListener('mouseenter', over);
    el.addEventListener('mouseleave', out);
 });
...