Bug 43890
| Summary: | using SVG mask in CSS with animate doesn't animate | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Silvia Pfeiffer <silviapfeiffer1> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED WORKSFORME | ||
| Severity: | Normal | CC: | simon.fraser |
| Priority: | P2 | ||
| Version: | 528+ (Nightly build) | ||
| Hardware: | PC | ||
| OS: | OS X 10.5 | ||
Silvia Pfeiffer
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)
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.