213 lines
8.0 KiB
XML
213 lines
8.0 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 500 350" onload="loaded()"
|
|
xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
|
|
<title>additive animateMotion: from-to, from-by, by and values</title>
|
|
<desc>
|
|
Compare from-to, from-by and by animateMotion with values animateMotion.
|
|
|
|
SMIL specifies, how from-to, from-by and by animations have to be converted into
|
|
values animation. Therefore they have to be the same as the related values animation.
|
|
The conversion is as follows:
|
|
|
|
from="a" to="b" ... values="a;b"
|
|
from="a" by="b" ... values="a;a+b"
|
|
by="a" ... values="0;a" additive="sum"
|
|
|
|
(by and from-by animations have only a meaning, if values can be added somehow.
|
|
'0' is used as a general symbol for the neutral element of addition for the related attribute,
|
|
this means 0 + a = a + 0 = a. And '0' is not equal to the symbol '1' as the basic unit of the
|
|
related attribute, '0' is a predecessor of '1' in the related attribute space. For animateMotion
|
|
the '0' is no motion or is related to a translation given in coordinates: 0,0.)
|
|
|
|
The from-to, from-by and by are applied to animateMotion of different blue stroked
|
|
paths and are compared with the related values animations including additive and
|
|
cumulative behaviour for underlying red paths. Additionally underlying dark red
|
|
paths simulate the same behaviour using always the defaults additive replace and
|
|
accumulate none. The blue paths cover all red paths. Therefore if something
|
|
red gets visible, the test is failed.
|
|
</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: from-to, from-by, by and values</dc:title>
|
|
<dc:creator>Dr. Olaf Hoffmann</dc:creator>
|
|
<dc:created>2007-06-13</dc:created>
|
|
<dc:language>en</dc:language>
|
|
<dc:description>
|
|
SVG animation test:
|
|
Compare from-to, from-by and by animateMotion with values animateMotion.
|
|
</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="fromto" d="M-15,-20L-20,20 20,20C-10,-10 30,-20 -15,-20Z"/>
|
|
<path id="fromby" d="M-20,-15L-20,15 20,20C20,0 -10,-20 -20,-15Z"/>
|
|
<path id="by" d="M-20,-20C100,80 40,-60 20,20Z"/>
|
|
|
|
</defs>
|
|
|
|
|
|
<rect x="0" y="0" width="500" height="350" fill="#fff" />
|
|
|
|
|
|
<g fill="none" stroke="#f00" stroke-width="10" stroke-linejoin="bevel">
|
|
|
|
|
|
<g>
|
|
<title>from-to animateMotion</title>
|
|
<use xlink:href="#fromto" x="40" y="80" stroke="#800">
|
|
<title>dark red values comparsion for from-to animations - if visible fail</title>
|
|
<animateMotion values="20,20" begin="2s" />
|
|
|
|
<animateMotion values="30,90;50,60" begin="4s" dur="5s"/>
|
|
<animateMotion values="60,130;80,100" begin="9s" dur="5s"/>
|
|
<animateMotion values="90,170;110,140" begin="14s" dur="5s"/>
|
|
|
|
<animateMotion values="10,70;30,40" begin="20s" dur="5s"/>
|
|
<animateMotion values="40,110;60,80" begin="25s" dur="5s"/>
|
|
<animateMotion values="70,150;90,120" begin="30s" dur="5s" fill="freeze"/>
|
|
</use>
|
|
|
|
<use xlink:href="#fromto" x="40" y="80" stroke="#f00">
|
|
<title>red values comparsion for from-to animations - if visible fail</title>
|
|
<animateMotion values="20,20" begin="2s" />
|
|
<animateMotion values="10,70;30,40" begin="4s"
|
|
dur="5s" repeatCount="3" additive="sum" accumulate="sum"/>
|
|
<animateMotion values="10,70;30,40" begin="20s"
|
|
dur="5s" repeatCount="3" additive="replace" accumulate="sum" fill="freeze"/>
|
|
</use>
|
|
|
|
|
|
<use xlink:href="#fromto" x="40" y="80" stroke="#88f">
|
|
<title>blue from-to animations</title>
|
|
<animateMotion values="20,20" begin="2s" />
|
|
<animateMotion from="10,70" to="30,40" begin="4s"
|
|
dur="5s" repeatCount="3" additive="sum" accumulate="sum"/>
|
|
<animateMotion from="10,70" to="30,40" begin="20s"
|
|
dur="5s" repeatCount="3" additive="replace" accumulate="sum" fill="freeze"/>
|
|
<set attributeName="stroke" to="#00f" begin="20s" />
|
|
</use>
|
|
|
|
</g>
|
|
|
|
|
|
|
|
<g>
|
|
<title>from-by animateMotion</title>
|
|
<use xlink:href="#fromby" x="160" y="80" stroke="#800">
|
|
<title>dark red values comparsion for from-by animations - if visible fail</title>
|
|
<animateMotion values="20,20" begin="2s" />
|
|
|
|
<animateMotion values="30,90;50,60" begin="4s" dur="5s"/>
|
|
<animateMotion values="60,130;80,100" begin="9s" dur="5s"/>
|
|
<animateMotion values="90,170;110,140" begin="14s" dur="5s"/>
|
|
|
|
<animateMotion values="10,70;30,40" begin="20s" dur="5s"/>
|
|
<animateMotion values="40,110;60,80" begin="25s" dur="5s"/>
|
|
<animateMotion values="70,150;90,120" begin="30s" dur="5s" fill="freeze"/>
|
|
</use>
|
|
|
|
<use xlink:href="#fromby" x="160" y="80" stroke="#f00">
|
|
<title>red values comparsion for from-by animations - if visible fail</title>
|
|
<animateMotion values="20,20" begin="2s" />
|
|
<animateMotion values="10,70;30,40" begin="4s"
|
|
dur="5s" repeatCount="3" additive="sum" accumulate="sum"/>
|
|
<animateMotion values="10,70;30,40" begin="20s"
|
|
dur="5s" repeatCount="3" additive="replace" accumulate="sum" fill="freeze"/>
|
|
</use>
|
|
|
|
|
|
<use xlink:href="#fromby" x="160" y="80" stroke="#88f">
|
|
<title>blue from-by animations</title>
|
|
<animateMotion values="20,20" begin="2s" />
|
|
<animateMotion from="10,70" by="20,-30" begin="4s"
|
|
dur="5s" repeatCount="3" additive="sum" accumulate="sum"/>
|
|
<animateMotion from="10,70" by="20,-30" begin="20s"
|
|
dur="5s" repeatCount="3" additive="replace" accumulate="sum" fill="freeze"/>
|
|
<set attributeName="stroke" to="#00f" begin="20s" />
|
|
</use>
|
|
|
|
</g>
|
|
|
|
|
|
<g>
|
|
<title>by animateMotion</title>
|
|
<use xlink:href="#by" x="300" y="200" stroke="#800">
|
|
<title>dark red values comparsion for by animations - if visible fail</title>
|
|
<animateMotion values="20,20" begin="2s" />
|
|
|
|
<animateMotion values="20,20;40,-10" begin="4s" dur="5s"/>
|
|
<animateMotion values="40,-10;60,-40" begin="9s" dur="5s"/>
|
|
<animateMotion values="60,-40;80,-70" begin="14s" dur="5s"/>
|
|
|
|
<animateMotion values="20,20;40,-10" begin="20s" dur="5s"/>
|
|
<animateMotion values="40,-10;60,-40" begin="25s" dur="5s"/>
|
|
<animateMotion values="60,-40;80,-70" begin="30s" dur="5s" fill="freeze"/>
|
|
</use>
|
|
|
|
<use xlink:href="#by" x="300" y="200" stroke="#f00">
|
|
<title>red values comparsion for by animations - if visible fail</title>
|
|
<animateMotion values="20,20" begin="2s" />
|
|
<animateMotion values="0,0;20,-30" begin="4s"
|
|
dur="5s" repeatCount="3" additive="sum" accumulate="sum"/>
|
|
<animateMotion values="0,0;20,-30" begin="20s"
|
|
dur="5s" repeatCount="3" additive="sum" accumulate="sum" fill="freeze"/>
|
|
</use>
|
|
|
|
|
|
<use xlink:href="#by" x="300" y="200" stroke="#88f">
|
|
<title>blue by animations</title>
|
|
<animateMotion values="20,20" begin="2s" />
|
|
<animateMotion by="20,-30" begin="4s"
|
|
dur="5s" repeatCount="3" additive="sum" accumulate="sum"/>
|
|
<animateMotion by="20,-30" begin="20s"
|
|
dur="5s" repeatCount="3" additive="replace" accumulate="sum" fill="freeze"/>
|
|
|
|
<set attributeName="stroke" to="#00f" begin="20s" />
|
|
</use>
|
|
|
|
</g>
|
|
</g>
|
|
|
|
<script>
|
|
if (window.testRunner)
|
|
testRunner.waitUntilDone();
|
|
|
|
function loaded() {
|
|
document.documentElement.setCurrentTime(36);
|
|
|
|
if (window.testRunner)
|
|
testRunner.notifyDone();
|
|
}
|
|
</script>
|
|
</svg>
|