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

Question

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

例如，当有一个带有 link 的图标时，

<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 之外的所有浏览器中，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 引起的，它只发生在某些浏览器中。它可以用一个简单的 pointer-events: none.

来修复

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

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

How does SVG click event handling differ between browsers?

html

css

jquery

svg

cross-browser