-- In [email protected], "suntory_aj" <suntory...@...> wrote: > > Is it possible to animate a point through a path (like the one below) AND > leave its trace as the point travels the path? I.e. like looks like the path > is being drawn. > > <circle cx="0" cy="0" r="4" fill="red" opacity="1"> > <animateMotion dur="1s" > > <mpath xlink:href="#path1"/> > </animateMotion> > </circle> > > <path id="path1" d="M19.25 38.23 > c3.07 1.12 6.86 0.63 10.02 0.24 > c15.11 -1.84 33.86 -4.18 47.24 -4.94 > c3.41 -0.2 6.88 -0.37 10.24 0.36" > style="fill:none;stroke:gray;stroke-width:2"> > </path> >
Two suggestions (also found at http://wwwpub.zih.tu-dresden.de/~s9783698/svg/trace-path.xml): <svg xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";> <g> <path id="path1" d="M19.25 38.23 c3.07 1.12 6.86 0.63 10.02 0.24 c15.11 -1.84 33.86 -4.18 47.24 -4.94 c3.41 -0.2 6.88 -0.37 10.24 0.36" style="fill:none;stroke:gray;stroke-width:2" stroke-dasharray="70,70" stroke-dashoffset="70"> <animate attributeType="XML" attributeName="stroke-dashoffset" from="70" to="0" dur="1s"/> </path> <circle cx="0" cy="0" r="4" fill="red" opacity="1"> <animateMotion dur="1s" > <mpath xlink:href="#path1"/> </animateMotion> </circle> </g> <g transform="translate(0,50)"> <path id="path2" d="M19.25 38.23 c3.07 1.12 6.86 0.63 10.02 0.24 c15.11 -1.84 33.86 -4.18 47.24 -4.94 c3.41 -0.2 6.88 -0.37 10.24 0.36" style="fill:none;stroke:gray;stroke-width:2" stroke-dasharray="0,70"> <animate attributeType="XML" attributeName="stroke-dasharray" from="0,70" to="70,0" dur="1s"/> </path> <circle cx="0" cy="0" r="4" fill="red" opacity="1"> <animateMotion dur="1s" > <mpath xlink:href="#path2"/> </animateMotion> </circle> </g> </svg> Sadly, I found only Opera supports both. The first one also works with Batik, but the other two browsers I tried (FF 3.6.11, Google Chrome 8.0.552.11 dev) don't do it. By the way: When is it supposed to be attributeType="XML" and when attributeType="CSS"? I found it doesn't make a difference (in the cases where it works, i.e. Opera and Batik). Thomas W. ------------------------------------ ----- To unsubscribe send a message to: [email protected] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: [email protected] [email protected] <*> To unsubscribe from this group, send an email to: [email protected] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
