Question

我注意到浏览器的行为在实现和操作系统之间非常不一致。

例如，当有带链接的图标时，

<a href="faq.html" class="icn icn-faq">
    <svg version="1.1" role="img" aria-label="FAQ">
        <use xlink:href="/images/icons.svg#faq" />
    </svg>
</a>

无论点击何处都可以使用。但是，如果我添加一个（基于jQuery的）灯箱jQuery('a.icn-faq').fancybox({"content": "wat?"})，浏览器行为开始不同。点击SVG上的任何位置会导致灯箱出现在除Safari之外的所有浏览器中，只有在没有点击path的情况下，它才有效。

我了解到我可以通过adding a transparent rect解决这个问题，这让我再次获得了一致的浏览器行为。

<a href="faq.html" class="icn icn-faq">
    <svg version="1.1" role="img" aria-label="FAQ">
        <use xlink:href="/images/icons.svg#faq" />
        <rect width="100%" height="100%" fill="#fff" fill-opacity="0" />
    </svg>
</a>

我也知道pointer-events。为SVG设置pointer-events: none会破坏OS X上的点击事件，但似乎不会影响Linux浏览器

我不了解这一切是如何融合在一起的。导致这些差异的基本原则是什么？

Answer 1

这个问题没有简单的答案，只是浏览器中的不同级别（虽然它现在大部分都有效）。

fancybox行为似乎是由jQuery bug引起的，{{3}}仅在某些浏览器中出现。它可以通过简单的pointer-events: none修复。

了解细节中的行为并不能买多少。了解如何解决这些问题很有用（添加问题中显示的图像填充路径）。其余的是浏览器实现细节，不值得大多数人痛苦。

SVG点击事件处理在浏览器之间有何不同？

1 个答案: