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 10/03 - thomas@handmadecode.de -->
9:
10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
11: zoomAndPan="disable" onload="getSVGDoc(evt)">
12:
13: <title>SVG - Learning by Coding</title>
14: <desc>SVG-Spezifikation in Beispielen</desc>
15:
16: <defs>
17:
18: <style type="text/css">
19: <![CDATA[
20:
21: *
22: {
23: font-family: sans-serif;
24: font-size: 12px;
25: }
26:
27: ]]>
28: </style>
29:
30:
31: <script type="text/javascript">
32: <![CDATA[
33:
34: // globale Variablen
35: var svgdoc,svgroot,newline,newcircle,newrect,posx,posy,startx,starty,anzahl;
36: var aktfill,aktline,radius,maxradius,grid,drawing,shape,shapes,shapeobj,shapetag;
37: var posminx=50,posminy=50,zbreite=640,zhoehe=480,gridbox=20,gr=true,check=false;
38: var curshape="l",linecol="#000",fillcol="none",linewidth="1px",ausgabe="";
39: var svgns="http://www.w3.org/2000/svg";
40:
41:
42: function getSVGDoc(load_evt)
43: {
44: svgdoc=load_evt.target.ownerDocument;
45: svgroot=svgdoc.rootElement;
46:
47: aktfill=svgdoc.getElementById("aktfill");
48: aktline=svgdoc.getElementById("aktline");
49: drawing=svgdoc.getElementById("drawing");
50: grid=svgdoc.getElementById("grid");
51: shape=svgdoc.getElementById("shape");
52:
53: svgroot.addEventListener("mousedown",MDown,false);
54: svgroot.addEventListener("mousemove",MMove,false);
55: svgroot.addEventListener("mouseup",MUp,false);
56:
57: DrawGrid(zbreite,zhoehe,posminx,posminy,gridbox);
58: }
59:
60:
61: function MDown(mousedown_event)
62: {
63: fillcol=aktfill.style.getPropertyValue("fill");
64: linecol=aktline.style.getPropertyValue("stroke");
65:
66: Coords(mousedown_event);
67: startx=posx;
68: starty=posy;
69:
70: if(curshape=="l")StartLine();
71: if(curshape=="c")StartCircle();
72: if(curshape=="r")StartRect();
73:
74: check=true;
75: }
76:
77:
78: function MMove(mousemove_event)
79: {
80: if(check)
81: {
82: Coords(mousemove_event);
83: if(Math.abs(startx-posx)>0 && Math.abs(starty-posy)>0)
84: {
85: if(curshape=="l")FinishLine();
86: if(curshape=="c")FinishCircle();
87: if(curshape=="r")FinishRect();
88: }
89: }
90: }
91:
92:
93: function MUp()
94: {
95: check=false;
96: }
97:
98:
99: function StartLine()
100: {
101: newline=svgdoc.createElementNS(svgns,"line");
102: newline.setAttribute("x1",posx);
103: newline.setAttribute("x2",posx);
104: newline.setAttribute("y1",posy);
105: newline.setAttribute("y2",posy);
106: newline.setAttribute("stroke",linecol);
107: newline.setAttribute("stroke-width",linewidth);
108: }
109:
110:
111: function FinishLine()
112: {
113: newline.setAttribute("x2",posx);
114: newline.setAttribute("y2",posy);
115: drawing.appendChild(newline);
116: }
117:
118:
119: function StartCircle()
120: {
121: radius=0;
122: newcircle=svgdoc.createElementNS(svgns,"circle");
123: newcircle.setAttribute("cx",posx);
124: newcircle.setAttribute("cy",posy);
125: newcircle.setAttribute("r",radius);
126: newcircle.setAttribute("fill",fillcol);
127: newcircle.setAttribute("stroke",linecol);
128: newcircle.setAttribute("stroke-width",linewidth);
129: }
130:
131:
132: function FinishCircle()
133: {
134: radius=parseInt(Math.sqrt(Math.pow(posx-startx,2)+Math.pow(posy-starty,2)));
135: maxradius=Math.min(Math.min(startx-posminx,zbreite-(startx-posminx)),Math.min(starty-posminy,zhoehe-(starty-posminy)));
136: if(radius>maxradius)radius=maxradius;
137: newcircle.setAttribute("r",radius);
138: drawing.appendChild(newcircle);
139: }
140:
141:
142: function StartRect()
143: {
144: newrect=svgdoc.createElementNS(svgns,"rect");
145: newrect.setAttribute("x",posx);
146: newrect.setAttribute("y",posy);
147: newrect.setAttribute("width","0");
148: newrect.setAttribute("height","0");
149: newrect.setAttribute("fill",fillcol);
150: newrect.setAttribute("stroke",linecol);
151: newrect.setAttribute("stroke-width",linewidth);
152: }
153:
154:
155: function FinishRect()
156: {
157: w=parseInt(posx-startx);
158: h=parseInt(posy-starty);
159: newrect.setAttribute("width",w);
160: newrect.setAttribute("height",h);
161: drawing.appendChild(newrect);
162: }
163:
164:
165: function Coords(mouse_event)
166: {
167: posx=mouse_event.clientX;
168: posy=mouse_event.clientY;
169:
170: if(posx<posminx)posx=posminx;
171: if(posy<posminy)posy=posminy;
172: if(posx>zbreite+posminx)posx=zbreite+posminx;
173: if(posy>zhoehe+posminy)posy=zhoehe+posminy;
174: }
175:
176:
177: function SetColors(mousedown_event)
178: {
179: setcol=mousedown_event.target.style.getPropertyValue("fill");
180: if(setcol=="#FFF")setcol="none";
181:
182: if(curshape=="l")aktline.style.setProperty("stroke",setcol,"");
183: else if(curshape=="c")aktfill.style.setProperty("fill",setcol,"");
184: else if(curshape=="r")aktfill.style.setProperty("fill",setcol,"");
185: }
186:
187:
188: function SetLineWidth(mousedown_event)
189: {
190: linewidth=mousedown_event.target.style.getPropertyValue("stroke-width");
191: aktline.style.setProperty("stroke-width",linewidth,"");
192: }
193:
194:
195: function SetShape(mousedown_event)
196: {
197: shapetag=mousedown_event.target.tagName;
198: shapeobj=shape.childNodes;
199:
200: for(i=0;i<shapeobj.length;i++)
201: {
202: if(shapeobj.item(i).tagName==shapetag)
203: {
204: curshape=shapetag.charAt(0);
205: shapeobj.item(i).style.setProperty("stroke-width","3px","");
206: }
207: else if(shapeobj.item(i).nodeType==1)
208: {
209: shapeobj.item(i).style.setProperty("stroke-width","1px","");
210: }
211: }
212: }
213:
214:
215: function UndoLastShape()
216: {
217: shapes=drawing.childNodes;
218: anzahl=shapes.length;
219: if(anzahl>0)drawing.removeChild(drawing.lastChild);
220: }
221:
222:
223: function ClearDrawing()
224: {
225: shapes=drawing.childNodes;
226: anzahl=shapes.length;
227:
228: // fuer IE
229: if(anzahl>0)
230: {
231: if(top.confirm && top.confirm("Zeichnung löschen?"))
232: {
233: for(i=0;i<anzahl;i++)drawing.removeChild(drawing.lastChild);
234: }
235: else if(!top.confirm)alert("Zeichnung kann nicht gelöscht werden!");
236: }
237: }
238:
239:
240: function ShowHideGrid()
241: {
242: if(gr)
243: {
244: grid.style.setProperty("visibility","hidden","");
245: gr=false;
246: }
247: else
248: {
249: grid.style.setProperty("visibility","visible","");
250: gr=true;
251: }
252: }
253:
254:
255: function Copy2Clipboard()
256: {
257: shapes=drawing.childNodes;
258: anzahl=shapes.length;
259:
260: // fuer IE
261: if(top.clipboardData && anzahl>0)
262: {
263: ausgabe="xml version=\"1.0\" encoding=\"ISO-8859-1\" standalone=\"no\"?>\r\n";
264: ausgabe+="<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.0//EN\"\r\n";
265: ausgabe+=" \"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd\">\r\n\r\n";
266: ausgabe+="<svg xmlns=\"http://www.w3.org/2000/svg\">\r\n\r\n";
267: ausgabe+=" <title>SVG - Learning by Coding | http://www.datenverdrahten.de/svglbc/</title>\r\n";
268: ausgabe+=" <desc>Beispiel Grafikobjekte zeichnen</desc>\r\n";
269:
270: for(i=0;i<anzahl;i++)
271: {
272: ausgabe+="\r\n "+printNode(shapes.item(i));
273: }
274:
275: ausgabe+="\r\n\r\n</svg>\r\n";
276: ausgabe+="\r\n<!-- generated by http://www.datenverdrahten.de/svglbc/?doc=drawshapes -->\r\n";
277:
278: top.clipboardData.setData("Text",ausgabe);
279: alert("Der erzeugte SVG-Code wurde\nin die Zwischenablage kopiert.");
280: }
281: else alert("Kopieren in die Zwischenablage nicht\nmöglich oder keine Objekte vorhanden!");
282: }
283:
284:
285: function DrawGrid(breite,hoehe,xstart,ystart,step)
286: {
287: // lokale Variablen
288: var hmax,vmax,xs,xe,ys,ye,i,gridline;
289:
290: hmax=parseInt(breite/step);
291: vmax=parseInt(hoehe/step);
292: xs=xstart;
293: xe=xstart+breite;
294: ys=ystart;
295: ye=ystart+hoehe;
296:
297: for(i=1;i<vmax;i++)
298: {
299: gridline=svgdoc.createElementNS(svgns,"line");
300: gridline.setAttribute("x1",xs);
301: gridline.setAttribute("x2",xe);
302: gridline.setAttribute("y1",ys+i*step);
303: gridline.setAttribute("y2",ys+i*step);
304: grid.appendChild(gridline);
305: }
306:
307: for(i=1;i<hmax;i++)
308: {
309: gridline=svgdoc.createElementNS(svgns,"line");
310: gridline.setAttribute("x1",xs+i*step);
311: gridline.setAttribute("x2",xs+i*step);
312: gridline.setAttribute("y1",ys);
313: gridline.setAttribute("y2",ye);
314: grid.appendChild(gridline);
315: }
316: }
317:
318: ]]>
319: </script>
320:
321: </defs>
322:
323: <!-- Ueberschrift -->
324: <text x="30" y="30" style="fill: #000; font-size: 24px">
325: Grafikobjekte zeichnen (mit Wahl von Farbe und Strichstärke)</text>
326:
327: <!-- Zeichenflaeche -->
328: <rect x="50" y="50" width="640" height="480" rx="5" ry="5"
329: style="fill: #FFF; stroke: #000"/>
330:
331: <!-- Raster auf der Zeichenflaeche (dynamisch erzeugt) -->
332: <g id="grid" style="stroke: #000; stroke-width: 0.2px; visibility: visible"></g>
333:
334: <!-- Ausgabe der Zeichnungsobjekte (dynamisch erzeugt) -->
335: <g id="drawing"></g>
336:
337: <!-- Werkzeugleiste zur Auswahl der Farbe -->
338: <text x="5" y="60" style="fill: #00C; pointer-events: none">Colors</text>
339:
340: <rect id="aktfill" x="10" y="70" width="10" height="160"
341: style="stroke: #000; fill: none"/>
342:
343: <g onclick="SetColors(evt)">
344:
345: <rect x="30" y="70" width="10" height="10"
346: style="fill: #FFF; stroke: #000"/>
347:
348: <rect x="30" y="85" width="10" height="10"
349: style="fill: #FF0; stroke: #000"/>
350:
351: <rect x="30" y="100" width="10" height="10"
352: style="fill: #FC0; stroke: #000"/>
353:
354: <rect x="30" y="115" width="10" height="10"
355: style="fill: #F69; stroke: #000"/>
356:
357: <rect x="30" y="130" width="10" height="10"
358: style="fill: #F00; stroke: #000"/>
359:
360: <rect x="30" y="145" width="10" height="10"
361: style="fill: #9F9; stroke: #000"/>
362:
363: <rect x="30" y="160" width="10" height="10"
364: style="fill: #090; stroke: #000"/>
365:
366: <rect x="30" y="175" width="10" height="10"
367: style="fill: #39F; stroke: #000"/>
368:
369: <rect x="30" y="190" width="10" height="10"
370: style="fill: #00C; stroke: #000"/>
371:
372: <rect x="30" y="205" width="10" height="10"
373: style="fill: #CCC; stroke: #000"/>
374:
375: <rect x="30" y="220" width="10" height="10"
376: style="fill: #000; stroke: #000"/>
377:
378: </g>
379:
380: <!-- Werkzeugleiste zur Auswahl der Linienstaerke -->
381: <text x="5" y="250" style="fill: #00C; pointer-events: none">Strokes</text>
382:
383: <line id="aktline" x1="15" y1="258" x2="15" y2="323"
384: style="stroke: #000; stroke-width: 1px"/>
385:
386: <g onclick="SetLineWidth(evt)">
387:
388: <line x1="30" y1="260" x2="40" y2="260"
389: style="stroke: #000; stroke-width: 1px"/>
390:
391: <line x1="30" y1="275" x2="40" y2="275"
392: style="stroke: #000; stroke-width: 2px"/>
393:
394: <line x1="30" y1="290" x2="40" y2="290"
395: style="stroke: #000; stroke-width: 3px"/>
396:
397: <line x1="30" y1="305" x2="40" y2="305"
398: style="stroke: #000; stroke-width: 4px"/>
399:
400: <line x1="30" y1="320" x2="40" y2="320"
401: style="stroke: #000; stroke-width: 5px"/>
402:
403: </g>
404:
405: <!-- Werkzeugleiste zur Auswahl der Zeichenobjekte -->
406: <text x="5" y="345" style="fill: #00C; pointer-events: none">Shapes</text>
407:
408: <g id="shape" onclick="SetShape(evt)">
409:
410: <!-- Linie -->
411: <line id="l" x1="15" y1="375" x2="35" y2="355"
412: style="stroke: #000; stroke-width: 3px"/>
413:
414: <!-- Kreis -->
415: <circle id="c" cx="25" cy="395" r="10"
416: style="stroke: #000; stroke-width: 1px; fill: #FFF"/>
417:
418: <!-- Rechteck -->
419: <rect id="r" x="15" y="420" width="20" height="20"
420: style="stroke: #000; stroke-width: 1px; fill: #FFF"/>
421:
422: </g>
423:
424: <!-- Werkzeugleiste zur Auswahl von Zusatzfunktionen -->
425: <text x="5" y="463" style="fill: #00C; pointer-events: none">Options</text>
426:
427: <!-- Zeichenobjekte einzeln entfernen -->
428: <a xlink:href="" cursor="pointer" onclick="return false">
429: <text x="5" y="480" onclick="UndoLastShape()">> Undo
430: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
431: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
432: </text>
433: </a>
434:
435: <!-- Zeichnung loeschen -->
436: <a xlink:href="" cursor="pointer" onclick="return false">
437: <text x="5" y="495" onclick="ClearDrawing()">> Clear
438: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
439: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
440: </text>
441: </a>
442:
443: <!-- Erzeugten SVG-Code in die Zwischenablage kopieren -->
444: <a xlink:href="" cursor="pointer" onclick="return false">
445: <text x="5" y="510" onclick="Copy2Clipboard()">> Copy
446: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
447: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
448: </text>
449: </a>
450:
451: <!-- Zeichenraster aus- bzw. einschalten (am Anfang eingeschaltet) -->
452: <a xlink:href="" cursor="pointer" onclick="return false">
453: <text x="5" y="525" onclick="ShowHideGrid()">> Grid
454: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
455: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
456: </text>
457: </a>
458:
459: </svg>
[zum Anfang]
