RESOLVED DUPLICATE of bug 150838 150274
SVG text's transparent box overlaps clickable shape, disabling click 
https://bugs.webkit.org/show_bug.cgi?id=150274
Summary SVG text's transparent box overlaps clickable shape, disabling click
Tobi Reif
Reported 2015-10-17 02:36:30 PDT
Steps to reproduce the problem: Load http://codepen.io/TobiReif/pen/ghELn in Safari 9. Click on the right or left circle -> animation starts. Click on the center circle -> animation doesn't start. What is the expected behavior? Clicking on the center circle should start the animation. (Works in FF, doesn't work in Safari & Chrome.) What went wrong? Click on the center circle -> animation doesn't start. Also see https://code.google.com/p/chromium/issues/detail?id=424273 .
Attachments
Add attachment proposed patch, testcase, etc.
Antoine Quint
Comment 1 2015-11-03 14:37:31 PST
*** This bug has been marked as a duplicate of bug 150838 ***
Tobi Reif
Comment 2 2016-04-17 04:44:53 PDT
This works now in the Safari preview. I deleted the pen. In case anyone needs to test this in the future, here's the code: <svg id="svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 300 60"> <rect id="rect" x="10" y="5" width="20" height="20" fill="lime"> <animate attributeName="x" begin="circle1.click;circle2.click;circle3.click" dur="0.5s" from="100" to="10" fill="freeze"/> </rect> <circle id="circle1" cx="20" cy="37" r="5" fill="green"/> <circle id="circle2" cx="80" cy="37" r="5" fill="green"/> <circle id="circle3" cx="120" cy="37" r="5" fill="green"/> <text y="30" fill="olive" font-size="10"> <tspan x="40" dy="1em">Foo.</tspan> <tspan x="40" dy="1em">Foo bar baz.</tspan> </text> </svg>
Note You need to log in before you can comment on or make changes to this bug.