Here's an approach I cobbled together that uses a bit more JavaScript, but considerably less SVG.
It uses a stroke-dasharray to set the tickmarks around the clock and clones and then appends the animation elements. It seems to work fine in IE and Opera, though I haven't had a chance to see it start up in the pm yet and am not completely convinced it'll do that properly. It would generalize nicely to clocks that have day, week and month hands as well, (though we'd probably want to append some <rect> children for those) and should we decide to measure time in metric (what's this Babylonian 60,60,2,12,365 thing all about anyway?) instead, I think, we'd just change the values of the arrays. It won't work in SVG Tiny with all the script, I suppose, but then I don't carry wristwatches or cellphones or other gadgets around. Time and I have never gotten along very well together. <svg xmlns="http://www.w3.org/2000/svg"; width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"; onload="start()"> <script><![CDATA[ Root=document.documentElement xmlns="http://www.w3.org/2000/svg"; function start(){ var R=document.getElementById("R").getBBox() var center=R.width/2+","+R.height/2 var AT=document.getElementById("AT") var D=new Date() h=D.getHours() m=D.getMinutes() s=D.getSeconds() var d=new Array(h*30+m/2,m*6+s/10,s*6) var Times=new Array(43200,3600,60) LS=document.getElementsByTagName("rect") for (i=1;i<LS.length;i++){ CL=AT.cloneNode("false") CL.setAttributeNS(null, "from", d[i-1]+","+center) CL.setAttributeNS(null, "to", (d[i-1]+360)+","+center) CL.setAttributeNS(null, "dur", Times[i-1]+"s") LS.item(i).appendChild(CL) } } //]]> </script> <defs> <animateTransform id="AT" attributeName="transform" type="rotate" begin="0s" dur="60s" repeatCount="indefinite" /> </defs> <rect x="0" y="0" id="R" height="100%" width="100%" fill="#F0e0b0"/> <circle id="Q" cx="50%" cy="50%" r="30%" fill="white" stroke="blue" stroke-width="18" stroke-dasharray="1%,2.91%,0.03%,2.91%,0.03%,2.91%,0.03%,2.91%,0.03%,2.91%"/> <rect x="49.6%" y="30%" width="0.8%" height="20%" stroke="blue" stroke-width="2"/> <rect x="49.75%" y="20%" width="0.5%" height="30%" stroke="blue" stroke-width="1.5"/> <rect x="49.9%" y="13%" width="0.2%" height="37%" fill="red" /> <circle id="W" cx="50%" cy="50%" r="1.4%" fill="blue" stroke="black" stroke-width="2"/> </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: 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/
