。
非常简单。我通过<object>
在我的文档中嵌入了一个 SVG,我正在以根<svg>
的样式应用pointer-events:none
。它适用于火狐,但不适用于Chrome(我目前对任何其他浏览器都不感兴趣)
兆威
有一个 HTML 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Why you no fix, Chrome?</title>
</head>
<body>
<a id="click"><object data="svg.svg" type="image/svg+xml"></object></a>
<script>document.getElementById('click').addEventListener('click',e => console.log(e));</script>
</body>
</html>
有一个 SVG 文件
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" style="pointer-events:none">
<path fill="#4a90d6" fill-opacity="1" stroke="#222222" stroke-width="2" d="M 0 0 L 100 0 L 50 100 z" />
</svg>
如果没有办法允许事件冒泡到锚点(即:停止 svg 捕获),那么通过事件视界传递事件的方法也会很好
编辑
我忘了补充一点,<object>
元素必须保持可点击。我强调MWE可以在Firefox中工作,但在Chrome中不起作用
尝试
<object style="pointer-events:none" ... >
这应该可以解决问题;-)