SVG – Learning by Coding

[ drawshapes.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 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-familysans-serif;
 24:         font-size12px;
 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)>&& 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()">&gt; 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()">&gt; 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()">&gt; 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 ausbzweinschalten (am Anfang eingeschaltet) -->
452:   <a xlink:href="" cursor="pointer" onclick="return false">
453:     <text x="5" y="525" onclick="ShowHideGrid()">&gt; 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]