Great job! Declarative machinery is the best machinery! cheers David ----- Original Message ----- From: bruce To: svg-developers@yahoogroups.com Sent: Monday, November 08, 2010 12:06 AM Subject: [svg-developers] Re: fun but buggy -- gears
Here is another interesting animation in the same vein. It shows two sliding blocks, one moving horizontally and the other moving vertically. A rod is pined to the centers of the two blocks. When this is done the motion of the ends of the rod traces ellipses. The following works in IE/ASV, FF4, WebKit, and Opera but interestingly does not work in Batik. ---------------------------------------------------------- <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [ <!ENTITY dur "9s"> <!ENTITY hCirCW "M -25 0 A 25 25 0 1 1 25 0 A 25 25 0 1 1 -25 0"> <!ENTITY hCirCCW "M -25 0 A 25 25 0 1 0 25 0 A 25 25 0 1 0 -25 0"> <!ENTITY vCirCW "M -25 0 A 25 25 0 1 1 25 0 A 25 25 0 1 1 -25 0"> <!ENTITY vCirCCW "M 25 0 A 25 25 0 1 0 -25 0 A 25 25 0 1 0 25 0"> ]> <svg width="100%" height="100%" viewBox="-100 -125 200 250" xmlns="http://www.w3.org/2000/svg" > <rect x="-75" y="-75" width="150" height="150" fill="blue" /> <rect x="-75" y="-10" width="150" height="20" fill="gray" /> <rect x="-10" y="-75" width="20" height="150" fill="gray" /> <g> <animateMotion begin="0s" dur="&dur;" path="&hCirCW;" repeatCount="indefinite" /> <rect x="-20" y="-10" width="40" height="20" fill="green" > <animateMotion begin="0s" dur="&dur;" path="&hCirCCW;" repeatCount="indefinite" /> </rect> </g> <g> <animateMotion begin="0s" dur="&dur;" path="&vCirCW;" repeatCount="indefinite" /> <rect x="-10" y="-20" width="20" height="40" fill="green" > <animateMotion begin="0s" dur="&dur;" path="&vCirCCW;" repeatCount="indefinite" /> </rect> </g> <g> <animateMotion begin="0s" dur="&dur;" path="&hCirCW;" repeatCount="indefinite" /> <line x1="100" y1="0" x2="-50" y2="0" stroke-width="5" stroke="black" stroke-linecap="round" > <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="-360" begin="0s" dur="&dur;" repeatCount="indefinite" /> <animateMotion begin="0s" dur="&dur;" path="&hCirCCW;" repeatCount="indefinite" /> </line> </g> <g> <animateMotion begin="0s" dur="&dur;" path="&hCirCW;" repeatCount="indefinite" /> <circle x="0" y="0" r="1" fill="yellow" > <animateMotion begin="0s" dur="&dur;" path="&hCirCCW;" repeatCount="indefinite" /> </circle> </g> <g> <animateMotion begin="0s" dur="&dur;" path="&vCirCW;" repeatCount="indefinite" /> <circle x="0" y="0" r="1" fill="yellow" > <animateMotion begin="0s" dur="&dur;" path="&vCirCCW;" repeatCount="indefinite" /> </circle> </g> <ellipse cx="0" cy="0" rx="50" ry="100" fill="none" stroke="red" stroke-width="0.2" /> <ellipse cx="0" cy="0" rx="100" ry="50" fill="none" stroke="red" stroke-width="0.2" /> </svg> ---------------------------------------------------------- The really strange thing is an early version of this file. I thought it would be simple to replicate the code for one block and rotate it by 90 degrees to get the second block. It didn't work but rotating it 180 degrees did (in Chrome where I was testing). When I thought I was done, I checked in FF4 - same result. In Opera, I got radically different results. IE/ASV showed the same as Opera. I believe Opera and ASV have the behavior correctly as I coded it. Again Batik does not show the rod correctly but shows the blocks as ASV and Opera. Any idea why FF4 and WebKit show the same but different display? ---------------------------------------------------------- <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [ <!ENTITY dur "9s"> <!ENTITY largeCirCW "M -25 0 A 25 25 0 1 1 25 0 A 25 25 0 1 1 -25 0"> <!ENTITY largeCirCCW "M -25 0 A 25 25 0 1 0 25 0 A 25 25 0 1 0 -25 0"> ]> <svg width="100%" height="100%" viewBox="-100 -150 200 300" xmlns="http://www.w3.org/2000/svg" > <rect x="-75" y="-75" width="150" height="150" fill="blue" /> <rect x="-75" y="-10" width="150" height="20" fill="gray" /> <rect x="-10" y="-75" width="20" height="150" fill="gray" /> <g> <animateMotion begin="0s" dur="&dur;" path="&largeCirCW;" repeatCount="indefinite" /> <rect x="-20" y="-10" width="40" height="20" fill="green" > <animateMotion begin="0s" dur="&dur;" path="&largeCirCCW;" repeatCount="indefinite" /> </rect> </g> <g transform="rotate(180)"> <animateMotion begin="0s" dur="&dur;" path="&largeCirCW;" repeatCount="indefinite" /> <rect x="-10" y="-20" width="20" height="40" fill="green" > <animateMotion begin="0s" dur="&dur;" path="&largeCirCCW;" repeatCount="indefinite" /> </rect> </g> <g> <animateMotion begin="0s" dur="&dur;" path="&largeCirCW;" repeatCount="indefinite" /> <line x1="100" y1="0" x2="0" y2="0" stroke-width="5" stroke="black" stroke-linecap="round" > <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="-360" begin="0s" dur="&dur;" repeatCount="indefinite" /> <animateMotion begin="0s" dur="&dur;" path="&largeCirCCW;" repeatCount="indefinite" /> </line> </g> <g> <animateMotion begin="0s" dur="&dur;" path="&largeCirCW;" repeatCount="indefinite" /> <circle x="0" y="0" r="1" fill="yellow" > <animateMotion begin="0s" dur="&dur;" path="&largeCirCCW;" repeatCount="indefinite" /> </circle> </g> <g transform="rotate(180)"> <animateMotion begin="0s" dur="&dur;" path="&largeCirCW;" repeatCount="indefinite" /> <circle x="0" y="0" r="1" fill="yellow" > <animateMotion begin="0s" dur="&dur;" path="&largeCirCCW;" repeatCount="indefinite" /> </circle> </g> <ellipse cx="0" cy="0" rx="50" ry="100" fill="none" stroke="red" stroke-width="0.2" /> </svg> ---------------------------------------------------------- Bruce [Non-text portions of this message have been removed] ------------------------------------ ----- To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com -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: svg-developers-dig...@yahoogroups.com svg-developers-fullfeatu...@yahoogroups.com <*> To unsubscribe from this group, send an email to: svg-developers-unsubscr...@yahoogroups.com <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/