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:
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?