SVG – Learning by Coding
1: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
2: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
3: "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
4: <!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink">
5: ]>
6:
7: <!-- SVG - Learning by Coding - http://www.datenverdrahten.de/svglbc/ -->
8: <!-- Author: Dr. Thomas Meinike 12/03 - thomas@handmadecode.de -->
9:
10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
11: onload="getSVGDoc(evt)" onzoom="ZoomControl()">
12:
13: <title>SVG - Learning by Coding</title>
14: <desc>SVG-Spezifikation in Beispielen</desc>
15:
16: <defs>
17:
18: <filter id="flt">
19: <feGaussianBlur in="SourceAlpha" stdDeviation="0.5" result="blur"/>
20: <feSpecularLighting in="blur" surfaceScale="5" specularConstant="0.5"
21: specularExponent="10" result="specOut" style="lighting-color: #FFF">
22: <fePointLight x="-5000" y="-5000" z="5000"/>
23: </feSpecularLighting>
24: <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut2"/>
25: <feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic"
26: k1="0" k2="1" k3="1" k4="0"/>
27: </filter>
28:
29:
30: <style type="text/css">
31: <![CDATA[
32:
33: text
34: {
35: fill: #000000;
36: font-family: Arial, Helvetica, sans-serif;
37: }
38:
39: path
40: {
41: stroke: #FFFFFF;
42: stroke-width: 0px;
43: filter: url(#flt);
44: }
45:
46: line
47: {
48: stroke: #000000;
49: stroke-width: 0px;
50: }
51:
52: g text
53: {
54: pointer-events: none;
55: }
56:
57: ]]>
58: </style>
59:
60:
61: <script type="text/javascript">
62: <![CDATA[
63:
64: var svgdoc,svgroot;
65:
66:
67: function getSVGDoc(load_evt)
68: {
69: svgdoc=load_evt.target.ownerDocument;
70: svgroot=svgdoc.documentElement;
71: }
72:
73:
74: function ShowTooltip(e,txt)
75: {
76: var ttrelem, ttrelem, posx, posy, curtrans, ctx, cty;
77:
78: ttrelem=svgdoc.getElementById("ttr");
79: tttelem=svgdoc.getElementById("ttt");
80: tttelem.childNodes.item(0).data=txt;
81: posx=e.clientX;
82: posy=e.clientY;
83: curtrans=svgroot.currentTranslate;
84: ctx=curtrans.x;
85: cty=curtrans.y;
86: ttrelem.setAttribute("x",posx-ctx);
87: ttrelem.setAttribute("y",posy-cty-20);
88: tttelem.setAttribute("x",posx-ctx+5);
89: tttelem.setAttribute("y",posy-cty-8);
90: ttrelem.setAttribute("width",tttelem.getComputedTextLength()+10);
91: tttelem.setAttribute("style",
92: "fill: #0000CC; font-size: 11px; visibility: visible");
93: ttrelem.setAttribute("style",
94: "fill: #FFFFCC; stroke: #000000; stroke-width: 0.5px; visibility: visible");
95: // Fix fuer Corel SVG Viewer - nochmaliges Zuweisen des Textinhalts
96: tttelem.childNodes.item(0).data=txt;
97: }
98:
99:
100: function HideTooltip()
101: {
102: var ttrelem, ttrelem;
103: ttrelem=svgdoc.getElementById("ttr");
104: tttelem=svgdoc.getElementById("ttt");
105: ttrelem.setAttribute("style","visibility: hidden");
106: tttelem.setAttribute("style","visibility: hidden");
107: }
108:
109:
110: function SetOpacity(e,op)
111: {
112: e.target.parentNode.setAttribute("fill-opacity",op);
113: }
114:
115:
116: function TextHover(objid,color,decor)
117: {
118: var element;
119:
120: element=svgdoc.getElementById(objid);
121: element.setAttribute("style","fill: "+color+"; text-decoration: "+decor);
122: }
123:
124:
125: function ZoomControl()
126: {
127: var curzoom;
128:
129: curzoom=svgroot.currentScale;
130: svgdoc.getElementById("tooltip").setAttribute("transform",
131: "scale("+1/curzoom+")");
132: }
133:
134:
135: function MoveArc(click_evt,dx,dy)
136: {
137: var obj,e,f;
138:
139: obj=click_evt.target;
140:
141: e=Math.abs(obj.getCTM().e);
142: f=Math.abs(obj.getCTM().f);
143:
144: if(e < 1 || f < 1)
145: {
146: obj.setAttribute("transform","translate("+dx+","+dy+")");
147: obj.style.setProperty("stroke","#000000","");
148: obj.style.setProperty("stroke-width","0.5px","");
149: }
150: else
151: {
152: obj.setAttribute("transform","translate("+1/dx+","+1/dy+")");
153: obj.style.setProperty("stroke","#FFFFFF","");
154: obj.style.setProperty("stroke-width","0px","");
155: }
156: }
157:
158: ]]>
159: </script>
160:
161: </defs>
162:
163: <text x="20" y="30" style="fill: #000; font-size: 24px">
164: Kreis-Diagramm mit beweglichen Segmenten</text>
165:
166: <text x="100.00" y="70.00" style="fill: #FF0000; font-size: 20px; text-anchor: left">
167: Was dröhnt denn so aus den Boxen?</text>
168:
169: <!-- Kreisdiagramm - Beginn -->
170: <g onmousemove="ShowTooltip(evt,'Industrial');SetOpacity(evt,'0.5')"
171: onmouseout="HideTooltip();SetOpacity(evt,'1.0')">
172: <path d="M 200.00,200.00 L 200.00,100.00 A 100.00,100.00 0 0,1 295.11,230.90 Z"
173: style="fill: #FFFF99; stroke: #000000; stroke-width: 0.5px"
174: onclick="MoveArc(evt,12.14,-8.82)" transform="translate(12.14,-8.82)"/>
175: <rect x="350.00" y="100.00" width="30" height="12" style="fill: #FFFF99"/>
176: <text x="390.00" y="110.00" style="font-size: 12px; text-anchor: right">
177: Industrial [60.00 | 30.00%]</text>
178: </g>
179:
180: <g onmousemove="ShowTooltip(evt,'Mittelalter');SetOpacity(evt,'0.5')"
181: onmouseout="HideTooltip();SetOpacity(evt,'1.0')">
182: <path d="M 200.00,200.00 L 295.11,230.90 A 100.00,100.00 0 0,1 230.90,295.11 Z"
183: style="fill: #FF9933" onclick="MoveArc(evt,10.61,10.61)"/>
184: <rect x="350.00" y="120.00" width="30" height="12" style="fill: #FF9933"/>
185: <text x="390.00" y="130.00" style="font-size: 12px; text-anchor: right">
186: Mittelalter [30.00 | 15.00%]</text>
187: </g>
188:
189: <g onmousemove="ShowTooltip(evt,'Metal');SetOpacity(evt,'0.5')"
190: onmouseout="HideTooltip();SetOpacity(evt,'1.0')">
191: <path d="M 200.00,200.00 L 230.90,295.11 A 100.00,100.00 0 0,1 104.89,230.90 Z"
192: style="fill: #66CC00" onclick="MoveArc(evt,-6.81,13.37)"/>
193: <rect x="350.00" y="140.00" width="30" height="12" style="fill: #66CC00"/>
194: <text x="390.00" y="150.00" style="font-size: 12px; text-anchor: right">
195: Metal [50.00 | 25.00%]</text>
196: </g>
197:
198: <g onmousemove="ShowTooltip(evt,'Electro');SetOpacity(evt,'0.5')"
199: onmouseout="HideTooltip();SetOpacity(evt,'1.0')">
200: <path d="M 200.00,200.00 L 104.89,230.90 A 100.00,100.00 0 0,1 141.22,119.10 Z"
201: style="fill: #6666FF" onclick="MoveArc(evt,-14.27,-4.64)"/>
202: <rect x="350.00" y="160.00" width="30" height="12" style="fill: #6666FF"/>
203: <text x="390.00" y="170.00" style="font-size: 12px; text-anchor: right">
204: Electro [40.00 | 20.00%]</text>
205: </g>
206:
207: <g onmousemove="ShowTooltip(evt,'Punk');SetOpacity(evt,'0.5')"
208: onmouseout="HideTooltip();SetOpacity(evt,'1.0')">
209: <path d="M 200.00,200.00 L 141.22,119.10 A 100.00,100.00 0 0,1 200.00,100.00 Z"
210: style="fill: #999999" onclick="MoveArc(evt,-4.64,-14.27)"/>
211: <rect x="350.00" y="180.00" width="30" height="12" style="fill: #999999"/>
212: <text x="390.00" y="190.00" style="font-size: 12px; text-anchor: right">
213: Punk [20.00 | 10.00%]</text>
214: </g>
215: <!-- Kreisdiagramm - Ende -->
216:
217: <!-- Status-Informationen - Beginn -->
218: <text x="100.00" y="340.00" style="fill: #0000CC; font-size: 12px">
219: Kreissegmente reagieren auf Anklicken!</text>
220: <!-- Status-Informationen - Ende -->
221:
222: <!-- Tooltip - Beginn (ttr=Tooltip-Rechteck, ttt=Tooltip-Text) -->
223: <g id="tooltip">
224: <rect id="ttr" x="0.00" y="0.00" rx="5.00" ry="5.00" width="100.00"
225: height="16.00" style="visibility: hidden"/>
226: <text id="ttt" x="0.00" y="0.00" style="visibility: hidden">dyn. Text</text>
227: </g>
228: <!-- Tooltip - Ende -->
229:
230: </svg>
[zum Anfang]
