124 lines
3.3 KiB
XML
124 lines
3.3 KiB
XML
<?xml version="1.0" encoding="iso-8859-1" ?>
|
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG Tiny 1.1//EN"
|
|
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
|
|
<svg viewBox="0 0 1000 1000"
|
|
xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink" onload="loaded()">
|
|
|
|
<title>additive animateMotion</title>
|
|
<desc>
|
|
A circles is moved along some paths
|
|
(two of them indicated in gray) with
|
|
a duration of 30s using additive animateMotion.
|
|
The superposition is no motion.
|
|
The circle is positioned always at the bottom right.
|
|
The colour of the circle switches from blue to gray after
|
|
the animation is finished.
|
|
If the red center of the circle becomes visible, an error is
|
|
occured.
|
|
</desc>
|
|
<metadata>
|
|
<rdf:RDF
|
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
|
xmlns:cc="http://creativecommons.org/ns#" >
|
|
<rdf:Description rdf:about="">
|
|
<dc:title>additive animateMotion</dc:title>
|
|
<dc:creator>Dr. Olaf Hoffmann</dc:creator>
|
|
<dc:created>2007-05-06</dc:created>
|
|
<dc:language>en</dc:language>
|
|
<dc:description>
|
|
SVG animation test:
|
|
Additive animateMotion resulting in no motion.
|
|
</dc:description>
|
|
<dc:relation>http://hoffmann.bplaced.net/svgtest/</dc:relation>
|
|
<dc:rights>
|
|
<cc:License
|
|
rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
|
|
<cc:permits
|
|
rdf:resource="http://creativecommons.org/ns#Reproduction" />
|
|
<cc:permits
|
|
rdf:resource="http://creativecommons.org/ns#Distribution" />
|
|
<cc:requires
|
|
rdf:resource="http://creativecommons.org/ns#Notice" />
|
|
<cc:requires
|
|
rdf:resource="http://creativecommons.org/ns#Attribution" />
|
|
<cc:permits
|
|
rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
|
|
<cc:requires
|
|
rdf:resource="http://creativecommons.org/ns#ShareAlike" />
|
|
</cc:License>
|
|
</dc:rights>
|
|
</rdf:Description>
|
|
</rdf:RDF>
|
|
</metadata>
|
|
<defs>
|
|
<path id="p1"
|
|
d="M100,100C-300,200 2000,700 100,800" />
|
|
<path id="p2"
|
|
d="M800,800C1200,700 -1100,200 800,100" />
|
|
</defs>
|
|
|
|
<g id="am1">
|
|
<circle id="c1" cx="0" cy="0" r="40"
|
|
stroke="#00f" stroke-width="60"
|
|
fill="#f00">
|
|
<set attributeName="stroke"
|
|
to="#888"
|
|
begin="30s" />
|
|
</circle>
|
|
|
|
<animateMotion
|
|
dur="30s"
|
|
fill="freeze"
|
|
path="M0,0Q-10,-10 -800,-800" />
|
|
<animateMotion
|
|
dur="30s"
|
|
fill="freeze"
|
|
additive="sum">
|
|
<mpath xlink:href="#p1" />
|
|
</animateMotion>
|
|
<animateMotion
|
|
dur="30s"
|
|
fill="freeze"
|
|
additive="sum"
|
|
values="0,0;700,700;800,800" />
|
|
<animateMotion
|
|
dur="30s"
|
|
fill="freeze"
|
|
additive="sum"
|
|
from="0,-800"
|
|
to="-800,0" />
|
|
<animateMotion
|
|
dur="30s"
|
|
fill="freeze"
|
|
additive="sum">
|
|
<mpath xlink:href="#p2" />
|
|
</animateMotion>
|
|
<animateMotion
|
|
dur="30s"
|
|
fill="freeze"
|
|
additive="sum"
|
|
path="M0,800C1,799 790,10 800,0" />
|
|
|
|
</g>
|
|
|
|
<g fill="none" stroke-width="5"
|
|
stroke="#888" stroke-linecap="round" stroke-linejoin="round">
|
|
<use xlink:href="#p1" />
|
|
<use xlink:href="#p2" />
|
|
</g>
|
|
<circle id="c2" cx="900" cy="900" r="10" fill="#888" />
|
|
|
|
<script>
|
|
if (window.testRunner)
|
|
testRunner.waitUntilDone();
|
|
|
|
function loaded() {
|
|
document.documentElement.setCurrentTime(31);
|
|
if (window.testRunner)
|
|
testRunner.notifyDone();
|
|
}
|
|
</script>
|
|
</svg>
|