SVG填充中的event.target？

Question

我有一個用作繪圖表面的SVG 。 它包含各種子元素，在這種情況下，我關心的是一個circle 。 為了能夠一直繪制到svg的邊緣，我在svg元素上添加了padding: 5px ，它可以按預期工作，並且有一點皺紋。

svg元素本身中的circle上的單擊事件返回event.target.nodeName == circle 。 但是在填充中的circle上單擊事件會返回event.target.nodeName == svg ，這實際上使該circle不可選擇（因為我無法單擊它）。 有沒有辦法像這樣在元素的填充內查看實際的event.target ？ 還是我需要建立一個解決方法（即映射我放置的圓的坐標，並每次對照這些坐標檢查svg的event.currentTarget ）？

更新：這是一個小提琴，說明了這個問題。 單擊左側圓圈（在填充內）和event.target.nodeName == svg ； 點擊右側的圓圈（在svg中為正確），然后點擊event.target.nodeName == circle 。

https://jsfiddle.net/r5jd87n6/2/

Answer 1

添加溢出后，似乎至少在Firefox上可以正常工作：對外部<svg>元素可見。

 $('#parentsvg').click(function(event){ $('#output').html("event.target.nodeName: " + event.target.nodeName); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <svg id="parentsvg" width="200" height="200" style="padding:15px; overflow:visible" > <circle id="clickableCircle" cx="100" cy="50" r="6" fill="#333333"></circle> <circle id="unClickableCircle" cx="-5" cy="50" r="6" fill="#333333"></circle> </svg> </div> <div id="output"></div> </div>