如何使svg路径可以在传单中单击并通过单击获取路径ID

Question

我是传单编程的新手，我有一个.svg文件，我希望在开放的街道地图上实现超级强加的可点击性。

我试图通过Image-overlay选项将其作为开放街道地图上Image-overlay但svg不可点击。

基本上我想获取传单中单击的svg路径或元素（你曾经调用过的）的ID。 点击后地图会变焦。

var imageUrl = 'test2.svg', 
                imageBounds = [(image bounds)]; 
L.imageOverlay(imageUrl, imageBounds).addTo(map);

Answer 1

加载SVG文件

您可以通过imageOverlay加载文件，但不会在单个路径/组/形状上获取事件，您只能使用叠加层上的事件。

要获取SVG组件的事件，您必须将其嵌入到DOM节点中，方法是将其嵌入或加载并创建所需的节点。 这样的东西¹ ：

 var url = 'https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg'; var req = new XMLHttpRequest(); req.onload = function(resp) { var xml = this.responseXML; var importedNode = document.importNode(xml.documentElement, true); var g = document.createElementNS("http://www.w3.org/2000/svg", "g"); g.appendChild(importedNode); g.setAttribute('class', 'svglayer'); var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.appendChild(g); svg.addEventListener('click', function(e) { console.log(e.target.id) }) document.body.appendChild(svg); }; req.open("GET", url, true); req.send(); 

此代码段将加载SVG文件，将其附加到DOM et并设置将记录目标元素的id的click事件。

将SVG嵌入到地图中

有了这些知识，您可以将SVG节点附加到地图窗格而不是document.body 。 这是一个直接修改overlay窗格的简单示例：

map.getPane('overlayPane').appendChild(svg);

需要注意的一点是，Leaflet通过将CSS属性pointer-events为none来禁用单击各个路径元素。 您必须更改此选项以在路径节点上获取事件，因此添加了CSS属性：

.leaflet-pane > svg .svglayer path {
    pointer-events: auto ;
}

还有一个演示

 var map = L.map(document.getElementById('map'),{ renderer: L.canvas() }).setView([48.8583736, 2.2922926], 15); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); var url = 'https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg'; var req = new XMLHttpRequest(); req.onload = function(resp) { var xml = this.responseXML; var importedNode = document.importNode(xml.documentElement, true); var g = document.createElementNS("http://www.w3.org/2000/svg", "g"); g.appendChild(importedNode); g.setAttribute('class', 'svglayer'); var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.appendChild(g); svg.addEventListener('click', function(e) { console.log(e.target.id, e.target.tagName) }) map.getPane('overlayPane').appendChild(svg); }; req.open("GET", url, true); req.send(); 

 html, body {padding:0; margin:0; height: 100%} #map {height: 180px} .leaflet-pane > svg .svglayer path { pointer-events: auto ; } 

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script> <div id='map'> </div> 

¹图片来自Ghostscript作者（GPL Ghostscript SVN：tiger.eps）[GPL（ http://www.gnu.org/licenses/gpl.html）] ，来自Wikimedia Commons

Answer 2

您需要在图像叠加层上明确指定interactive选项：

如果为true ，则图像叠加将在单击或悬停时发出鼠标事件。

 var map = L.map("map").setView([48.85, 2.35], 12); var imageBounds = [ [48.8, 2.3], [48.9, 2.4] ]; var imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/9/9c/Map_of_country_subdivisions_%28states%29.svg'; var imageOverlay = L.imageOverlay(imageUrl, imageBounds, { interactive: true, attribution: '<a href="https://commons.wikimedia.org/wiki/File:Map_of_country_subdivisions_(states).svg">CC-BY-SA 4.0 Wikimedia contributor</a>' }).addTo(map); imageOverlay.on('click', function(event) { alert('clicked on SVG image'); }); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); 

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"> <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet-src.js"></script> <div id="map" style="height: 200px"></div>