Можно ли получить идентификатор пути, который окружает текст после нажатия на текст, без группировки - PullRequest
Новая
       36

Можно ли получить идентификатор пути, который окружает текст после нажатия на текст, без группировки

0 голосов
/ 08 марта 2020

Я создаю карту inddor, у меня есть svg, и я не уверен, возможно ли получить идентификатор пути (store1) при нажатии на текст (TENANT A) и идентификатор пути (store2) при нажатии на текст (TENANT Б)

вот мой svg: 

 <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5749.8 2421.9">
    <style type="text/css">
        .st3{fill:#FFFFFF;stroke:#000000;}
        .st6{fill:#FBB040;stroke:#000000;}
        .st7{fill:#238DDE;stroke:#000000;}
        .st8{font-family:'ArialMT';}
    </style>
        <g id="tenant">
            <path id="store1" class="st3" d="M909.5,486.8l137.5,0.1h89.7V5.5H871.4v442.9l7.3,4.3l6.7,4.8
                l6.1,5.2l5.3,5.5l5,5.9l3.5,4.5l2.3,3.3l1.3,2.3l0.6,1.5l0.1,0.9L909.5,486.8z"/>
                
                 <path id="store2" class="st3" d="M563.5,5.5v445.2h36v36.6h142l8.3-12.3l9.9-10.5l11-8.7l11.6-7
			l11.7-5.4l11.3-3.8l10.5-2.2l9.1-0.7l6.3,0.2l6.2,0.6l6.1,1l5.9,1.3l5.8,1.7l5.6,2l5.4,2.3l5.2,2.5V5.5H563.5z"/>
        </g> 
        <g id="label"> 
            <text transform="matrix(4 0 0 4 907.5792 196.5629)" class="st8 st9">TENANT A</text>
            
            <text transform="matrix(1 0 0 1 647.8267 193.2297)" class="st8 st9">TENANT B</text>
        </g>
    </svg>

Я пытался добавить прослушиватель событий к тексту, но даже не могу получить правильный идентификатор пути при нажатии на текст. Любые предложения или идеи могут помочь, я знаю snap.svg как инструмент для игры вокруг SVG, но ответ, кажется, не там, спасибо

1 Ответ

0 голосов
/ 09 марта 2020

Редактировать: Это неправильный способ, который я только что понял, но вы все равно можете сделать это так, но поменяйте местами C -> 3, b -> 2 и c, если существует буквальное соглашение об именах. Этот бит не ясен ...

оригинал:

Ну, не ясно, как арендатор связан с лейблом. Если это просто tenant1, то всегда первый элемент в ярлыках или что. Вы не описали логи c структуры svg в терминах «почему», арендатор c = store3 (позиция или алфавит или что-то еще ...)

Я сделал Пример, который поможет вам в этом, основан на том, что я предполагаю, что Арендатор B находится во 2-м магазине.

Пример http://jsfiddle.net/Lx9f0pt5/

var s = Snap("svg");

var tenants = s.select("#tenant");
var labels  = s.select("#label");
var regex = /store(.*)/;

tenants.click( function( el ){
  var store = el.target.id.match(regex)[1];
  var tenant =  labels.selectAll("text")[store-1];
  alert(store + ', ' + tenant.attr('text'));
});

Просто осознал, что это был неправильный путь, вы все равно можете сделать это и преобразовать C => 3, b => 2 et c ...

...