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

Question

我是传单编程的新手，我有一个 .svg 文件，我想使其在开放街道地图上的超级效果上可点击。

我尝试通过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 并设置一个click事件来记录目标元素的 id。

将 SVG 嵌入地图

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

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

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

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

还有一个演示

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

.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();

¹图片由 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>