|
1 <?xml version="1.0"?> |
|
2 <svg width="400px" height="150px" version="1.2" baseProfile="tiny" |
|
3 xmlns="http://www.w3.org/2000/svg"> |
|
4 <desc>Example Nested - Nested transformations</desc> |
|
5 <g fill="none" stroke="black" stroke-width="3" > |
|
6 <!-- Draw the axes of the original coordinate system --> |
|
7 <line x1="0" y1="1.5" x2="400" y2="1.5" /> |
|
8 <line x1="1.5" y1="0" x2="1.5" y2="150" /> |
|
9 </g> |
|
10 <!-- First, a translate --> |
|
11 <g transform="translate(50,90)"> |
|
12 <g fill="none" stroke="red" stroke-width="3" > |
|
13 <line x1="0" y1="0" x2="50" y2="0" /> |
|
14 <line x1="0" y1="0" x2="0" y2="50" /> |
|
15 </g> |
|
16 <text x="0" y="0" font-size="16" font-family="Verdana" > |
|
17 ....Translate(1) |
|
18 </text> |
|
19 <!-- Second, a rotate --> |
|
20 <g transform="rotate(-45)"> |
|
21 <g fill="none" stroke="green" stroke-width="3" > |
|
22 <line x1="0" y1="0" x2="50" y2="0" /> |
|
23 <line x1="0" y1="0" x2="0" y2="50" /> |
|
24 </g> |
|
25 <text x="0" y="0" font-size="16" font-family="Verdana" > |
|
26 ....Rotate(2) |
|
27 </text> |
|
28 <!-- Third, another translate --> |
|
29 <g transform="translate(130,160)"> |
|
30 <g fill="none" stroke="blue" stroke-width="3" > |
|
31 <line x1="0" y1="0" x2="50" y2="0" /> |
|
32 <line x1="0" y1="0" x2="0" y2="50" /> |
|
33 </g> |
|
34 <text x="0" y="0" font-size="16" font-family="Verdana" > |
|
35 ....Translate(3) |
|
36 </text> |
|
37 </g> |
|
38 </g> |
|
39 </g> |
|
40 </svg> |
