浏览器中的SVG点击事件处理有何不同？

Question

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

例如，当存在一个withing链接的图标，

<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）的lightbox 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。设置为pointer-events: none为SVG打破OS X上的点击事件，但似乎不影响Linux浏览器

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

Answer 1

这个问题没有简单的答案，只是浏览器中的bugginess级别不一样（尽管它现在大部分工作）。

fancybox的行为似乎是由jQuery bug，只发生在某些浏览器造成的。它可以用一个简单的pointer-events: none修复。

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