blob: ddb0ffe454798fd7ce3f68c43634a20d5e369c1c (
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 600">
<!-- 1. patternUnits -->
<defs>
<pattern id="patternUnits" width="80" height="80"
patternUnits="userSpaceOnUse">
<rect width="50" height="50" fill="blue"/>
<rect x="50" width="50" height="50" fill="red"/>
<rect y="50" width="50" height="50" fill="red"/>
<rect x="50" y="50" width="50" height="50" fill="blue"/>
</pattern>
</defs>
<rect width="100" height="100" stroke="black" fill="url(#patternUnits)"/>
<g transform="translate(100)">
<rect width="100" height="100" stroke="black" fill="url(#patternUnits)"/>
</g>
<!-- 2. patternContentUnits -->
<defs>
<pattern id="patternContentUnits" width="1" height="1"
patternContentUnits="objectBoundingBox">
<rect width="0.5" height="0.5" fill="blue"/>
<rect x="0.5" width="0.5" height="0.5" fill="red"/>
<rect y="0.5" width="0.5" height="0.5" fill="red"/>
<rect x="0.5" y="0.5" width="0.5" height="0.5" fill="blue"/>
</pattern>
</defs>
<g transform="translate(0 100)">
<rect width="100" height="100" stroke="black"
fill="url(#patternContentUnits)"/>
<g transform="translate(100)">
<rect width="100" height="100" stroke="black"
fill="url(#patternContentUnits)"/>
</g>
</g>
<!-- 3. patternTransform -->
<defs>
<pattern id="patternTransform" width="1" height="1"
patternTransform="rotate(45 50 50)">
<rect width="50" height="50" fill="blue"/>
<rect x="50" width="50" height="50" fill="red"/>
<rect y="50" width="50" height="50" fill="red"/>
<rect x="50" y="50" width="50" height="50" fill="blue"/>
</pattern>
</defs>
<g transform="translate(0 200)">
<rect width="100" height="100" stroke="black"
fill="url(#patternTransform)"/>
<g transform="translate(100)">
<rect width="100" height="100" stroke="black"
fill="url(#patternTransform)"/>
</g>
</g>
<!-- 4. preserveAspectRatio -->
<defs>
<pattern id="par" width="1" height="1" viewBox="0.1 0.1 0.6 0.85"
preserveAspectRatio="none">
<rect width="50" height="50" fill="blue"/>
<rect x="50" width="50" height="50" fill="red"/>
<rect y="50" width="50" height="50" fill="red"/>
<rect x="50" y="50" width="50" height="50" fill="blue"/>
</pattern>
</defs>
<g transform="translate(0 300)">
<rect width="100" height="100" stroke="black" fill="url(#par)"/>
<g transform="translate(100)">
<rect width="100" height="100" stroke="black" fill="url(#par)"/>
</g>
</g>
<!-- 5. viewBox -->
<defs>
<pattern id="viewBox" width="1" height="1" viewBox="0.1 0.1 0.6 0.85"
preserveAspectRatio="none">
<rect width="50" height="50" fill="blue"/>
<rect x="50" width="50" height="50" fill="red"/>
<rect y="50" width="50" height="50" fill="red"/>
<rect x="50" y="50" width="50" height="50" fill="blue"/>
</pattern>
</defs>
<g transform="translate(0 400)">
<rect width="100" height="100" stroke="black" fill="url(#viewBox)"/>
<g transform="translate(100)">
<rect width="100" height="100" stroke="black" fill="url(#viewBox)"/>
</g>
</g>
<!-- 6. xlink:href -->
<defs>
<pattern id="xlink" xlink:href="#xlinkRef"/>
<pattern id="xlinkRef" width="1" height="1">
<rect width="50" height="50" fill="blue"/>
<rect x="50" width="50" height="50" fill="red"/>
<rect y="50" width="50" height="50" fill="red"/>
<rect x="50" y="50" width="50" height="50" fill="blue"/>
</pattern>
</defs>
<g transform="translate(0 500)">
<rect width="100" height="100" stroke="black" fill="url(#xlink)"/>
<g transform="translate(100)">
<rect width="100" height="100" stroke="black" fill="url(#xlink)"/>
</g>
</g>
<!-- If adding more tests here, be sure to update the viewBox on the root svg
element -->
</svg>
|
