OLD | NEW |
| (Empty) |
1 <?xml version="1.0" encoding="UTF-8"?> | |
2 <!DOCTYPE html | |
3 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" | |
4 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
5 <html xmlns="http://www.w3.org/1999/xhtml" | |
6 xmlns:svg="http://www.w3.org/2000/svg" | |
7 xmlns:xlink="http://www.w3.org/1999/xlink"> | |
8 <head> | |
9 <title>Pie Chart Test</title> | |
10 </head> | |
11 <body> | |
12 <script type="text/javascript"> | |
13 function markClick(input) { | |
14 var element = document.getElementById('result'); | |
15 var range = document.createRange(); | |
16 range.selectNodeContents(element); | |
17 range.deleteContents(); | |
18 element.appendChild(range.createContextualFragment(input)); | |
19 } | |
20 </script> | |
21 <div id="someText"> | |
22 Some text for the chart. | |
23 </div> | |
24 <div id="result">Nothing.</div> | |
25 <div id="chart_container" style="width: 400px; height: 220px; border: 1px soli
d #808080;"> | |
26 <svg:svg id="chart_container" height="220" width="400"> | |
27 <svg:defs id="defs"></svg:defs> | |
28 <svg:g> | |
29 <svg:rect fill="white" height="220" width="400" y="0" x="0"></svg:rect> | |
30 <svg:text fill="black" font-weight="bold" font-size="10" font-family="Arial"
y="16" x="200" text-anchor="middle">Test Chart</svg:text> | |
31 <svg:rect fill="white" height="83" width="97" y="77" x="296"></svg:rect> | |
32 <svg:rect fill="red" stroke="none" height="12" width="12" y="84" x="303"></s
vg:rect> | |
33 <svg:text fill="black" font-size="12" font-family="Arial" y="94" x="318" onc
lick="markClick('text_apple')">Apple</svg:text> | |
34 <svg:rect fill="green" stroke="none" height="12" width="12" y="103" x="303">
</svg:rect> | |
35 <svg:text fill="black" font-size="12" font-family="Arial" y="113" x="318">Or
ange</svg:text> | |
36 <svg:rect fill="#808080" stroke="none" height="12" width="12" y="122" x="303
"></svg:rect> | |
37 <svg:text fill="black" font-size="12" font-family="Arial" y="132" x="318">Ba
nana</svg:text> | |
38 <svg:rect fill="green" stroke="none" height="12" width="12" y="141" x="303">
</svg:rect> | |
39 <svg:text fill="black" font-size="12" font-family="Arial" y="151" x="318">Or
ange</svg:text> | |
40 <svg:g onclick="markClick('slice_red')"><svg:path fill="red" stroke="none" d
="M148,119L148,43A76,76,0,0,1,198,61.77Z"></svg:path></svg:g> | |
41 <svg:g onclick="markClick('slice_green')"><svg:path fill="green" stroke="non
e" d="M148,119L198,61.77A76,76,0,0,1,202.93,171.52Z"></svg:path></svg:g> | |
42 <svg:g><svg:path fill="#808080" stroke="none" d="M148,119L202.93,171.52A76,7
6,0,0,1,72.08,122.41Z"></svg:path></svg:g> | |
43 <svg:g><svg:path fill="green" stroke="none" d="M148,119L72.08,122.41A76,76,0
,0,1,148,43Z"></svg:path></svg:g> | |
44 </svg:g> | |
45 </svg:svg> | |
46 <svg:svg width="400px" height="120px"> | |
47 <svg:desc>Example RotateScale - Rotate and scale transforms</svg:desc> | |
48 <svg:g fill="none" stroke="black" stroke-width="3" > | |
49 <!-- Draw the axes of the original coordinate system --> | |
50 <svg:line x1="0" y1="1.5" x2="400" y2="1.5" /> | |
51 <svg:line x1="1.5" y1="0" x2="1.5" y2="120" /> | |
52 </svg:g> | |
53 <!-- Establish a new coordinate system whose origin is at (50,30) | |
54 in the initial coord. system and which is rotated by 30 degrees. --> | |
55 <svg:g transform="translate(50,30)"> | |
56 <svg:g transform="rotate(30)" id="rotate"> | |
57 <svg:g fill="none" stroke="red" stroke-width="3" > | |
58 <svg:line x1="0" y1="0" x2="50" y2="0" /> | |
59 <svg:line x1="0" y1="0" x2="0" y2="50" /> | |
60 </svg:g> | |
61 <svg:text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" > | |
62 ABC (rotate) | |
63 </svg:text> | |
64 </svg:g> | |
65 </svg:g> | |
66 <!-- Establish a new coordinate system whose origin is at (200,40) | |
67 in the initial coord. system and which is scaled by 1.5. --> | |
68 <svg:g transform="translate(200,40)"> | |
69 <svg:g transform="scale(1.5)"> | |
70 <svg:g fill="none" stroke="red" stroke-width="3" > | |
71 <svg:line x1="0" y1="0" x2="50" y2="0" /> | |
72 <svg:line x1="0" y1="0" x2="0" y2="50" /> | |
73 </svg:g> | |
74 <svg:text x="0" y="0" font-size="20" font-family="Verdana" fill="blue" > | |
75 ABC (scale) | |
76 </svg:text> | |
77 </svg:g> | |
78 </svg:g> | |
79 </svg:svg> | |
80 <div style="position: absolute; white-space: nowrap; top: 230px; left: 4
10px; font-family: Arial; font-size: 12px; display: none; ">WOrange</div> | |
81 </div> | |
82 <div style="display: none; position: absolute; top: 230px; left: 410px; white-
space: nowrap; font-family: Arial; font-size: 12px;">WOrange</div> | |
83 </body> | |
84 </html> | |
OLD | NEW |