motheherder
05-28-2005, 05:30 AM
Hello all
I have a bit of code similar to the following(below), I need to call this from HTML so require a javascript function e.g. startAnim() to start the animation. The examples I have managed to find seem to require a var for each point in the path, this is not practical for some of the path lengths i need to animate. Can anyone suggest a way of doing this?
Thanks for any help or suggestions
regards
mo
<rect id="button" x="150" y="150" height="20" width="30" fill="red"/>
<rect width="20" height="10" rx="3" ry="3" style="fill: blue; fill-opacity:1; stroke: gray; stroke-opacity:0.9;">
<animateMotion path="
M 79.67411 172.6272 C 97.88749 130.3794 126.0202 115.2727 172.8066 118.6865 C 231.0445 122.9358 261.0526 248.4056 329.8381 168.8031 C 364.9224 128.2017 399.1757 114.9469 435.097 165.1513 C 440.4396 172.6183 444.0925 177.3856 452.1413 183.0295 "
dur="10s" begin="button.mousedown" repeatCount="indefinite" rotate="auto"/>
</rect>
I have a bit of code similar to the following(below), I need to call this from HTML so require a javascript function e.g. startAnim() to start the animation. The examples I have managed to find seem to require a var for each point in the path, this is not practical for some of the path lengths i need to animate. Can anyone suggest a way of doing this?
Thanks for any help or suggestions
regards
mo
<rect id="button" x="150" y="150" height="20" width="30" fill="red"/>
<rect width="20" height="10" rx="3" ry="3" style="fill: blue; fill-opacity:1; stroke: gray; stroke-opacity:0.9;">
<animateMotion path="
M 79.67411 172.6272 C 97.88749 130.3794 126.0202 115.2727 172.8066 118.6865 C 231.0445 122.9358 261.0526 248.4056 329.8381 168.8031 C 364.9224 128.2017 399.1757 114.9469 435.097 165.1513 C 440.4396 172.6183 444.0925 177.3856 452.1413 183.0295 "
dur="10s" begin="button.mousedown" repeatCount="indefinite" rotate="auto"/>
</rect>