| 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 |