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: <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]
