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:
5: <!-- hier ggf. externe CSS-Definitionen
6: <?xml-stylesheet href="datei.css" type="text/css"?>
7: -->
8:
9: <!-- SVG - Learning by Coding - http://www.datenverdrahten.de/svglbc/ -->
10: <!-- Author: Dr. Thomas 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-size: 24px;
28: }
29:
30: a text
31: {
32: fill: #F00;
33: font-size: 12px;
34: }
35:
36: tspan
37: {
38: fill: #000;
39: font-size: 14px;
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 ggf. externe Script-Definitionen
312: <script xlink:href="datei.js" type="text/javascript"/>
313: -->
314:
315: <!-- hier ggf. weitere 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)">Rechtecke: fill-opacity: 0.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-Rechteck, ttt=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">dyn. Text</text>
361: </g><!-- Tooltip - Ende -->
362:
363: <!-- hier ggf. weitere Grafik-Inhalte -->
364:
365: </svg>
[zum Anfang]
