2012-04-28 11:03:11 +00:00
|
|
|
<?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 300" onload="loaded()"
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny"
|
|
|
|
|
xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
|
|
|
|
|
|
|
|
<title>Compare from-to, from-by and by animateColor with values animateColor and animate</title>
|
|
|
|
|
<desc>
|
|
|
|
|
SMIL specifies, how from-to, from-by and by animations have to be converted into
|
|
|
|
|
values animations. Therefore they have to be the same as the related values animation.
|
|
|
|
|
Additionally set animations can be replaced by values animations too.
|
|
|
|
|
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"
|
|
|
|
|
set to="a" ... values="a" additive="replace" accumulate="none"
|
|
|
|
|
|
|
|
|
|
(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. In the color space
|
|
|
|
|
0 is represented by black, #000, #000000, rgb(0,0,0) etc. Addition is performed for each
|
|
|
|
|
of the three components of the color vector separately.)
|
|
|
|
|
|
|
|
|
|
The from-to, from-by and by animations applied to fill properties
|
|
|
|
|
of circles are compared with the related values animations including additive and
|
|
|
|
|
cumulative behaviour for the stroke of the same circles. Additionally underlying
|
|
|
|
|
filled larger circles simulate the same behaviour using always the defaults additive replace and
|
|
|
|
|
accumulate none. The fill of the background circle and stroke and fill of the smaller
|
|
|
|
|
test circle centered in it are always exactly the same. Therefore if
|
|
|
|
|
rings in each centered circle system with different color get visible, the test is failed.
|
|
|
|
|
But each separated circle system representing one of 12 subtests can have another color.
|
|
|
|
|
</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>Compare from-to, from-by and by animateColor with values animateColor and animate</dc:title>
|
|
|
|
|
<dc:creator>Dr. Olaf Hoffmann</dc:creator>
|
|
|
|
|
<dc:created>2007-06-16</dc:created>
|
|
|
|
|
<dc:language>en</dc:language>
|
|
|
|
|
<dc:description>
|
|
|
|
|
SVG animation test:
|
|
|
|
|
Compare from-to, from-by and by animateColor with values animateColor and animate
|
|
|
|
|
</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>
|
|
|
|
|
<rect x="0" y="0" width="500" height="300" fill="#fff" />
|
|
|
|
|
|
|
|
|
|
<g fill="#ff0" stroke="#ff0" stroke-width="10" transform="translate(-30)">
|
|
|
|
|
<title>from-to animation for fill compared with values for stroke</title>
|
|
|
|
|
<circle cx="80" cy="50" r="35" stroke="none">
|
|
|
|
|
<animate attributeName="fill" values="#080" begin="2s" />
|
|
|
|
|
<animate attributeName="fill" values="#882;#084" begin="4s" dur="5s" />
|
|
|
|
|
<animate attributeName="fill" values="#886;#088" begin="9s" dur="5s" />
|
|
|
|
|
<animate attributeName="fill" values="#88a;#08c" begin="14s" dur="5s" fill="freeze"/>
|
|
|
|
|
</circle>
|
|
|
|
|
<circle cx="80" cy="50" r="20">
|
|
|
|
|
<set attributeName="fill" to="#080" begin="2s" />
|
|
|
|
|
<animateColor attributeName="fill" from="#802" to="#004" begin="4s"
|
|
|
|
|
dur="5s" repeatCount="3" additive="sum" accumulate="sum" fill="freeze"/>
|
|
|
|
|
|
|
|
|
|
<animateColor attributeName="stroke" values="#080" begin="2s" />
|
|
|
|
|
<animateColor attributeName="stroke" values="#802;#004" begin="4s"
|
|
|
|
|
dur="5s" repeatCount="3" additive="sum" accumulate="sum" fill="freeze"/>
|
|
|
|
|
</circle>
|
|
|
|
|
|
|
|
|
|
<circle cx="80" cy="120" r="35" stroke="none">
|
|
|
|
|
<animate attributeName="fill" values="#080" begin="2s" />
|
|
|
|
|
<animate attributeName="fill" values="#602;#004" begin="4s" dur="5s" />
|
|
|
|
|
<animate attributeName="fill" values="#606;#008" begin="9s" dur="5s" />
|
|
|
|
|
<animate attributeName="fill" values="#60a;#00c" begin="14s" dur="5s" fill="freeze"/>
|
|
|
|
|
</circle>
|
|
|
|
|
<circle cx="80" cy="120" r="20">
|
|
|
|
|
<set attributeName="fill" to="#080" begin="2s" />
|
|
|
|
|
<animateColor attributeName="fill" from="#602" to="#004" begin="4s"
|
|
|
|
|
dur="5s" repeatCount="3" additive="replace" accumulate="sum" fill="freeze"/>
|
|
|
|
|
|
|
|
|
|
<animateColor attributeName="stroke" values="#080" begin="2s" />
|
|
|
|
|
<animateColor attributeName="stroke" values="#602;#004" begin="4s"
|
|
|
|
|
dur="5s" repeatCount="3" additive="replace" accumulate="sum" fill="freeze"/>
|
|
|
|
|
</circle>
|
|
|
|
|
|
|
|
|
|
<circle cx="80" cy="190" r="35" stroke="none">
|
|
|
|
|
<animate attributeName="fill" values="#080" begin="2s" />
|
|
|
|
|
<animate attributeName="fill" values="#684;#088" begin="4s" dur="5s" />
|
|
|
|
|
<animate attributeName="fill" values="#684;#088" begin="9s" dur="5s" />
|
|
|
|
|
<animate attributeName="fill" values="#684;#088" begin="14s" dur="5s" fill="freeze"/>
|
|
|
|
|
</circle>
|
|
|
|
|
<circle cx="80" cy="190" r="20">
|
|
|
|
|
<set attributeName="fill" to="#080" begin="2s" />
|
|
|
|
|
<animateColor attributeName="fill" from="#604" to="#008" begin="4s"
|
|
|
|
|
dur="5s" repeatCount="3" additive="sum" accumulate="none" fill="freeze"/>
|
|
|
|
|
|
|
|
|
|
<animateColor attributeName="stroke" values="#080" begin="2s" />
|
|
|
|
|
<animateColor attributeName="stroke" values="#604;#008" begin="4s"
|
|
|
|
|
dur="5s" repeatCount="3" additive="sum" accumulate="none" fill="freeze"/>
|
|
|
|
|
</circle>
|
|
|
|
|
|
|
|
|
|
<circle cx="80" cy="260" r="35" stroke="none">
|
|
|
|
|
<animate attributeName="fill" values="#080" begin="2s" />
|
|
|
|
|
<animate attributeName="fill" values="#604;#008" begin="4s" dur="5s" />
|
|
|
|
|
<animate attributeName="fill" values="#604;#008" begin="9s" dur="5s" />
|
|
|
|
|
<animate attributeName="fill" values="#604;#008" begin="14s" dur="5s" fill="freeze"/>
|
|
|
|
|
</circle>
|
|
|
|
|
<circle cx="80" cy="260" r="20">
|
|
|
|
|
<set attributeName="fill" to="#080" begin="2s" />
|
|
|
|
|
<animateColor attributeName="fill" from="#604" to="#008" begin="4s"
|
|
|
|
|
dur="5s" repeatCount="3" additive="replace" accumulate="none" fill="freeze"/>
|
|
|
|
|
|
|
|
|
|
<animateColor attributeName="stroke" values="#080" begin="2s" />
|
|
|
|
|
<animateColor attributeName="stroke" values="#604;#008" begin="4s"
|
|
|
|
|
dur="5s" repeatCount="3" additive="replace" accumulate="none" fill="freeze"/>
|
|
|
|
|
</circle>
|
|
|
|
|
</g>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<g fill="#ff0" stroke="#ff0" stroke-width="10" transform="translate(170)">
|
|
|
|
|
<title>from-by animation for fill compared with values for stroke</title>
|
|
|
|
|
<circle cx="80" cy="50" r="35" stroke="none">
|
|
|
|
|
<animate attributeName="fill" values="#080" begin="2s" />
|
|
|
|
|
<animate attributeName="fill" values="#082;#085" begin="4s" dur="5s" />
|
|
|
|
|
<animate attributeName="fill" values="#087;#08a" begin="9s" dur="5s" />
|
|
|
|
|
<animate attributeName="fill" values="#08c;#08f" begin="14s" dur="5s" fill="freeze"/>
|
|
|
|
|
</circle>
|
|
|
|
|
<circle cx="80" cy="50" r="20">
|
|
|
|
|
<set attributeName="fill" to="#080" begin="2s" />
|
|
|
|
|
<animateColor attributeName="fill" from="#002" by="#003" begin="4s"
|
|
|
|
|
dur="5s" repeatCount="3" additive="sum" accumulate="sum" fill="freeze"/>
|
|
|
|
|
|
|
|
|
|
<animateColor attributeName="stroke" values="#080" begin="2s" />
|
|
|
|
|
<animateColor attributeName="stroke" values="#002;#005" begin="4s"
|
|
|
|
|
dur="5s" repeatCount="3" additive="sum" accumulate="sum" fill="freeze"/>
|
|
|
|
|
</circle>
|
|
|
|
|
|
|
|
|
|
<circle cx="80" cy="120" r="35" stroke="none">
|
|
|
|
|
<animate attributeName="fill" values="#080" begin="2s" />
|
|
|
|
|
<animate attributeName="fill" values="#002;#005" begin="4s" dur="5s" />
|
|
|
|
|
<animate attributeName="fill" values="#007;#00a" begin="9s" dur="5s" />
|
|
|
|
|
<animate attributeName="fill" values="#00c;#00f" begin="14s" dur="5s" fill="freeze"/>
|
|
|
|
|
</circle>
|
|
|
|
|
<circle cx="80" cy="120" r="20">
|
|
|
|
|
<set attributeName="fill" to="#080" begin="2s" />
|
|
|
|
|
<animateColor attributeName="fill" from="#002" by="#003" begin="4s"
|
|
|
|
|
dur="5s" repeatCount="3" additive="replace" accumulate="sum" fill="freeze"/>
|
|
|
|
|
|
|
|
|
|
<animateColor attributeName="stroke" values="#080" begin="2s" />
|
|
|
|
|
<animateColor attributeName="stroke" values="#002;#005" begin="4s"
|
|
|
|
|
dur="5s" repeatCount="3" additive="replace" accumulate="sum" fill="freeze"/>
|
|
|
|
|
</circle>
|
|
|
|
|
|
|
|
|
|
<circle cx="80" cy="190" r="35" stroke="none">
|
|
|
|
|
<animate attributeName="fill" values="#080" begin="2s" />
|
|
|
|
|
<animate attributeName="fill" values="#684;#689" begin="4s" dur="5s" />
|
|
|
|
|
<animate attributeName="fill" values="#684;#689" begin="9s" dur="5s" />
|
|
|
|
|
<animate attributeName="fill" values="#684;#689" begin="14s" dur="5s" fill="freeze"/>
|
|
|
|
|
</circle>
|
|
|
|
|
<circle cx="80" cy="190" r="20">
|
|
|
|
|
<set attributeName="fill" to="#080" begin="2s" />
|
|
|
|
|
<animateColor attributeName="fill" from="#604" by="#005" begin="4s"
|
|
|
|
|
dur="5s" repeatCount="3" additive="sum" accumulate="none" fill="freeze"/>
|
|
|
|
|
|
|
|
|
|
<animateColor attributeName="stroke" values="#080" begin="2s" />
|
|
|
|
|
<animateColor attributeName="stroke" values="#604;#609" begin="4s"
|
|
|
|
|
dur="5s" repeatCount="3" additive="sum" accumulate="none" fill="freeze"/>
|
|
|
|
|
</circle>
|
|
|
|
|
|
|
|
|
|
<circle cx="80" cy="260" r="35" stroke="none">
|
|
|
|
|
<animate attributeName="fill" values="#080" begin="2s" />
|
|
|
|
|
<animate attributeName="fill" values="#604;#609" begin="4s" dur="5s" />
|
|
|
|
|
<animate attributeName="fill" values="#604;#609" begin="9s" dur="5s" />
|
|
|
|
|
<animate attributeName="fill" values="#604;#609" begin="14s" dur="5s" fill="freeze"/>
|
|
|
|
|
</circle>
|
|
|
|
|
<circle cx="80" cy="260" r="20">
|
|
|
|
|
<set attributeName="fill" to="#080" begin="2s" />
|
|
|
|
|
<animateColor attributeName="fill" from="#604" by="#005" begin="4s"
|
|
|
|
|
dur="5s" repeatCount="3" additive="replace" accumulate="none" fill="freeze"/>
|
|
|
|
|
|
|
|
|
|
<animateColor attributeName="stroke" values="#080" begin="2s" />
|
|
|
|
|
<animateColor attributeName="stroke" values="#604;#609" begin="4s"
|
|
|
|
|
dur="5s" repeatCount="3" additive="replace" accumulate="none" fill="freeze"/>
|
|
|
|
|
</circle>
|
|
|
|
|
</g>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<g fill="#ff0" stroke="#ff0" stroke-width="10" transform="translate(370)">
|
|
|
|
|
<title>by animation for fill compared with values for stroke</title>
|
|
|
|
|
<circle cx="80" cy="50" r="35" stroke="none">
|
|
|
|
|
<animate attributeName="fill" values="#080" begin="2s" />
|
|
|
|
|
<animate attributeName="fill" values="#080;#084" begin="4s" dur="5s" />
|
|
|
|
|
<animate attributeName="fill" values="#084;#088" begin="9s" dur="5s" />
|
|
|
|
|
<animate attributeName="fill" values="#088;#08c" begin="14s" dur="5s" fill="freeze"/>
|
|
|
|
|
</circle>
|
|
|
|
|
<circle cx="80" cy="50" r="20">
|
|
|
|
|
<set attributeName="fill" to="#080" begin="2s" />
|
|
|
|
|
<animateColor attributeName="fill" by="#004" begin="4s"
|
|
|
|
|
dur="5s" repeatCount="3" additive="sum" accumulate="sum" fill="freeze"/>
|
|
|
|
|
|
|
|
|
|
<animateColor attributeName="stroke" values="#080" begin="2s" />
|
|
|
|
|
<animateColor attributeName="stroke" values="#000;#004" begin="4s"
|
|
|
|
|
dur="5s" repeatCount="3" additive="sum" accumulate="sum" fill="freeze" />
|
|
|
|
|
</circle>
|
|
|
|
|
|
|
|
|
|
<circle cx="80" cy="120" r="35" stroke="none">
|
|
|
|
|
<animate attributeName="fill" values="#080" begin="2s" />
|
|
|
|
|
<animate attributeName="fill" values="#080;#084" begin="4s" dur="5s" />
|
|
|
|
|
<animate attributeName="fill" values="#084;#088" begin="9s" dur="5s" />
|
|
|
|
|
<animate attributeName="fill" values="#088;#08c" begin="14s" dur="5s" fill="freeze"/>
|
|
|
|
|
</circle>
|
|
|
|
|
<circle cx="80" cy="120" r="20">
|
|
|
|
|
<set attributeName="fill" to="#080" begin="2s" />
|
|
|
|
|
<animateColor attributeName="fill" by="#004" begin="4s"
|
|
|
|
|
dur="5s" repeatCount="3" additive="replace" accumulate="sum" fill="freeze"/>
|
|
|
|
|
|
|
|
|
|
<animateColor attributeName="stroke" values="#080" begin="2s" />
|
|
|
|
|
<animateColor attributeName="stroke" values="#000;#004" begin="4s"
|
|
|
|
|
dur="5s" repeatCount="3" additive="sum" accumulate="sum" fill="freeze"/>
|
|
|
|
|
</circle>
|
|
|
|
|
|
|
|
|
|
<circle cx="80" cy="190" r="35" stroke="none">
|
|
|
|
|
<animate attributeName="fill" values="#080" begin="2s" />
|
|
|
|
|
<animate attributeName="fill" values="#080;#088" begin="4s" dur="5s" />
|
|
|
|
|
<animate attributeName="fill" values="#080;#088" begin="9s" dur="5s" />
|
|
|
|
|
<animate attributeName="fill" values="#080;#088" begin="14s" dur="5s" fill="freeze"/>
|
|
|
|
|
</circle>
|
|
|
|
|
<circle cx="80" cy="190" r="20">
|
|
|
|
|
<set attributeName="fill" to="#080" begin="2s" />
|
|
|
|
|
<animateColor attributeName="fill" by="#008" begin="4s"
|
|
|
|
|
dur="5s" repeatCount="3" additive="sum" accumulate="none" fill="freeze"/>
|
|
|
|
|
|
|
|
|
|
<animateColor attributeName="stroke" values="#080" begin="2s" />
|
|
|
|
|
<animateColor attributeName="stroke" values="#000;#008" begin="4s"
|
|
|
|
|
dur="5s" repeatCount="3" additive="sum" accumulate="none" fill="freeze"/>
|
|
|
|
|
</circle>
|
|
|
|
|
|
|
|
|
|
<circle cx="80" cy="260" r="35" stroke="none">
|
|
|
|
|
<animate attributeName="fill" values="#080" begin="2s" />
|
|
|
|
|
<animate attributeName="fill" values="#080;#088" begin="4s" dur="5s" />
|
|
|
|
|
<animate attributeName="fill" values="#080;#088" begin="9s" dur="5s" />
|
|
|
|
|
<animate attributeName="fill" values="#080;#088" begin="14s" dur="5s" fill="freeze"/>
|
|
|
|
|
</circle>
|
|
|
|
|
<circle cx="80" cy="260" r="20">
|
|
|
|
|
<set attributeName="fill" to="#080" begin="2s" />
|
|
|
|
|
<animateColor attributeName="fill" by="#008" begin="4s"
|
|
|
|
|
dur="5s" repeatCount="3" additive="replace" accumulate="none" fill="freeze"/>
|
|
|
|
|
|
|
|
|
|
<animateColor attributeName="stroke" values="#080" begin="2s" />
|
|
|
|
|
<animateColor attributeName="stroke" values="#000;#008" begin="4s"
|
|
|
|
|
dur="5s" repeatCount="3" additive="sum" accumulate="none" fill="freeze"/>
|
|
|
|
|
</circle>
|
|
|
|
|
</g>
|
|
|
|
|
|
|
|
|
|
<script>
|
2012-08-01 23:05:16 +00:00
|
|
|
if (window.testRunner)
|
|
|
|
|
testRunner.waitUntilDone();
|
2012-04-28 11:03:11 +00:00
|
|
|
|
|
|
|
|
function loaded() {
|
|
|
|
|
document.documentElement.setCurrentTime(20);
|
|
|
|
|
|
2012-08-01 23:05:16 +00:00
|
|
|
if (window.testRunner)
|
|
|
|
|
testRunner.notifyDone();
|
2012-04-28 11:03:11 +00:00
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</svg>
|
