1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
class="reftest-wait">
<script xlink:href="../smil-util.js" type="text/javascript"/>
<script type="text/javascript">
function doTest() {
setTimeAndSnapshot(101, true);
}
window.addEventListener("MozReftestInvalidate", doTest, false);
</script>
<!-- Big green background to match lime.svg -->
<rect fill="lime" width="100%" height="100%" />
<!-- In the following pairs of rects, the only pairwise differences are the
fill-color and the presence of the "to" attribute on the animateMotion
element. "to" shouldn't have any effect in these cases, since it has
lower priority than "values," "path," and "mpath". So in each case, the
lime rect should cover up the red rect at all times. -->
<!-- Single-point path specified with "values" attribute: -->
<g transform="translate(0,0)">
<rect width="20" height="20" fill="red">
<animateMotion values="20,0" dur="2" begin="100"/>
</rect>
<rect width="20" height="20" fill="lime">
<animateMotion values="20,0" dur="2" to="-50,0" begin="100"/>
</rect>
</g>
<!-- Multi-point path specified with "values" attribute: -->
<g transform="translate(0,30)">
<rect width="20" height="20" fill="red">
<animateMotion values="20,0; 80,0" dur="2" begin="100"/>
</rect>
<rect width="20" height="20" fill="lime">
<animateMotion values="20,0; 80,0" dur="2" to="-50,0" begin="100"/>
</rect>
</g>
<!-- Path specified with "path" attribute: -->
<g transform="translate(0,60)">
<rect width="20" height="20" fill="red">
<animateMotion path="m0,0 h100" dur="2" begin="100"/>
</rect>
<rect width="20" height="20" fill="lime">
<animateMotion path="m0,0 h100" dur="2" to="-50,0" begin="100"/>
</rect>
</g>
<!-- Path specified with "mpath" subelement: -->
<path id="p" d="m0,0 h100"/>
<g transform="translate(0,90)">
<rect width="20" height="20" fill="red">
<animateMotion dur="2" begin="100"><mpath xlink:href="#p"/></animateMotion>
</rect>
<rect width="20" height="20" fill="lime">
<animateMotion dur="2" to="-50,0" begin="100"><mpath xlink:href="#p"/></animateMotion>
</rect>
</g>
</svg>
|
