javascript - SVG 上的单击事件在 Safari 中不起作用

Question

SVG 路径上的单击事件在 Safari 中不起作用。还尝试了 mousedown 相同的结果。

SVG 示例:

<svg xmlns="http://www.w3.org/2000/svg" id="map" viewBox="0 0 800 579" enable-background="new 0 0 800 579" preserveAspectRatio="xMidYMin slice" style="width: 100%; padding-bottom: 72%; height: 1px; overflow: visible">
  <path id="co" fill="#D3D3D3" d="M378.6,256.8l1.4-21.3l-32.1-3.1l-24.5-2.7l-37.3-4.1l-20.7-2.5l-2.6,22.2l-3.2,22.4l-3.8,28 l-1.5,11.1l-0.3,2.8l33.9,3.8l37.7,4.3l32,3.2l16.6,0.8"></path>
</svg>

脚本:

document.querySelector("#co").addEventListener('click', function(){
    alert(this);
});

https://jsfiddle.net/bxzbpwgj/11/

有什么建议吗？

Answer 1

Height 1px is preventing your click event to trigger in safari. Safari do not trigger events for overflow elements in Svg.

Solution: Remove height:1px

document.querySelector("#co").addEventListener('click', function(){
    alert(this);
});

<svg xmlns="http://www.w3.org/2000/svg" id="map" viewBox="0 0 800 579" enable-background="new 0 0 800 579" preserveAspectRatio="xMidYMin slice" style="width: 100%; overflow: visible">
  <path id="co" fill="#D3D3D3" d="M378.6,256.8l1.4-21.3l-32.1-3.1l-24.5-2.7l-37.3-4.1l-20.7-2.5l-2.6,22.2l-3.2,22.4l-3.8,28 l-1.5,11.1l-0.3,2.8l33.9,3.8l37.7,4.3l32,3.2l16.6,0.8"></path>
</svg>