SVG – Learning by Coding

[ schieberegler.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 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:         filterurl(#flt);
 35:       }
 36: 
 37:       g[id="colout"rect
 38:       {
 39:         filternone;
 40:       }
 41: 
 42:       text.nope
 43:       {
 44:         pointer-eventsnone;
 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>=&& 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>=&& 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>=&& 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]