Hi, I am trying to control the timeline of a SVG SMIL animation with javascript and kind of confused about the effect of changing the begin time by using the API setAttributeNS(null,begin,newtimeValue)
Following is the code which I am running, Basically I want to control the time from which the animation is seen, something like providing a input text box where the user can type a number and the animation is shown from that time like jumping to a particular time in the animation and even coming back in time. In the example code mentioned below, INitially the animation starts from the 5th second as begin time is made -5 and then upon a click I am resetting the begin time to a different value. This is where my confusion is as to how the animation handles the effect of change in the begin time. What is observed is that if I change the value of begin to something less than -5 ( like -6, -7 ... ) then there is no effect but if I change it to some thing greater like -4 or -3 or -2 there is atleast some effect but even that I do not understand Basically can we play with time line to restart animations from in between, jump to any time, either backwards or forward <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" " http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd";> <svg baseProfile="tiny" version="1.1" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";> <script type="text/javascript" > window.onload=function() { ctrlr_e = document.getElementById("raks"); function restart_anim(ev) { ctrlr_e.setAttributeNS(null,"begin","-7"); } document.addEventListener("click",restart_anim,false); } </script> <g> <g display="inherit" id="layer1"> <animateMotion begin="raks.begin" dur="20" path="M10,10 L1250,600" /> <rect x="10" y="10" width="100" height="100" fill="red"/> </g> <animate attributeName="display" begin="-5" dur="20" keyTimes="0;1" calcMode="discrete" values="inherit:inherit" id="raks" /> </g> </svg> [Non-text portions of this message have been removed] ------------------------------------ ----- 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/
