blob: 625294038c0e1a0213340c3ebcd8c0d1633c185b (
plain)
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
62
63
64
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="none">
<style>
/* <![CDATA[ */
.ref {
fill: red;
}
.test {
fill: lime;
}
/* ]]> */
</style>
<rect width="100%" height="100%" fill="lime"/>
<!-- all rect.test rects should be covered by the corresponded rest.ref rect-->
<!-- 1st row: transform-box only. -->
<rect class="ref"
x="11" y="11" width="8" height="8"/>
<rect class="test"
style="transform-box: view-box"
x="10" y="10" width="10" height="10"/>
<rect class="ref"
x="26" y="11" width="8" height="8"/>
<rect class="test"
style="transform-box: fill-box"
x="25" y="10" width="10" height="10"/>
<rect class="ref"
x="41" y="11" width="8" height="8"/>
<rect class="test"
style="transform-box: border-box"
x="40" y="10" width="10" height="10"/>
<!-- 2nd row: transform-box plus transform-origin. -->
<rect class="ref"
x="11" y="26" width="8" height="8"/>
<rect class="test"
style="transform-box: view-box; transform-origin: 40% 60%"
x="10" y="25" width="10" height="10"/>
<rect class="ref"
x="26" y="26" width="8" height="8"/>
<rect class="test"
style="transform-box: fill-box; transform-origin: 20px 10px"
x="25" y="25" width="10" height="10"/>
<rect class="ref"
x="41" y="26" width="8" height="8"/>
<rect class="test"
style="transform-box: border-box; transform-origin: 40% 60%"
x="40" y="25" width="10" height="10"/>
<!-- 3rd row: transform-box, transform-origin and transform. -->
<rect class="ref"
x="11" y="46" width="8" height="8"/>
<rect class="test"
style="transform-box: fill-box; transform-origin: 0% 0%; transform: scale(2);"
x="10" y="45" width="5" height="5"/>
<rect class="ref"
x="26" y="46" width="8" height="8"/>
<rect class="test"
style="transform-box: fill-box; transform-origin: 50% 50%; transform:rotate(45deg);"
x="24" y="44" width="12" height="12"/>
<rect class="ref"
x="41" y="46" width="8" height="8"/>
<rect class="test"
style="transform-box: border-box; transform-origin: 100% 100%; transform: scale(1);"
x="40" y="45" width="10" height="10"/>
</svg>
|
