SVG填充中的event.target？

Question

I have an SVG that 'm using as a drawing surface. It contains all sorts of sub-elements, and in this case, the one I care about is a circle . In an effort to be able to draw all the way to the edge of the svg , I've added padding: 5px to the svg element, which works as intended, with one small wrinkle.

Click events on a circle in the svg element itself return event.target.nodeName == circle . But click events on a circle in the padding returns event.target.nodeName == svg , which effectively makes the circle unselectable (since I can't click it). Is there a way to see the actual event.target within an element's padding like this? Or do I need to build a workaround (ie mapping the coordinates of the circles I've placed, and checking the svg 's event.currentTarget against those coordinates each time)?

Updated: Here's a fiddle illustrating the issue. Click the left circle (inside the padding) and event.target.nodeName == svg ; click the right circle (in the svg proper) and event.target.nodeName == circle .

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

Answer 1

Seems to work OK at least on Firefox once I add overflow: visible to the outer <svg> element.

 $('#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>