瀏覽器中的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修復。

瞭解細節中的行爲不會購買太多。瞭解如何解決這些問題（添加圖像填充路徑，如問題中所示）很有用。其餘的是瀏覽器實現細節，不值得大多數人的痛苦。