我遇到了一個問題，即path在使用 Leaflet 覆寫窗格時，滑鼠懸停事件不適用于 SVG元素。我創建了 3 個 SVG 元素（使用 D3.js） - a circle、 arect和 a path。它們都顯示良好，并且滑鼠懸停事件適用于circle和rect，但不適用于path。如果我在沒有 Leaflet 的情況下創建相同的 3 個元素，它們都可以正常作業。
這是javascript代碼
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(mymap);
//initialize svg to add to map
L.svg({clickable:true}).addTo(mymap)// we have to make the svg layer clickable
const overlay = d3.select(mymap.getPanes().overlayPane)
const svg = overlay.select('svg').attr("pointer-events", "auto")
svg.append('path')
.attr('d', 'M 110 110 H 190 V 190 H 110 L 110 110')
.style("fill", "green")
.attr("stroke", "black")
.on('mouseover', () => {
console.log("mouseover path");
d3.select(event.currentTarget).style("fill", "blue")
})
.on('mouseout', () => {
d3.select(event.currentTarget).style("fill", "green")
})
svg.append('circle')
.attr("cx", 300)
.attr("cy", 200)
.attr("r", 75)
.style("fill", "yellow")
.attr("stroke", "black")
.on('mouseover', () => {
console.log("mouseover circle");
d3.select(event.currentTarget).style("fill", "blue")
})
.on('mouseout', () => {
d3.select(event.currentTarget).style("fill", "yellow")
})
svg.append('rect')
.attr("x", 500)
.attr("y", 200)
.attr("width", 75)
.attr("height", 75)
.style("fill", "red")
.attr("stroke", "black")
.on('mouseover', () => {
console.log("mouseover rect");
d3.select(event.currentTarget).style("fill", "blue")
})
.on('mouseout', () => {
d3.select(event.currentTarget).style("fill", "red")
})
這是一個JSFiddle
這是沒有 Leaflet 的相同代碼，它按我的預期作業
誰能解釋為什么滑鼠懸停事件不適用于該path元素？謝謝！
uj5u.com熱心網友回復：
如果您檢查瀏覽器除錯器中的路徑，您將看到 Leaflet.css 包含此...
.leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-image-layer, .leaflet-pane > svg path, .leaflet-tile-container { 指標事件：無；}
因此，它明確關閉了所有 SVG 標簽直接后代的路徑的指標事件。
您可以通過添加來覆寫它
.style("pointer-events", "auto")
到路徑生成代碼。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/312315.html
標籤：javascript svg 传单
上一篇：如何在svg中創建蒙版
下一篇：將SVG匯入HTML