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 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-family: sans-serif;
24: font-size: 12px;
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-Rechteck, ttt=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">dyn. Text</text>
178: </g><!-- Tooltip - Ende -->
179:
180: </svg>
[zum Anfang]
