0

很简单。我在我的文档中嵌入了一个 SVG，<object>并且我正在应用pointer-events:noneroot 的样式<svg>。它适用于 Firefox，但不适用于 Chrome（我目前对任何其他浏览器都不感兴趣）

MWE

有一个 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 中无效

4

1 回答 1

2

尝试

<object style="pointer-events:none" ... >

这应该够了吧 ;-）

于 2017-01-26T18:04:54.513 回答