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 05/03 - thomas@handmadecode.de -->
9:
10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
11: onload="getSVGDoc(evt)">
12:
13: <title>SVG - Learning by Coding</title>
14: <desc>SVG-Spezifikation in Beispielen</desc>
15:
16: <defs>
17:
18: <filter id="flt">
19: <feGaussianBlur in="SourceAlpha" stdDeviation="0.5" result="blur"/>
20: <feSpecularLighting in="blur" surfaceScale="5" specularConstant="0.5"
21: specularExponent="10" result="specOut" style="lighting-color: #FFF">
22: <fePointLight x="-5000" y="-5000" z="5000"/>
23: </feSpecularLighting>
24: <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut2"/>
25: <feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic"
26: k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
27: </filter>
28:
29: <style type="text/css">
30: <![CDATA[
31:
32: rect
33: {
34: filter: url(#flt);
35: }
36:
37: g[id="colout"] rect
38: {
39: filter: none;
40: }
41:
42: text.nope
43: {
44: pointer-events: none;
45: }
46:
47: ]]>
48: </style>
49:
50: <script type="text/javascript">
51: <![CDATA[
52:
53: var svgdoc,startr=false,startg=false,startb=false,startx=50,endex=255;
54: var slr,slg,slb,txr,txg,txb,rgb,trg,thx,r=0,g=0,b=0;
55:
56:
57: function getSVGDoc(load_evt)
58: {
59: svgdoc=load_evt.target.ownerDocument;
60:
61: slr=svgdoc.getElementById("sliderr").getElementsByTagName("rect").item(1);
62: txr=svgdoc.getElementById("sliderr").getElementsByTagName("text").item(1);
63:
64: slg=svgdoc.getElementById("sliderg").getElementsByTagName("rect").item(1);
65: txg=svgdoc.getElementById("sliderg").getElementsByTagName("text").item(1);
66:
67: slb=svgdoc.getElementById("sliderb").getElementsByTagName("rect").item(1);
68: txb=svgdoc.getElementById("sliderb").getElementsByTagName("text").item(1);
69:
70: rgb=svgdoc.getElementById("colout").getElementsByTagName("rect").item(0);
71: trg=svgdoc.getElementById("colout").getElementsByTagName("text").item(0);
72: thx=svgdoc.getElementById("colout").getElementsByTagName("text").item(1);
73: }
74:
75:
76: function MoveSliderR(mousemove_event)
77: {
78: r=mousemove_event.clientX-startx;
79: if(r>255)r=255;
80:
81: if(startr && r>=0 && r<=endex)
82: {
83: slr.setAttribute("x",startx+r);
84: txr.firstChild.data=r;
85: setRGB();
86: }
87: }
88:
89:
90: function MoveSliderG(mousemove_event)
91: {
92: g=mousemove_event.clientX-startx;
93: if(g>255)g=255;
94:
95: if(startg && g>=0 && g<=endex)
96: {
97: slg.setAttribute("x",startx+g);
98: txg.firstChild.data=g;
99: setRGB();
100: }
101: }
102:
103:
104: function MoveSliderB(mousemove_event)
105: {
106: b=mousemove_event.clientX-startx;
107: if(b>255)b=255;
108:
109: if(startb && b>=0 && b<=endex)
110: {
111: slb.setAttribute("x",startx+b);
112: txb.firstChild.data=b;
113: setRGB();
114: }
115: }
116:
117:
118: function setRGB()
119: {
120: r=parseInt(txr.firstChild.data);
121: g=parseInt(txg.firstChild.data);
122: b=parseInt(txb.firstChild.data);
123:
124: rgbfarbe="rgb("+r+","+g+","+b+")";
125:
126: // RGB-Werte zur Anzeige in Hex-Schreibweise umwandeln
127: hex=rgbfarbe.substring(4,rgbfarbe.length-1);
128: hex=hex.split(",");
129: hr=parseInt(hex[0]).toString(16).toUpperCase();
130: hr=(hr.length==1)?"0"+hr:hr;
131: hg=parseInt(hex[1]).toString(16).toUpperCase();
132: hg=(hg.length==1)?"0"+hg:hg;
133: hb=parseInt(hex[2]).toString(16).toUpperCase();
134: hb=(hb.length==1)?"0"+hb:hb;
135: hexfarbe="#"+hr+hg+hb; // #RRGGBB
136:
137: rgb.style.setProperty("fill",rgbfarbe,"");
138: trg.firstChild.data=rgbfarbe;
139: thx.firstChild.data="hex: "+hexfarbe;
140: }
141:
142: ]]>
143: </script>
144:
145: </defs>
146:
147: <text x="20" y="30" style="fill: #000; font-size: 24px">
148: Schieberegler zur Auswahl von Farben</text>
149:
150: <g id="sliderr" onmousedown="startr=true;MoveSliderR(evt)" onmouseup="startr=false"
151: onmousemove="MoveSliderR(evt)" onclick="MoveSliderR(evt)">
152: <text class="nope" x="30" y="110">R</text>
153: <rect x="50" y="100" height="10" width="260" style="fill: #F00"/>
154: <rect x="50" y="95" height="20" width="5" style="fill: #DDD"/>
155: <text class="nope" x="320" y="110">0</text>
156: </g>
157:
158: <g id="sliderg" onmousedown="startg=true;MoveSliderG(evt)" onmouseup="startg=false"
159: onmousemove="MoveSliderG(evt)" onclick="MoveSliderG(evt)">
160: <text class="nope" x="30" y="160">G</text>
161: <rect x="50" y="150" height="10" width="260" style="fill: #0F0"/>
162: <rect x="50" y="145" height="20" width="5" style="fill: #DDD"/>
163: <text class="nope" x="320" y="160">0</text>
164: </g>
165:
166: <g id="sliderb" onmousedown="startb=true;MoveSliderB(evt)" onmouseup="startb=false"
167: onmousemove="MoveSliderB(evt)" onclick="MoveSliderB(evt)">
168: <text class="nope" x="30" y="210">B</text>
169: <rect x="50" y="200" height="10" width="260" style="fill: #00F"/>
170: <rect x="50" y="195" height="20" width="5" style="fill: #DDD"/>
171: <text class="nope" x="320" y="210">0</text>
172: </g>
173:
174: <g id="colout">
175: <rect x="360" y="130" width="50" height="50" style="fill: #000; stroke: #DDD"/>
176: <text x="430" y="150">rgb(0,0,0)</text>
177: <text x="430" y="170">hex: #000000</text>
178: </g>
179:
180: </svg>
[zum Anfang]
