Hi Andreas, Thomas, I am facing a similar problem, I want to drag and drop pictures inside a defined frame area. I think the following example demonstrates the problem reasonably clearly (it should be easy enough to do the same thing with a clipPath instead of a nested svg element):
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg"; width="100%" height="100%"> <script type="text/ecmascript"> function setColour(id, colour) { document.getElementById(id).setAttributeNS(null, 'fill', colour); } </script> <rect id="outer" x="0%" y="0%" width="100%" height="100%" fill="lightgrey" onmousedown="setColour('outer', 'green')" onmouseup="setColour('outer', 'lightgrey')"/> <svg x="25%" y="25%" width="50%" height="50%" overflow="hidden"> <rect id="inner" x="-25%" y="-25%" width="150%" height="150%" fill="grey" onmousedown="setColour('inner', 'red')" onmouseup="setColour('inner', 'grey')"/> <rect id="glasspane" x="0%" y="0%" width="100%" height="100%" fill="none" stroke="none" pointer-events="visibleFill" onmousedown="setColour('inner', 'green')" onmouseup="setColour('inner', 'grey')"/> </svg> <rect id="inner-bounds" x="12.5%" y="12.5%" width="75%" height="75%" fill="none" stroke="black" stroke-dasharray="1% 1%"/> </svg> In this example it is assumed that events on the light grey area, as seen by the user, are intended to be targeted to "outer" and events on the darker area are targeted to "inner". Clicks that are handled correctly in this sense result in the targeted element flashing green. Clicks on the light grey area, but inside the dashed line that represents the full bounds of the inner rectangle, are incorrectly (within the context of this example) picked up by the inner rectangle and result in it flashing red. What I am hoping will be a practical solution follows from the example - create a glasspane element over each element that requires pointer event clipping. The glasspane and clipping area are defined with the same shape. The glasspane is used to handle pointer events, and the target has pointer-events="none" set to allow events to fall through. Since each glasspane is specific to one target, event retargeting shouldn't be too complicated. This should work in all UAs (tested Batik and Firefox 1.5). e.g. <rect id="inner" x="-25%" y="-25%" width="150%" height="150%" fill="grey" pointer-events="none"/> Any comments would be greatly appreciated since I haven't tried to implement this to any significant extent yet. Regards, Steve Drake -- View this message in context: http://www.nabble.com/event-sensitivity-in-nested-svgs-when-content-is-bigger-than-viewBox-tf2424370.html#a6964837 Sent from the Batik - Users mailing list archive at Nabble.com. --------------------------------------------------------------------- To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
