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
|
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
class="reftest-wait">
<!-- Tests for rotate="auto" and "auto-reverse" -->
<!-- The idea here is to create positioned red "holes" in the lime
background, and then hopefully use paused <animateMotion> elements to
position other elements exactly on top of the hole. -->
<style>
.background { fill: lime }
.hole { color: red }
.testBegin { color: purple }
.testEnd { color: orange }
.mask { color: lime }
</style>
<defs>
<!-- A 'pin' marker, just offscreen, pointing directly down at 0,0 -->
<!-- NOTE: The lime 2.83px-wide stroke is a hack to get around "seams" in
SVG when redrawing the same non-pixel-aligned shape on top of itself
in different colors. 2.83 is just over 2*sqrt(2), sqrt(2) being the
maximum distance from a path that antialiasing of square pixels can
cause the path to affect. -->
<path id="marker" d="m0,0 l-10,-30 c-5,-20 25,-20 20,0 z"
style="fill: currentColor; stroke: lime; stroke-width: 2.83px"/>
</defs>
<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 class="background" width="100%" height="100%" />
<g transform="translate(50,50)">
<!-- Here's the hole -->
<use xlink:href="#marker" class="hole"
transform="translate(20,20) rotate(45)"/>
<!-- And here's a stack of elements animated with 'animateMotion' that
should end up there. -->
<use xlink:href="#marker" class="testBegin">
<animateMotion from="20,20" to="40,40" rotate="auto" begin="101s" dur="1s"/>
</use>
<use xlink:href="#marker" class="testEnd">
<animateMotion by="20,20" rotate="auto" begin="100" dur="1s" fill="freeze"/>
</use>
<use xlink:href="#marker" class="mask">
<animateMotion by="40,40" rotate="auto" begin="100s" dur="2s"/>
</use>
</g>
</svg>
|
