可以在单击文本后获得文本的路径ID，而不进行分组

Question

我正在创建inddor地图，但是我有一个svg，我不确定在单击文本（TENANT A）时是否可以获取路径ID（store1）和在单击文本（TENANT B）时获取路径ID（store2） ）

这是我的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>

我尝试将事件侦听器添加到文本中，但是单击文本时我什至无法获得正确的路径ID任何建议或想法都将有所帮助，我知道snap.svg可作为svg的工具，但答案似乎也没有，谢谢

Answer 1

编辑：这是我刚刚意识到的错误方法，但是您仍然可以这样做，但是如果存在文字命名约定，请交换C-> 3，b-> 2等。这一点还不清楚...

原始：

嗯，不清楚租户与标签之间的关系。如果仅仅是tenant1，则始终是标签或其他内容中的第一个元素。您尚未按照“为什么” tenantc = store3（位置或字母或其他...）来描述svg结构的逻辑。

我已经完成了一个示例，可以使您分得一杯,，这是基于我假设租户B位于第二商店的情况。

示例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等...