<?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" />
</circle>
<circle cx="80" cy="50" r="20">
<set attributeName="fill" to="#080" begin="2s" />
<animateColor attributeName="stroke" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="120" r="35" stroke="none">
<animate attributeName="fill" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="120" r="20">
<set attributeName="fill" to="#080" begin="2s" />
<animateColor attributeName="stroke" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="190" r="35" stroke="none">
<animate attributeName="fill" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="190" r="20">
<set attributeName="fill" to="#080" begin="2s" />
<animateColor attributeName="stroke" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="260" r="35" stroke="none">
<animate attributeName="fill" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="260" r="20">
<set attributeName="fill" to="#080" begin="2s" />
<animateColor attributeName="stroke" values="#080" begin="2s" />
</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" />
</circle>
<circle cx="80" cy="50" r="20">
<set attributeName="fill" to="#080" begin="2s" />
<animateColor attributeName="stroke" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="120" r="35" stroke="none">
<animate attributeName="fill" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="120" r="20">
<set attributeName="fill" to="#080" begin="2s" />
<animateColor attributeName="stroke" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="190" r="35" stroke="none">
<animate attributeName="fill" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="190" r="20">
<set attributeName="fill" to="#080" begin="2s" />
<animateColor attributeName="stroke" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="260" r="35" stroke="none">
<animate attributeName="fill" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="260" r="20">
<set attributeName="fill" to="#080" begin="2s" />
<animateColor attributeName="stroke" values="#080" begin="2s" />
</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" />
</circle>
<circle cx="80" cy="50" r="20">
<set attributeName="fill" to="#080" begin="2s" />
<animateColor attributeName="stroke" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="120" r="35" stroke="none">
<animate attributeName="fill" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="120" r="20">
<set attributeName="fill" to="#080" begin="2s" />
<animateColor attributeName="stroke" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="190" r="35" stroke="none">
<animate attributeName="fill" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="190" r="20">
<set attributeName="fill" to="#080" begin="2s" />
<animateColor attributeName="stroke" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="260" r="35" stroke="none">
<animate attributeName="fill" values="#080" begin="2s" />
</circle>
<circle cx="80" cy="260" r="20">
<set attributeName="fill" to="#080" begin="2s" />
<animateColor attributeName="stroke" values="#080" begin="2s" />
</circle>
</g>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
function loaded() {
document.documentElement.setCurrentTime(3);
if (window.testRunner)
testRunner.notifyDone();
}
</script>
</svg>
Codebase Browser
chromium