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
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 95 120">
<defs>
<symbol id="mySym" width="10" height="10" viewBox="0 0 2 2">
<rect width="2" height="2" style="fill:blue" />
</symbol>
<svg id="mySvg" width="10" height="10" viewBox="0 0 2 2">
<rect width="2" height="2" style="fill:green" />
</svg>
<symbol id="mySymShifted" x="15" y="20" width="10" height="10" viewBox="0 0 2 2">
<rect width="2" height="2" style="fill:magenta" />
</symbol>
<svg id="mySvgShifted" x="15" y="20" width="10" height="10" viewBox="0 0 2 2">
<rect width="2" height="2" style="fill:cyan" />
</svg>
<image id="myImg" width="10" height="10" preserveAspectRatio="none"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFc
SJAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jn
m+48GgAAAA1JREFUCJlj+F+v9R8ABtECqHp0jnoAAAAASUVORK5CYII=">
</image>
<rect id="myRect" width="10" height="10" style="fill:gray" />
<rect id="myRectXY" width="10" height="10" style="fill:#cc0" x="20" y="30" />
</defs>
<rect width="100%" height="100%" fill="white" />
<path d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20" fill="none" stroke="pink" />
<use xlink:href="#mySym" x="5" y="5" style="opacity:1.0" />
<use xlink:href="#mySvg" x="20" y="5" style="opacity:0.8" />
<use xlink:href="#mySym" x="35" y="5" style="opacity:0.6" />
<use xlink:href="#mySvg" x="50" y="5" style="opacity:0.4" />
<use xlink:href="#mySym" x="65" y="5" style="opacity:0.2" />
<path d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20" fill="none" stroke="orange" transform="translate(15, 20)" />
<use xlink:href="#mySymShifted" x="5" y="5" style="opacity:1.0" />
<use xlink:href="#mySvgShifted" x="20" y="5" style="opacity:0.8" />
<use xlink:href="#mySymShifted" x="35" y="5" style="opacity:0.6" />
<use xlink:href="#mySvgShifted" x="50" y="5" style="opacity:0.4" />
<use xlink:href="#mySymShifted" x="65" y="5" style="opacity:0.2" />
<path d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20" fill="none" stroke="pink" transform="translate(0, 40)" />
<!-- with transform -->
<use xlink:href="#mySymShifted" x="5" y="5" style="opacity:1.0" transform="rotate(90, 7.5, 32.5)" />
<use xlink:href="#mySvgShifted" x="20" y="5" style="opacity:0.8" transform="rotate(90, 22.5, 32.5)" />
<use xlink:href="#mySymShifted" x="35" y="5" style="opacity:0.6" transform="rotate(90, 37.5, 32.5)" />
<use xlink:href="#mySvgShifted" x="50" y="5" style="opacity:0.4" transform="rotate(90, 52.5, 32.5)" />
<use xlink:href="#mySymShifted" x="65" y="5" style="opacity:0.2" transform="rotate(90, 67.5, 32.5)" />
<path d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20" fill="none" stroke="orange" transform="translate(15, 60)" />
<!-- without x/y -->
<use xlink:href="#mySymShifted" style="opacity:1.0" transform="rotate(90, 0.0, 50.0)" />
<use xlink:href="#mySvgShifted" style="opacity:0.8" transform="rotate(90, 7.5, 57.5)" />
<use xlink:href="#mySymShifted" style="opacity:0.6" transform="rotate(90, 15.0, 65.0)" />
<use xlink:href="#mySvgShifted" style="opacity:0.4" transform="rotate(90, 22.5, 72.5)" />
<use xlink:href="#mySymShifted" style="opacity:0.2" transform="rotate(90, 30.0, 80.0)" />
<path d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20" fill="none" stroke="pink" transform="translate(0, 80)" />
<!-- with width/height -->
<use xlink:href="#mySym" width="20" height="30" x="10" y="165" style="opacity:1.0" transform="scale(0.5)" />
<use xlink:href="#mySvg" width="20" height="30" x="40" y="165" style="opacity:0.8" transform="scale(0.5)" />
<use xlink:href="#mySym" width="20" height="30" x="70" y="165" style="opacity:0.6" transform="scale(0.5)" />
<use xlink:href="#mySvg" width="20" height="30" x="100" y="165" style="opacity:0.4" transform="scale(0.5)" />
<use xlink:href="#mySym" width="20" height="30" x="130" y="165" style="opacity:0.2" transform="scale(0.5)" />
<path d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20" fill="none" stroke="orange" transform="translate(15, 100)" />
<!-- image/rect -->
<use xlink:href="#myImg" x="20" y="105" />
<use xlink:href="#myImg" x="35" y="105" width="20" height="30" /><!-- width/height ignored -->
<use xlink:href="#myRect" x="50" y="105" />
<use xlink:href="#myRect" x="65" y="105" width="20" height="30" /><!-- width/height ignored -->
<use xlink:href="#myRectXY" x="60" y="75" /><!-- cumulated x/y -->
</svg>
|
