<
svg id="svg-root"
width="450"
height="450" xmlns:xlink="
http://www.w3.org/1999/xlink" xmlns="
http://www.w3.org/2000/svg" >
<
title id="test-title">animation-motion-BE-11</
title>
<
desc id="test-desc">Test different ways of defining a motion path.</
desc>
<
g id="test-body-content">
<
text style="
font-family:Helvetica;
font-size:14;
text-anchor:middle;"
x="225"
y="25">Test different ways of defining a motion path.</
text>
<
g style="
font-family:Helvetica;
font-size:12;
text-anchor:middle;">
<
path d="M25,100 L125,75"
style="
fill:none;
stroke:black;
stroke-width:2;"/>
<
rect x="10"
y="70"
width="30"
height="30"
style="
fill:#FFCCCC;
stroke:black;
stroke-width:4;"/>
<
text x="25"
y="115">0 sec.</
text>
<
rect x="110"
y="45"
width="30"
height="30"
style="
fill:#FFCCCC;
stroke:black;
stroke-width:4;"/>
<
text x="125"
y="90">3+ sec.</
text>
<
path d="M-15,0 L0,-30 L15,0 z"
style="
fill:blue;
stroke:red;
stroke-width:2;">
<
animateMotion from="25,100"
to="125,75"
begin="0s"
dur="3s"
fill="freeze"/>
</
path>
<
text x="75"
y="135"
style="
fill:red;
stroke:none;
font-size:14;">'from'/'to' attributes</
text>
<
path d="M225,100 L325,75 L425,75"
style="
fill:none;
stroke:black;
stroke-width:2;"/>
<
rect x="210"
y="70"
width="30"
height="30"
style="
fill:#FFCCCC;
stroke:black;
stroke-width:4;"/>
<
text x="225"
y="115">0 sec.</
text>
<
rect x="310"
y="45"
width="30"
height="30"
style="
fill:#FFCCCC;
stroke:black;
stroke-width:4;"/>
<
text x="325"
y="90">3 sec.</
text>
<
rect x="410"
y="45"
width="30"
height="30"
style="
fill:#FFCCCC;
stroke:black;
stroke-width:4;"/>
<
text x="425"
y="90">6+ sec.</
text>
<
path d="M-15,0 L0,-30 L15,0 z"
style="
fill:blue;
stroke:red;
stroke-width:2;">
<
animateMotion values="225,100;325,75;425,75"
begin="0s"
dur="6s"
calcMode="linear"
fill="freeze"/>
</
path>
<
text x="325"
y="135"
style="
fill:red;
stroke:none;
font-size:14;">'values' attribute</
text>
<
path d="M25,225 C25,175 125,150 175,200"
style="
fill:none;
stroke:black;
stroke-width:2;"/>
<
rect x="10"
y="195"
width="30"
height="30"
style="
fill:#FFCCCC;
stroke:black;
stroke-width:4;"/>
<
text x="25"
y="240">0 sec.</
text>
<
rect x="160"
y="170"
width="30"
height="30"
style="
fill:#FFCCCC;
stroke:black;
stroke-width:4;"/>
<
text x="175"
y="215">6+ sec.</
text>
<
path d="M-15,0 L0,-30 L15,0 z"
style="
fill:blue;
stroke:red;
stroke-width:2;">
<
animateMotion path="M25,225 C25,175 125,150 175,200"
begin="0s"
dur="6s"
calcMode="linear"
fill="freeze"/>
</
path>
<
text x="100"
y="260"
style="
fill:red;
stroke:none;
font-size:14;">'path' attribute</
text>
<
path d="M275,225 C275,175 375,150 425,200"
style="
fill:none;
stroke:black;
stroke-width:2;"/>
<
rect x="260"
y="195"
width="30"
height="30"
style="
fill:#FFCCCC;
stroke:black;
stroke-width:4;"/>
<
text x="275"
y="240">0 sec.</
text>
<
rect x="410"
y="170"
width="30"
height="30"
style="
fill:#FFCCCC;
stroke:black;
stroke-width:4;"/>
<
text x="425"
y="215">6+ sec.</
text>
<
path id="mpathRef"
d="M275,225 C275,175 375,150 425,200"
style="
display:none;"/>
<
path d="M-15,0 L0,-30 L15,0 z"
style="
fill:blue;
stroke:red;
stroke-width:2;">
<
animateMotion begin="0s"
dur="6s"
calcMode="linear"
fill="freeze">
<
mpath xlink:href="#mpathRef"/>
</
animateMotion>
</
path>
<
text x="350"
y="260"
style="
fill:red;
stroke:none;
font-size:14;">'mpath' element</
text>
</
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-motion-BE-11</
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>