- From: Frederik Elwert <frederik.elwert@web.de>
- Date: Wed, 05 Jan 2011 21:16:56 +0100
- To: www-svg@w3.org
Hi there! I am currently experimenting with interactive and animated SVG graphics. When I have several animations that always run concurrently, I tend to make on the “master” animation and synchronize the others by setting “begin="master.begin"”. This allows to change the actual begin (time, event, etc.) at a single place and still have the animations in sync. Now I noticed one oddity with repeated syncs with both start and end event driven: I have an animation that starts at an click event and then repeats until stopped by another click event. Both start and end of a second animation are synced to the first one. Here is a minimal example: <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg id="svg2816" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"> <g id="layer1" fill-rule="nonzero"> <rect id="rect" stroke-linejoin="miter" style="enable-background:accumulate;color:#000000;stroke-dasharray:none;" stroke-dashoffset="0" ry="30" height="140" width="270" stroke="#8ae234" stroke-linecap="round" stroke-miterlimit="4" y="90" x="185" stroke-width="1" fill="#244703"> <animate id="startx" attributeName="x" values="185;100;185" begin="start.click" end="stop.click" dur="2s" fill="freeze" repeatCount="indefinite"/> <animate attributeName="y" values="90;40;90" begin="startx.begin" end="startx.end" dur="2s" fill="freeze" repeatCount="indefinite"/> </rect> <rect id="start" style="enable-background:accumulate;color:#000000;" ry="10" height="55.338" width="96.241" y="382.56" x="181.88" fill="#204a87"/> <rect id="stop" style="enable-background:accumulate;color:#000000;" ry="10" height="55.338" width="96.241" y="382.56" x="361.88" fill="#a40000"/> </g> </svg> Opera runs both animations when clicking on start (the blue rect) and stops them when clicking on stop (the red rect). But when restarting the animation, in runs only the “master” animation (startx). Batik, on the other hand, only runs “master” (startx) when starting the animation for the first time. With following restarts, it runs both animations. (There also is a difference in handling the end event: Batik sets the animation to the last value, while Opera just freezes the animation.) So my questions are: * Is my original approach valid at all? * Which behaviour is the defined one? If any? * Are there better solutions? Thanks, Frederik
Received on Wednesday, 5 January 2011 22:13:31 UTC