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]
