SVG – Learning by Coding

[ wavelength2rgb.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 01/04 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);Farbverlauf()" onzoom="ZoomControl()">
 12: 
 13:   <title>SVG Learning By Coding</title>
 14:   <desc>SVG-Spezifikation in Beispielen</desc>
 15: 
 16:   <defs>
 17: 
 18:     <style type="text/css">
 19:       <![CDATA[
 20: 
 21:       *
 22:       {
 23:         font-familysans-serif;
 24:         font-size12px;
 25:       }
 26: 
 27:       ]]>
 28:     </style>
 29: 
 30: 
 31:     <script xlink:href="tool_tip.js" type="text/javascript"/>
 32: 
 33:     <script type="text/javascript">
 34:       <![CDATA[
 35: 
 36:       function WL2RGB(wl)
 37:       {
 38:         /*
 39:           Der Algorithmus zur naeherungsweisen Berechnung des RGB-Wertes zu
 40:           einer Licht-Wellenlaenge aus dem sichtbaren Spektrum stammt von:
 41:           http://www.physics.sfasu.edu/astro/color/spectra.html          
 42: 
 43:           Beispielaufruf:
 44:           wlaenge=470;
 45:           rgb=WL2RGB(wlaenge); // rgb(0,169,255)
 46:         */
 47: 
 48:         var max=255,gamma=0.8,r=0,g=0,b=0,f=0;
 49: 
 50:         switch(true)
 51:         {
 52:           case(wl>=380 && wl<440):
 53:           {
 54:             r=-(wl-440)/(440-380);
 55:             g=0;
 56:             b=1;
 57:             break;
 58:           }
 59: 
 60:           case(wl>=440 && wl<490):
 61:           {
 62:             r=0;
 63:             g=(wl-440)/(490-440);
 64:             b=1;
 65:             break;
 66:           }
 67: 
 68:           case(wl>=490 && wl<510):
 69:           {
 70:             r=0;
 71:             g=1;
 72:             b=-(wl-510)/(510-490);
 73:             break;
 74:           }
 75: 
 76:           case(wl>=510 && wl<580):
 77:           {
 78:             r=(wl-510)/(580-510);
 79:             g=1;
 80:             b=0;
 81:             break;
 82:           }
 83: 
 84:           case(wl>=580 && wl<645):
 85:           {
 86:             r=1;
 87:             g=-(wl-645)/(645-580);
 88:             b=0;
 89:             break;
 90:           }
 91: 
 92:           case(wl>=645 && wl<=780):
 93:           {
 94:             r=1;
 95:             g=0;
 96:             b=0;
 97:             break;
 98:           }
 99: 
100:           default:
101:           {
102:             r=0;
103:             g=0;
104:             b=0;
105:             break;
106:           }
107:         }
108: 
109:         if(wl>=380 && wl<420)f=0.3+0.7*(wl-380)/(420-380);
110:         else if(wl>=420 && wl<=700)f=1;
111:         else if(wl>700 && wl<=780)f=0.3+0.7*(780-wl)/(780-700);
112:         else f=0;
113: 
114:         if(r>0)r=Math.round(max*Math.pow(r*f,gamma));
115:         if(g>0)g=Math.round(max*Math.pow(g*f,gamma));
116:         if(b>0)b=Math.round(max*Math.pow(b*f,gamma));
117: 
118:         return "rgb("+r+","+g+","+b+")";
119:       }
120: 
121: 
122:       function Farbverlauf()
123:       {
124:         var obj,neu,wlaenge,rgb,
125:             parobj=svgdoc.getElementById("farbverlauf"),
126:             svgns="http://www.w3.org/2000/svg";
127: 
128:         for(wlaenge=380;wlaenge<=780;wlaenge+=1)
129:         {
130:           rgb=WL2RGB(wlaenge);
131:           neu=svgdoc.createElementNS(svgns,"rect");
132:           neu.setAttribute("x",wlaenge-310);
133:           neu.setAttribute("y",50);
134:           neu.setAttribute("width","1");
135:           neu.setAttribute("height","30");
136:           neu.setAttribute("fill",rgb);
137:           neu.setAttribute("onmousemove",
138:             "ShowTooltip(evt,'"+wlaenge+" nm | "+rgb+"')");
139:           parobj.appendChild(neu);
140:         }
141:       }
142: 
143:     ]]>
144:   </script>
145: 
146:   </defs>
147: 
148:   <rect x="0" y="0" width="100%" height="100%" style="fill: #FFF"
149:     onmouseover="HideTooltip()"/>
150: 
151:   <text x="20" y="25" style="fill: #000; font-size: 24px">
152:     Spektralen Farbverlauf dynamisch erzeugen</text>
153: 
154:   <g id="farbverlauf"></g>
155: 
156:   <text x="20" y="70">380 nm</text>
157:   <text x="480" y="70">780 nm</text>
158: 
159:   <text x="20" y="120">Quelle: </text>
160: 
161:   <a xlink:href="http://www.physics.sfasu.edu/astro/color/spectra.html" target="_top">
162:     <text x="20" y="135" style="fill: #00C">
163:       Approximate RGB values for Visible Wavelengths
164:       <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
165:       <set attributeName="text-decoration" attributeType="CSS" to="underline"
166:         begin="mouseover"/>
167:       <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
168:       <set attributeName="text-decoration" attributeType="CSS" to="none"
169:         begin="mouseout"/>
170:     </text>
171:   </a>
172: 
173:   <!-- Tooltip Beginn (ttr=Tooltip-Rechteckttt=Tooltip-Text) -->
174:   <g id="tooltip" style="pointer-events: none">
175:     <rect id="ttr" x="0" y="0" rx="5" ry="5" width="100" height="16"
176:       style="visibility: hidden"/>
177:     <text id="ttt" x="0" y="0" style="visibility: hidden">dynText</text>
178:   </g><!-- Tooltip Ende -->
179: 
180: </svg>

[zum Anfang]