I'm trying to define a SVG path-animation to have a dynamic clip-path but I am not able to get it running. This is my current implementation:
<defs> <clipPath id="clipping"> <path> <animate attributeName="d" begin="2s" dur="2.0s" keyTimes="0; 0.5; 1" fill="freeze" repeatCount="indefinite" values="M 492 492 L 492 0 L 492 0 L 492 0 L 492 0 z; M 492 492 L 984 0 L 984 0 L 0 0 L 0 0 z; M 492 492 L 984 492 L 984 0 L 0 0 L 0 492 z" /> </path> </clipPath> </defs> <image clip-path="url(#clipping)" x="0" y="0" width="984" height="492" xlink:href="http://URL_TO_IMAGE" />
The path is animated if repeatCount is indefinite, but all other values result in a transition directly to the last path-definition without any animation.
Additionally does it look like the begin-attribute does not effect the starting point. I changed the value to extreme numbers (i.e. 20 seconds) and the starting point was every time the same.
An other issue is that it seems like the animation-states do not reset if the element is removed from the HTML-code. My code dynamically adds and removes the defs-tag and the corresponding clipPath and add it only when needed. It looks like the animation states are only reset, if the defs-tag, etc. are removed for more than 30 seconds from the HTML-code. Otherwise looks it like the counters are updated internally and if the tags reapear, the animation is shown somewhere in the middle.
One last issue is that the first run of the animate-tag is not shown from the first frame. It is visualized after round about 20% of the complete animation-definition. I assumed some internal delays, but an increased duration shows the same results. I increased the duration to 20 seconds for a test run.
This following video shows the current version with the reported problems:
What am I doing wrong or are these bugs inside the webkit-rendering-code?
Can you show me the correct way to implement this dynamic clipping?