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
------------------------------------
-----
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/
