單擊處理器<svg>元素

看來，使用<svg:svg> </svg:svg>元素不會在Safari或Chrome中呈現任何內容，但使用<svg> </svg>可以正常工作。但是，添加onclick僅適用於<svg:svg>元素。什麼是正確的方法來做到這一點？單擊處理器<svg>元素

This jsfiddle演示了這個問題（比較Safari/Chrome和Firefox）。

來源

2013-05-11 jtbandes

爲什麼你不使用jQuery處理events.It的更容易嗎？ – boyd 2013-05-11 21:52:43

其實它對兩者都有效。但是在Chrome中它只有在你點擊紅點時纔有效。 – user568109 2013-05-11 22:03:39

好的，事實證明，創建SVG的第一種方法是僅在繪製的部分創建onclick。這意味着你實際上可以做一些很好的事情（在你的情況下可能沒有用）。

在this fiddle中，我創建了兩個單獨的onclick s，當您單擊特定圖形（我可以製作得更大以便可以看到）時會觸發，當您單擊SVG框時觸發，它。

HTML：

<div id="svgContainer"> 
    <svg id="firstSVG" class="s" xmlns="http://www.w3.org/2000/svg"> 
     <circle cx="50" cy="50" r="25" fill="red"/> 
    </svg> 
</div>

JS：

document.getElementById('firstSVG').addEventListener('click', function (event) { 
    document.getElementById("output").innerHTML = "Click works here too !"; 

}, false); 
document.getElementById('svgContainer').addEventListener('click', function (event) { 
    document.getElementById("output").innerHTML = "Well, a container seems better."; 

}, true);

所以基本上只使用一個容器周圍的SVG，或者僅使用點擊繪圖

來源

2013-05-11 21:52:53 Malharhak

你不甚至不必在SVG周圍放置一個容器。

您只需要爲SVG本身定義position: relative並解決點擊觸發問題。

這裏是一個分叉的小提琴顯示它：http://jsfiddle.net/jpsirois/xnw1tbL7/

來源

2014-10-08 19:22:26 JPSirois

在Safari 8中沒有任何區別。 – Pavlo 2015-05-06 08:56:03

單擊處理器<svg>元素

回答

相關問題