Click Event on SVG not working in Safari.
Click Event on SVG path not working in Safari. Also tried with mousedown
the same result.
SVG example:
<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>
Script:
document.querySelector("#co").addEventListener('click', function(){
alert(this);
});
https://jsfiddle.net/bxzbpwgj/11/
Any suggestions?
+3
source to share
1 answer
The 1px height prevents the click event from firing in safari. Safari does not fire events for overflow items 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>
+3
source to share