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]
