[英]is it possible to get the path id that surrounds the text after the text was clicked, without grouping
我正在創建一個 inddor 地圖,我有一個 svg,我不確定當我單擊文本(租戶 A)和路徑 ID(商店 2)時是否可以獲取路徑 ID(商店 1),當我單擊文本(租戶 B)時
這是我的 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 的工具,但答案似乎也不在那里,謝謝
編輯:這是我剛剛意識到的錯誤方式,但您仍然可以這樣做,但是如果有文字命名約定,請交換 C -> 3、b -> 2 等。 這個有點不太清楚。。。
原來的:
好吧,目前還不清楚租戶與標簽的關系。 如果它只是租戶 1 總是標簽中的第一個元素或什么。 您還沒有描述 svg 結構的邏輯,就“為什么”tenantc = store3(位置或字母表或其他……)
我已經做了一個例子,可以讓你在那里分一杯羹,這是基於我假設租戶 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 等...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.