SVG – Learning by Coding

[ piechart_movearc.svg --> Grafik anzeigen ]

  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: <!--    AuthorDrThomas 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-familyArialHelveticasans-serif;
 37:       }
 38: 
 39:       path
 40:       {
 41:         stroke#FFFFFF;
 42:         stroke-width0px;
 43:         filterurl(#flt);
 44:       }
 45: 
 46:       line
 47:       {
 48:         stroke#000000;
 49:         stroke-width0px;
 50:       }
 51: 
 52:       g text
 53:       {
 54:         pointer-eventsnone;
 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 ttrelemttrelemposxposycurtransctxcty;
 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 ttrelemttrelem;
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(|| 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-Rechteckttt=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">dynText</text>
227:   </g>
228:   <!-- Tooltip Ende -->
229: 
230: </svg>

[zum Anfang]