<
svg id="svg-root"
width="450"
height="450" xmlns="
http://www.w3.org/2000/svg" xmlns:xlink="
http://www.w3.org/1999/xlink" >
<
title id="test-title">animation-values-BE-06</
title>
<
desc id="test-desc">Test possible values for 'calcMode'</
desc>
<
g id="test-body-content">
<
text style="
font-family:Helvetica;
font-size:14;
text-anchor:middle;"
x="225"
y="25">Test possible values for 'calcMode'</
text>
<
g xml:space="preserve"
style="
font-family:Helvetica;
font-size:13.5;
text-anchor:end;
stroke-width:3;">
<
g transform="translate(75,60)">
<
text x="-10"
y="104">0-2 sec. </
text>
<
line x1="-10"
y1="100"
x2="20"
y2="100"
style="
fill:none;
stroke:#880000;"/>
<
text x="-10"
y="89">2-4 sec. </
text>
<
line x1="-10"
y1="85"
x2="20"
y2="85"
style="
fill:none;
stroke:#880000;"/>
<
text x="-10"
y="64">4-6 sec. </
text>
<
line x1="-10"
y1="60"
x2="20"
y2="60"
style="
fill:none;
stroke:#880000;"/>
<
text x="-10"
y="14">6+ sec. </
text>
<
line x1="-10"
y1="10"
x2="20"
y2="10"
style="
fill:none;
stroke:#880000;"/>
<
rect x="0"
y="0"
width="20"
height="100"
style="
fill:#FFAA44;
stroke:#FF00FF;
stroke-width:4;">
<
animate attributeName="height"
calcMode="discrete"
values="100;85;60;10"
begin="0s"
dur="8s"
fill="freeze"/>
</
rect>
<
text x="-15"
y="125"
xml:space="default"
style="
text-anchor:middle;
fill:red;
font-size:12;">calcMode='discrete'</
text>
</
g>
<
g transform="translate(185,60)">
<
text x="-10"
y="104">at 0 sec. </
text>
<
line x1="-10"
y1="100"
x2="20"
y2="100"
style="
fill:none;
stroke:#880000;"/>
<
text x="-10"
y="89">at 3 sec. </
text>
<
line x1="-10"
y1="85"
x2="20"
y2="85"
style="
fill:none;
stroke:#880000;"/>
<
text x="-10"
y="64">at 6 sec. </
text>
<
line x1="-10"
y1="60"
x2="20"
y2="60"
style="
fill:none;
stroke:#880000;"/>
<
text x="-10"
y="14">9+ sec. </
text>
<
line x1="-10"
y1="10"
x2="20"
y2="10"
style="
fill:none;
stroke:#880000;"/>
<
rect x="0"
y="0"
width="20"
height="100"
style="
fill:#FFAA44;
stroke:#FF00FF;
stroke-width:4;">
<
animate attributeName="height"
values="100;85;60;10"
begin="0s"
dur="9s"
fill="freeze"/>
</
rect>
<
text x="-15"
y="125"
xml:space="default"
style="
text-anchor:middle;
fill:red;
font-size:12;">calcMode='linear'</
text>
</
g>
<
g transform="translate(295,60)">
<
text x="-10"
y="104">at 0 sec. </
text>
<
line x1="-10"
y1="100"
x2="20"
y2="100"
style="
fill:none;
stroke:#880000;"/>
<
text x="-10"
y="89">at 1.5 sec. </
text>
<
line x1="-10"
y1="85"
x2="20"
y2="85"
style="
fill:none;
stroke:#880000;"/>
<
text x="-10"
y="64">at 4 sec. </
text>
<
line x1="-10"
y1="60"
x2="20"
y2="60"
style="
fill:none;
stroke:#880000;"/>
<
text x="-10"
y="14">9+ sec. </
text>
<
line x1="-10"
y1="10"
x2="20"
y2="10"
style="
fill:none;
stroke:#880000;"/>
<
rect x="0"
y="0"
width="20"
height="100"
style="
fill:#FFAA44;
stroke:#FF00FF;
stroke-width:4;">
<
animate attributeName="height"
calcMode="paced"
values="100;85;60;10"
begin="0s"
dur="9s"
fill="freeze"/>
</
rect>
<
text x="-15"
y="125"
xml:space="default"
style="
text-anchor:middle;
fill:red;
font-size:12;">calcMode='paced'</
text>
</
g>
<
g transform="translate(405,60)">
<
text x="-10"
y="104">at 0 sec. </
text>
<
line x1="-10"
y1="100"
x2="20"
y2="100"
style="
fill:none;
stroke:#880000;"/>
<
text x="-10"
y="89">at 3 sec. </
text>
<
line x1="-10"
y1="85"
x2="20"
y2="85"
style="
fill:none;
stroke:#880000;"/>
<
text x="-10"
y="64">at 6 sec. </
text>
<
line x1="-10"
y1="60"
x2="20"
y2="60"
style="
fill:none;
stroke:#880000;"/>
<
text x="-10"
y="14">9+ sec. </
text>
<
line x1="-10"
y1="10"
x2="20"
y2="10"
style="
fill:none;
stroke:#880000;"/>
<
rect x="0"
y="0"
width="20"
height="100"
style="
fill:#FFAA44;
stroke:#FF00FF;
stroke-width:4;">
<
animate attributeName="height"
calcMode="spline"
keySplines="0,0,1,1;0,0,1,1;.75,0,0,.75"
values="100;85;60;10"
begin="0s"
dur="9s"
fill="freeze"/>
</
rect>
<
text x="-15"
y="125"
xml:space="default"
style="
text-anchor:middle;
fill:red;
font-size:12;">calcMode='spline'</
text>
</
g>
<
g transform="translate(75,220)">
<
text x="-10"
y="104">0-2 sec. </
text>
<
line x1="-10"
y1="100"
x2="20"
y2="100"
style="
fill:none;
stroke:#880000;"/>
<
text x="-10"
y="89">2-4 sec. </
text>
<
line x1="-10"
y1="85"
x2="20"
y2="85"
style="
fill:none;
stroke:#880000;"/>
<
text x="-10"
y="64">4-6 sec. </
text>
<
line x1="-10"
y1="60"
x2="20"
y2="60"
style="
fill:none;
stroke:#880000;"/>
<
text x="-10"
y="14">6+ sec. </
text>
<
line x1="-10"
y1="10"
x2="20"
y2="10"
style="
fill:none;
stroke:#880000;"/>
<
rect x="0"
y="-10"
width="20"
height="10"
style="
fill:#FFAA44;
stroke:#FF00FF;
stroke-width:4;">
<
animateMotion calcMode="discrete"
values="0,100;0,85;0,60;0,10"
begin="0s"
dur="8s"
fill="freeze"/>
</
rect>
<
text x="-15"
y="125"
xml:space="default"
style="
text-anchor:middle;
fill:red;
font-size:12;">calcMode='discrete'</
text>
</
g>
<
g transform="translate(185,220)">
<
text x="-10"
y="104">at 0 sec. </
text>
<
line x1="-10"
y1="100"
x2="20"
y2="100"
style="
fill:none;
stroke:#880000;"/>
<
text x="-10"
y="89">at 3 sec. </
text>
<
line x1="-10"
y1="85"
x2="20"
y2="85"
style="
fill:none;
stroke:#880000;"/>
<
text x="-10"
y="64">at 6 sec. </
text>
<
line x1="-10"
y1="60"
x2="20"
y2="60"
style="
fill:none;
stroke:#880000;"/>
<
text x="-10"
y="14">9+ sec. </
text>
<
line x1="-10"
y1="10"
x2="20"
y2="10"
style="
fill:none;
stroke:#880000;"/>
<
rect x="0"
y="-10"
width="20"
height="10"
style="
fill:#FFAA44;
stroke:#FF00FF;
stroke-width:4;">
<
animateMotion calcMode="linear"
values="0,100;0,85;0,60;0,10"
begin="0s"
dur="9s"
fill="freeze"/>
</
rect>
<
text x="-15"
y="125"
xml:space="default"
style="
text-anchor:middle;
fill:red;
font-size:12;">calcMode='linear'</
text>
</
g>
<
g transform="translate(295,220)">
<
text x="-10"
y="104">at 0 sec. </
text>
<
line x1="-10"
y1="100"
x2="20"
y2="100"
style="
fill:none;
stroke:#880000;"/>
<
text x="-10"
y="89">at 1.5 sec. </
text>
<
line x1="-10"
y1="85"
x2="20"
y2="85"
style="
fill:none;
stroke:#880000;"/>
<
text x="-10"
y="64">at 4 sec. </
text>
<
line x1="-10"
y1="60"
x2="20"
y2="60"
style="
fill:none;
stroke:#880000;"/>
<
text x="-10"
y="14">9+ sec. </
text>
<
line x1="-10"
y1="10"
x2="20"
y2="10"
style="
fill:none;
stroke:#880000;"/>
<
rect x="0"
y="-10"
width="20"
height="10"
style="
fill:#FFAA44;
stroke:#FF00FF;
stroke-width:4;">
<
animateMotion values="0,100;0,85;0,60;0,10"
begin="0s"
dur="9s"
fill="freeze"/>
</
rect>
<
text x="-15"
y="125"
xml:space="default"
style="
text-anchor:middle;
fill:red;
font-size:12;">calcMode='paced'</
text>
</
g>
<
g transform="translate(405,220)">
<
text x="-10"
y="104">at 0 sec. </
text>
<
line x1="-10"
y1="100"
x2="20"
y2="100"
style="
fill:none;
stroke:#880000;"/>
<
text x="-10"
y="89">at 3 sec. </
text>
<
line x1="-10"
y1="85"
x2="20"
y2="85"
style="
fill:none;
stroke:#880000;"/>
<
text x="-10"
y="64">at 6 sec. </
text>
<
line x1="-10"
y1="60"
x2="20"
y2="60"
style="
fill:none;
stroke:#880000;"/>
<
text x="-10"
y="14">9+ sec. </
text>
<
line x1="-10"
y1="10"
x2="20"
y2="10"
style="
fill:none;
stroke:#880000;"/>
<
rect x="0"
y="-10"
width="20"
height="10"
style="
fill:#FFAA44;
stroke:#FF00FF;
stroke-width:4;">
<
animateMotion calcMode="spline"
keySplines="0,0,1,1;0,0,1,1;.75,0,0,.75"
values="0,100;0,85;0,60;0,10"
begin="0s"
dur="9s"
fill="freeze"/>
</
rect>
<
text x="-15"
y="125"
xml:space="default"
style="
text-anchor:middle;
fill:red;
font-size:12;">calcMode='spline'</
text>
</
g>
</
g>
</
g>
<
g id="test-legend"
style="
fill:black;
font-family:Helvetica;
font-size:10;">
<
rect x="10"
y="390"
width="275"
height="50"
style="
fill:none;
stroke:#000000;"/>
<
path style="
fill:none;
stroke:#000000;"
d="M10 405 h275 M205 405 v35 M10 426 h195 M205 422 h80"/>
<
text x="25"
y="401">Scalable Vector Graphics (SVG) Conformance Suite</
text>
<
a xlink:href="copyright-documents-19990405.html">
<
text x="12"
y="437"
style="
fill:blue;">Copyright 2000 W3C. All Rights Reserved.</
text>
</
a>
<
text style="
font-size:12;"
x="35"
y="420">animation-values-BE-06</
text>
<
text style="
font-size:10;"
x="210"
y="417">$Revision: 1.1 $</
text>
<
text style="
font-size:10;"
x="210"
y="435">Release 2.0</
text>
<
rect id="test-frame"
x="1"
y="1"
width="448"
height="448"
style="
fill:none;
stroke:#000000;"/>
</
g>
</
svg>