RESOLVED WORKSFORME 43890
using SVG mask in CSS with animate doesn't animate 
https://bugs.webkit.org/show_bug.cgi?id=43890
Summary using SVG mask in CSS with animate doesn't animate
Silvia Pfeiffer
Reported 2010-08-11 18:02:59 PDT
Webkit Version 5.0.1 (6533.17.8, r63640) I use a SVG mask as follows on a video in HTML via CSS: SVG file: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle id="circle" cx="240" cy="135" r="135" fill="black" pointer-events="all"> <animate attributeName="r" values="150;240;150" begin="mouseover" dur="3s" repeatCount="10" /> </circle> </svg> HTML file: <!DOCTYPE html> <html lang="en"> <body> <style> .target { -webkit-mask: url("test.svg"); } </style> <video class="target" height="270px" width="480px" controls > <source src="HelloWorld.mp4" type="video/mp4"> <source src="HelloWorld.webm" type="video/webm"> <source src="HelloWorld.ogv" type="video/ogg"> </video> </body> </html> The SVG file by itself works and animates the circle. And the circle mask is applied to the video. But the animation is not executed as part of the mask on the video.
Attachments
Add attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2011-02-24 22:25:28 PST
The SVG animation only starts on mouseover, and masks don't receive mouse events. If I remove the begin="mouseover" so it always animates, then it works fine.
Note You need to log in before you can comment on or make changes to this bug.