SVG – Learning by Coding

[ svgdomscripting.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: 
  5: <!--  hier ggfexterne CSS-Definitionen
  6: <?xml-stylesheet href="datei.css" type="text/css"?>
  7: -->
  8: 
  9: <!-- SVG Learning By Coding http://www.datenverdrahten.de/svglbc/ -->
 10: <!--    AuthorDrThomas Meinike 12/02 thomas@handmadecode.de     -->
 11: 
 12: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 13:   onload="Init(evt)" onzoom="ZoomControl()">
 14: 
 15:   <title>SVG Learning By Coding</title>
 16:   <desc>SVG-Spezifikation in Beispielen</desc>
 17: 
 18:   <defs>
 19: 
 20:     <style type="text/css">
 21:       <![CDATA[
 22:       /* interne CSS-Definitionen */
 23: 
 24:       .info
 25:       {
 26:         fill#000;
 27:         font-size24px;
 28:       }
 29: 
 30:       a text
 31:       {
 32:         fill#F00;
 33:         font-size12px;
 34:       }
 35: 
 36:       tspan
 37:       {
 38:         fill#000;
 39:         font-size14px;
 40:       }
 41: 
 42:       ]]>
 43:     </style>
 44: 
 45:     <script type="text/javascript">
 46:       <![CDATA[
 47:       /* interne Script-Definitionen */
 48: 
 49:       // globale Variablen
 50:       var svgdoc,svgroot,coordsout,timeout,
 51:           svgns="http://www.w3.org/2000/svg";
 52: 
 53: 			
 54:       function Init(load_evt)
 55:       {
 56:         svgdoc=load_evt.target.ownerDocument;
 57:         svgroot=svgdoc.documentElement;
 58:         svgroot.addEventListener("mousemove",Coords,false);
 59:         coordsout=svgdoc.getElementById("coordsout");
 60:         timeout=svgdoc.getElementById("timeout");
 61:         Uhrzeit();
 62:       }
 63: 
 64: 
 65:       function getElementsLength(elem)
 66:       {
 67:         var obj,objlength;
 68:         obj=svgdoc.getElementById("rechtecke").getElementsByTagName(elem);
 69:         objlength=obj.length;
 70:         alert("Gruppe mit id=\"rechtecke\"\nAnzahl "+elem+"-Elemente: "+objlength);        
 71:       }
 72: 
 73: 
 74:       function ElementInfo(click_evt)
 75:       {
 76:         var attr,attrstr="",prevsib="",nextsib="";
 77:         attr=click_evt.target.attributes;
 78:         for(i=0;i<attr.length;i++)attrstr+="\n    ("+i+")  "+attr.item(i).nodeName+" : "+attr.item(i).nodeValue;
 79:         if(click_evt.target.previousSibling)prevsib=click_evt.target.previousSibling+" -- nodeType: "+click_evt.target.previousSibling.nodeType;
 80:         else prevsib="nicht vorhanden";
 81:         if(click_evt.target.nextSibling)nextsib=click_evt.target.nextSibling+" -- nodeType: "+click_evt.target.nextSibling.nodeType;
 82:         else nextsib="nicht vorhanden";
 83:         alert("Ereignis: (evt): "+click_evt+" (evt.type): "+click_evt.type+"\n\nAusloeser: (evt.target): "+click_evt.target+"\nTag-Name (evt.target.tagName): "+click_evt.target.tagName+"\n\nEltern-Element (evt.target.parentNode): "+click_evt.target.parentNode+"\nTag-Name (evt.target.parentNode.tagName): "+click_evt.target.parentNode.tagName+"\n\nKind-Knoten (evt.target.childNodes.length): "+click_evt.target.childNodes.length+"\n\nAttribute (evt.target.attributes): "+attr+"\nAnzahl (evt.target.attributes.length): "+attr.length+"\n\n    item(i)  nodeValue : nodeName"+attrstr+"\n\npreviousSibling: "+prevsib+"\nnextSibling: "+nextsib);
 84:       }
 85: 
 86: 
 87:       function setCSSProperty(objid,prop,val)
 88:       {
 89:         var obj,objstyle,curval;
 90:         obj=svgdoc.getElementById(objid);
 91:         objstyle=obj.style;
 92:         curval=objstyle.getPropertyValue("fill");
 93:         alert("Aktueller Wert\nfill: "+curval);
 94:         objstyle.setProperty(prop,val,"");
 95:         curval=objstyle.getPropertyValue("fill");
 96:         alert("Neuer Wert\nfill: "+curval);
 97:       }
 98: 
 99: 
100:       function setElementsStyle(elem,prop,val)
101:       {
102:         var obj,objlength,objstyle;
103:         obj=svgdoc.getElementById("rechtecke").getElementsByTagName(elem);
104:         objlength=obj.length;
105:         for(var i=0;i<objlength;i++)
106:         {
107:           objstyle=obj.item(i).style;
108:           objstyle.setProperty(prop,val,"");
109:         }
110:       }
111: 
112: 
113:       function getAttrById(objid,attr)
114:       {
115:         var obj,attrval;
116:         obj=svgdoc.getElementById(objid);
117:         attrval=obj.getAttribute(attr);
118:         alert("Attribut: "+attr+"\nWert: "+attrval);
119:       }
120: 
121: 
122:       function setAttrById(objid,attr,attrval)
123:       {
124:         var obj;
125:         obj=svgdoc.getElementById(objid);
126:         obj.setAttribute(attr,attrval);
127:       }
128: 
129: 
130:       function setAttrByTagName(elem,objitem,attr,attrval)
131:       {
132:         var obj;
133:         obj=svgdoc.getElementById("rechtecke").getElementsByTagName(elem);
134:         obj.item(objitem).setAttribute(attr,attrval);
135:       }
136: 
137: 
138:       function getTextValue(parentid,childelem,node)
139:       {
140:         var parentobj,childobj,textnode,textval;
141:         parentobj=svgdoc.getElementById(parentid);
142:         childobj=parentobj.getElementsByTagName(childelem);
143:         if(childobj.item(node))
144:         {
145:           textnode=childobj.item(node).childNodes.item(0);
146:           // oder textnode=childobj.item(node).firstChild;
147:           textval=textnode.data;
148:           alert(textval);
149:         }
150:         else alert("Textobjekt nicht verfügbar.");
151:       }
152: 
153: 
154:       function setTextValue(parentid,childelem,node,textval)
155:       {
156:         var parentobj,childobj,textnode;
157:         parentobj=svgdoc.getElementById(parentid);
158:         childobj=parentobj.getElementsByTagName(childelem);
159:         if(childobj.item(node))
160:         {
161:           textnode=childobj.item(node).childNodes.item(0);
162:           // oder textnode=childobj.item(node).firstChild;
163:           childobj.item(node).style.setProperty("fill","#F90","");
164:           textnode.data=textval;
165:         }
166:         else alert("Textobjekt nicht verfügbar.");
167:       }
168: 
169: 
170:       function getTextLength(parentid,childelem,node)
171:       {
172:         var parentobj,childobj,textlength;
173:         parentobj=svgdoc.getElementById(parentid);
174:         childobj=parentobj.getElementsByTagName(childelem);
175:         if(childobj.item(node))
176:         {
177:           textlength=childobj.item(node).getComputedTextLength();
178:           alert("Textlänge: "+textlength+" Pixel");
179:         }
180:         else alert("Textobjekt nicht verfügbar.");
181:       }
182: 
183: 
184:       function setHover(overout_evt,flag)
185:       {
186:         var obj,objstyle,fillcol,textdecor;
187:         obj=overout_evt.target;
188:         objstyle=obj.style;
189:         if(flag==1)
190:         {
191:           fillcol="#00C";
192:           textdecor="underline";
193:         }
194:         else if(flag==0)
195:         {
196:           fillcol="#F00";
197:           textdecor="none";
198:         }
199:         objstyle.setProperty("fill",fillcol,"");
200:         objstyle.setProperty("text-decoration",textdecor,"");
201:       }
202: 
203: 
204:       function newElement(elem,attr1,attr2,attr3,attr4,attr5,attr6)
205:       {
206:         var newobj;
207:         newobj=svgdoc.createElementNS(svgns,elem);
208:         newobj.setAttribute("x1",attr1);
209:         newobj.setAttribute("y1",attr2);
210:         newobj.setAttribute("x2",attr3);
211:         newobj.setAttribute("y2",attr4);
212:         newobj.setAttribute("style","fill:"+attr5+";stroke:"+attr5+";stroke-width:"+attr6);
213:         newobj.setAttribute("onclick","ElementInfo(evt)");
214:         svgroot.appendChild(newobj);
215:       }
216: 
217: 
218:       function newTextNode(objid,elem,attr1,attr2,textval)
219:       {
220:         var parentobj,newobj,newtextnode;
221:         parentobj=svgdoc.getElementById(objid);
222:         newobj=svgdoc.createElementNS(svgns,elem);
223:         newobj.setAttribute("x",attr1);
224:         newobj.setAttribute("dy",attr2);
225:         newtextnode=svgdoc.createTextNode(textval);
226:         parentobj.appendChild(newobj).appendChild(newtextnode);
227:       }
228: 
229: 
230:       function ShowTooltip(e,txt)
231:       {
232:         var ttrelem,ttrelem,posx,posy,curtrans,ctx,cty;
233:         ttrelem=svgdoc.getElementById("ttr");
234:         tttelem=svgdoc.getElementById("ttt");
235:         tttelem.childNodes.item(0).data=txt;
236:         posx=e.clientX;
237:         posy=e.clientY;
238:         curtrans=svgroot.currentTranslate;
239:         ctx=curtrans.x;
240:         cty=curtrans.y;
241:         ttrelem.setAttribute("x",posx-ctx);
242:         ttrelem.setAttribute("y",posy-cty-20);
243:         tttelem.setAttribute("x",posx-ctx+5);
244:         tttelem.setAttribute("y",posy-cty-8);
245:         ttrelem.setAttribute("width",tttelem.getComputedTextLength());
246:         tttelem.setAttribute("style","fill: #0000CC; font-size: 11px; visibility: visible");
247:         ttrelem.setAttribute("style","fill: #FFFFCC; stroke: #000000; stroke-width: 0.5px; visibility: visible");
248:       }
249: 
250: 
251:       function HideTooltip()
252:       {
253:         var ttrelem,ttrelem;
254:         ttrelem=svgdoc.getElementById("ttr");
255:         tttelem=svgdoc.getElementById("ttt");
256:         ttrelem.setAttribute("style","visibility: hidden");
257:         tttelem.setAttribute("style","visibility: hidden");
258:       }
259: 
260: 
261:       function ZoomControl()
262:       {
263:         var curzoom;
264:         curzoom=svgroot.currentScale;
265:         svgdoc.getElementById("tooltip").setAttribute("transform","scale("+1/curzoom+")");
266:       }
267: 
268: 
269:       function Coords(mousemove_event)
270:       {
271:         var x,y;
272:         x=mousemove_event.clientX;
273:         y=mousemove_event.clientY;
274:         coordsout.firstChild.nodeValue="x: "+x+"  |  y: "+y;
275:       }
276: 
277: 
278:       function ShowHideCoords()
279:       {
280:         if(coordsout.style.getPropertyValue("visibility")=="visible")
281:         coordsout.style.setProperty("visibility","hidden","");
282:         else coordsout.style.setProperty("visibility","visible","");
283:       }
284: 
285: 
286:       function Uhrzeit()
287:       {
288:         var datumzeit,temp,zeit;
289:         datumzeit=new Date().toLocaleString();
290:         temp=datumzeit.lastIndexOf(" ");
291:         zeit=datumzeit.substring(temp+1,datumzeit.length);
292:         timeout.firstChild.nodeValue=zeit;
293:         setTimeout("Uhrzeit()",1000);
294:       }
295: 
296: 
297:       function RemoveTspanElement()
298:       {
299:         var objtext,objtspan,tspanlength;
300:         objtext=svgdoc.getElementById("textblock");
301:         objtspan=objtext.getElementsByTagName("tspan");
302:         tspanlength=objtspan.length;
303:         if(tspanlength>0)objtext.removeChild(objtspan.item(tspanlength-1));
304:         else alert("Kein tspan-Element zum\nEntfernen verfügbar.");       
305:       }
306: 
307:       ]]>
308: 
309:     </script>
310: 
311:     <!-- hier ggfexterne Script-Definitionen
312:     <script xlink:href="datei.js" type="text/javascript"/>
313:     -->
314: 
315:     <!-- hier ggfweitere SVG-Definitionen -->
316: 
317:   </defs>
318: 
319:   <rect x="35" y="10" rx="5" width="470" height="450" style="fill: #FFF; stroke: #9CF; stroke-width: 2px"/>
320:   <text class="info" x="50" y="40">SVG-DOM-Scripting kompakt</text>
321: 
322:   <g id="rechtecke">
323:     <rect x="60" y="90" width="100" height="50" style="fill: #F00" onclick="ElementInfo(evt)"/><rect x="205" y="80" width="60" height="130" style="fill: #090" onclick="ElementInfo(evt)"/><rect x="110" y="160" width="80" height="80" style="fill: #00C" transform="rotate(45,110,160)" onclick="ElementInfo(evt)"/>
324:   </g>
325: 
326:   <circle id="kreis" cx="390" cy="120" r="50" stroke="#00C" style="fill: #FF0" onmouseup="ElementInfo(evt)"/>
327: 
328:   <text id="textblock" x="0" y="200" onclick="ElementInfo(evt)">
329:     <tspan x="310" dy="20">Das ist der erste Testtext.</tspan>
330:     <tspan x="310" dy="20">Das ist der zweite Testtext.</tspan>
331:     <tspan x="310" dy="20">Das ist der dritte Testtext.</tspan>
332:   </text>
333: 
334:   <g style="font-size: 12px">
335:     <text id="coordsout" x="180" y="320" style="fill: #00C; visibility: hidden" onclick="ElementInfo(evt)"> </text>
336:     <text id="timeout" x="445" y="35" style="fill: #00C" onclick="ElementInfo(evt)"> </text>
337:   </g>
338: 
339:   <a xlink:href="" cursor="pointer" onclick="return false"><text x="50" y="320" onmouseover="setHover(evt,1)" onmouseout="setHover(evt,0)" onclick="ShowHideCoords()">Koordinaten (an/aus): </text></a>
340:   <a xlink:href="http://www.datenverdrahten.de/svglbc/" target="_top"><text x="350" y="320" onmouseover="setHover(evt,1);ShowTooltip(evt,'SVG - Learning By Coding')" onmouseout="setHover(evt,0);HideTooltip()">Link mit Tooltip-Anzeige</text></a>
341: 
342:   <a xlink:href="" cursor="pointer" onclick="return false"><text x="50" y="350" onmouseover="setHover(evt,1)" onmouseout="setHover(evt,0)" onclick="getElementsLength('rect')">Anzahl Rechtecke</text></a>
343:   <a xlink:href="" cursor="pointer" onclick="return false"><text x="180" y="350" onmouseover="setHover(evt,1)" onmouseout="setHover(evt,0)" onclick="setCSSProperty('kreis','fill','#F00')">neue Kreis-Farbe (rot)</text></a>
344:   <a xlink:href="" cursor="pointer" onclick="return false"><text x="350" y="350" onmouseover="setHover(evt,1)" onmouseout="setHover(evt,0)" onclick="setElementsStyle('rect','fill-opacity',0.4)">Rechteckefill-opacity0.4</text></a>
345: 
346:   <a xlink:href="" cursor="pointer" onclick="return false"><text x="50" y="380" onmouseover="setHover(evt,1)" onmouseout="setHover(evt,0)" onclick="getAttrById('kreis','r')">Radius des Kreises</text></a>
347:   <a xlink:href="" cursor="pointer" onclick="return false"><text x="180" y="380" onmouseover="setHover(evt,1)" onmouseout="setHover(evt,0)" onclick="setAttrById('kreis','r','70')">neuer Kreis-Radius</text></a>
348:   <a xlink:href="" cursor="pointer" onclick="return false"><text x="350" y="380" onmouseover="setHover(evt,1)" onmouseout="setHover(evt,0)" onclick="setAttrByTagName('rect',1,'height','200')">neue Rechteck-Höhe</text></a>
349: 
350:   <a xlink:href="" cursor="pointer" onclick="return false"><text x="50" y="410" onmouseover="setHover(evt,1)" onmouseout="setHover(evt,0)" onclick="getTextValue('textblock','tspan',1)">Wert von Testtext 2</text></a>
351:   <a xlink:href="" cursor="pointer" onclick="return false"><text x="180" y="410" onmouseover="setHover(evt,1)" onmouseout="setHover(evt,0)" onclick="setTextValue('textblock','tspan',1,'Ein anderer Text.')">Testtext 2 ersetzen</text></a>
352:   <a xlink:href="" cursor="pointer" onclick="return false"><text x="350" y="410" onmouseover="setHover(evt,1)" onmouseout="setHover(evt,0)" onclick="getTextLength('textblock','tspan',1)">Länge von Texttext 2</text></a>
353: 
354:   <a xlink:href="" cursor="pointer" onclick="return false"><text x="50" y="440" onmouseover="setHover(evt,1)" onmouseout="setHover(evt,0)" onclick="newElement('line','50','295','490','295','#CCC','2px')">neues Element (line)</text></a>
355:   <a xlink:href="" cursor="pointer" onclick="return false"><text x="180" y="440" onmouseover="setHover(evt,1)" onmouseout="setHover(evt,0)" onclick="newTextNode('textblock','tspan','310','20','Das ist ein weiterer Testtext.')">neues tspan mit Textknoten</text></a>
356:   <a xlink:href="" cursor="pointer" onclick="return false"><text x="350" y="440" onmouseover="setHover(evt,1)" onmouseout="setHover(evt,0)" onclick="RemoveTspanElement()">tspan-Elemente entfernen</text></a>
357:   
358:   <g id="tooltip"><!-- Tooltip Beginn (ttr=Tooltip-Rechteckttt=Tooltip-Text) -->
359:     <rect id="ttr" x="0" y="0" rx="5" ry="5" width="100" height="16" style="visibility: hidden"/>
360:     <text id="ttt" x="0" y="0" style="visibility: hidden">dynText</text>
361:   </g><!-- Tooltip Ende -->
362: 
363:   <!-- hier ggfweitere Grafik-Inhalte -->
364:   
365: </svg>

[zum Anfang]