On Sun, 09 Dec 2007 21:22:01 +0100, Rémi <[EMAIL PROTECTED]> wrote: > Le Sun, 09 Dec 2007 13:08:46 -0600, G. Wade Johnson a écrit : > >> On Sun, 09 Dec 2007 17:38:54 -0000 >> "boulle_remi" <[EMAIL PROTECTED]> wrote: >> >>> Hi, >>> >>> I wrote a simple SVG countdown. You can read it above. It is okay from >>> 5s to 0s, but the higher I start, the longer the code is... >>> Is there a way, in SVG, to do that much more shorter than defining a >>> text element for each number ? >>> Thanks. >>> Rémi >> >> If you are willing to use scripting, you can just update the value of a >> single text element every second instead of displaying multiple text >> elements in succession. > > I did that first but the time in javascript doesn't seem to be exactly > the same than the one in the SVG document (rendering engine of Opera).
Right, there is nothing that says that those should be synchronized, so you shouldn't count on that. However, it's possible to trigger scripts based on animation events like this if you want to be in sync: <svg xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; viewBox="0 0 600 600"> <script> var i = 0; var texts = new Array("text 2", "text 3", "text 4", "text 5"); </script> <defs> <animate id="dummy" attributeName="fill" to="black" dur="1s" repeatCount="5" onrepeat="document.getElementById('text').firstChild.data=texts[i++];"/> </defs> <text id="text" style="text-anchor:middle; font-size: 30px; fill: black" x="50%" y="50%">text 1</text> </svg> Works in Batik 1.7, Opera 9.x, ASV3. > In my case, I had, next to the countdown from 5s to 0s, a rectangle whose > width was moving from 0 to 100 within 5s. Here is the code : > > <rect x="0" y="100" width="10" height="20" stroke="black" fill="red"> > <animate attributeName='width' begin='0s' dur='5s' from='0' to='500' > fill="freeze"/> > </rect> > and 5 s in javascript are not 5s in SVG document... When the rectangle > freezed, the javacsript countdown wasn't at 0. > > It is the reason why I was wondering if there were a possibility in SVG > to have a kind of repetition of an animation with an incrementation. Well, you can use accumulate="sum" to add to have an animation add to the previous value as it repeats, but it only addresses the cases where attributes are additive. See http://www.w3.org/TR/SVG11/animate.html#AdditionAttributes for more information, there are a few examples there. Cheers /Erik -- Erik Dahlstrom, Core Technology Developer, Opera Software http://my.opera.com/macdev_ed ----- 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: mailto:[EMAIL PROTECTED] mailto:[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/
