SVG – Learning by Coding

[ drawlines.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:     <script type="text/javascript">
 19:       <![CDATA[
 20: 
 21:       var svgdoc,svgroot,newline,posx,posy,posmin=50,drawing;
 22:       var linecol="#000",linewidth="1px",check=false;
 23:       var svgns="http://www.w3.org/2000/svg";
 24: 
 25: 
 26:       function getSVGDoc(load_evt)
 27:       {
 28:         svgdoc=load_evt.target.ownerDocument;
 29:         svgroot=svgdoc.rootElement;
 30: 
 31:         drawing=svgdoc.getElementById("drawing");
 32: 
 33:         svgroot.addEventListener("mousedown",MDown,false);
 34:         svgroot.addEventListener("mousemove",MMove,false);
 35:         svgroot.addEventListener("mouseup",MUp,false);
 36:       }
 37: 
 38: 
 39:       function MDown(mousedown_event)
 40:       {
 41:         Coords(mousedown_event);
 42: 
 43:         newline=svgdoc.createElementNS(svgns,"line");
 44:         newline.setAttribute("x1",posx);
 45:         newline.setAttribute("x2",posx);
 46:         newline.setAttribute("y1",posy);
 47:         newline.setAttribute("y2",posy);
 48:         newline.setAttribute("stroke",linecol);
 49:         newline.setAttribute("stroke-width",linewidth);
 50: 
 51:         check=true;
 52:       }
 53: 
 54: 
 55:       function MMove(mousemove_event)
 56:       {
 57:         if(check)
 58:         {
 59:           Coords(mousemove_event);
 60: 
 61:           newline.setAttribute("x2",posx);
 62:           newline.setAttribute("y2",posy);
 63:           drawing.appendChild(newline);
 64:        }
 65:       }
 66: 
 67: 
 68:       function MUp()
 69:       {
 70:         check=false;
 71:       }
 72: 
 73: 
 74:       function Coords(mouse_event)
 75:       {
 76:         posx=mouse_event.clientX;
 77:         posy=mouse_event.clientY;
 78: 
 79:         if(posx<posmin)posx=posmin;
 80:         if(posy<posmin)posy=posmin;
 81:         if(posx>640+posmin)posx=640+posmin;
 82:         if(posy>480+posmin)posy=480+posmin;
 83:       }
 84: 
 85: 
 86:       function SetLineColor(mousedown_event)
 87:       {
 88:         linecol=mousedown_event.target.style.getPropertyValue("fill");
 89:         svgdoc.getElementById("aktline").style.setProperty("stroke",linecol,"");
 90:       }
 91: 
 92: 
 93:       function SetLineWidth(mousedown_event)
 94:       {
 95:         linewidth=mousedown_event.target.style.getPropertyValue("stroke-width");
 96:         svgdoc.getElementById("aktline").style.setProperty("stroke-width",linewidth,"");
 97:       }
 98: 
 99:       ]]>
100:     </script>
101: 
102:   </defs>
103: 
104:   <text x="30" y="30" style="fill: #000; font-size: 24px">
105:     Linien zeichnen (mit Wahl von Farbe und Strichstärke)</text>
106: 
107:   <rect x="50" y="50" width="640" height="480" rx="5" ry="5"
108:     style="fill: #FFF; stroke: #000"/>
109: 
110:   <g onmousedown="SetLineColor(evt)">
111: 
112:     <rect x="30" y="60" width="10" height="10"
113:       style="fill: #FF0; stroke: #000"/>
114: 
115:     <rect x="30" y="80" width="10" height="10"
116:       style="fill: #F00; stroke: #000"/>
117: 
118:     <rect x="30" y="100" width="10" height="10"
119:       style="fill: #090; stroke: #000"/>
120: 
121:     <rect x="30" y="120" width="10" height="10"
122:       style="fill: #00C; stroke: #000"/>
123: 
124:     <rect x="30" y="140" width="10" height="10"
125:       style="fill: #000; stroke: #000"/>
126: 
127:   </g>
128: 
129:   <g onmousedown="SetLineWidth(evt)">
130: 
131:     <line x1="30" y1="180" x2="40" y2="180"
132:       style="stroke: #000; stroke-width: 1px"/>
133: 
134:     <line x1="30" y1="200" x2="40" y2="200"
135:       style="stroke: #000; stroke-width: 2px"/>
136: 
137:     <line x1="30" y1="220" x2="40" y2="220"
138:       style="stroke: #000; stroke-width: 3px"/>
139: 
140:     <line x1="30" y1="240" x2="40" y2="240"
141:       style="stroke: #000; stroke-width: 4px"/>
142: 
143:     <line x1="30" y1="260" x2="40" y2="260"
144:       style="stroke: #000; stroke-width: 5px"/>
145: 
146:   </g>
147: 
148:   <line id="aktline" x1="18" y1="58" x2="18" y2="262"
149:     style="stroke: #000; stroke-width: 1px"/>
150: 
151:   <!-- Ausgabe der Zeichnungsobjekte -->
152:   <g id="drawing"></g>
153: 
154: </svg>

[zum Anfang]