Great job! Declarative machinery is the best machinery!
cheers
David
----- Original Message -----
From: bruce
To: [email protected]
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: [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/
