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 12/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);RRGGBBColors(5)" onzoom="ZoomControl()">
12:
13: <title>SVG - Learning by Coding</title>
14: <desc>SVG-Spezifikation in Beispielen</desc>
15:
16: <defs>
17:
18: <script xlink:href="tool_tip.js" type="text/javascript"/>
19:
20: <script type="text/javascript">
21: <![CDATA[
22:
23: function RRGGBBColors(kantenlaenge)
24: {
25: var hexpaare,aktfarbe,xstart,ystart,links,oben,i,j,k,x,y,z,
26: svgns="http://www.w3.org/2000/svg";
27:
28: hexpaare=new Array("00","11","22","33","44","55","66","77","88","99",
29: "AA","BB","CC","DD","EE","FF");
30: aktfarbe=new Array(4096);
31: rgbfarbe=new Array(4096);
32: xstart=20;
33: ystart=50;
34:
35: // Array aktfarbe[] mit den Hex-Farbwerten fuellen
36: z=0; // Zaehlvariable 0 bis 4095 fuer 4096 Farben
37:
38: for(i=0;i<16;i++)
39: {
40: for(j=0;j<16;j++)
41: {
42: for(k=0;k<16;k++)
43: {
44: aktfarbe[z]="#"+hexpaare[i]+hexpaare[j]+hexpaare[k];
45: rgbfarbe[z]="rgb("+parseInt("0x"+hexpaare[i],16)+",";
46: rgbfarbe[z]+=parseInt("0x"+hexpaare[j],16)+",";
47: rgbfarbe[z]+=parseInt("0x"+hexpaare[k],16)+")";
48: z++;
49: }
50: }
51: }
52:
53: // Farbquadrate mit Tooltips ausgeben
54: z=0; // Zaehlvariable 0 bis 4095 fuer 4096 Farben
55:
56: for(y=0;y<32;y++)
57: {
58: oben=y*kantenlaenge+ystart;
59:
60: for(x=0;x<128;x++)
61: {
62: links=x*kantenlaenge+xstart;
63:
64: rectobj=svgdoc.createElementNS(svgns,"rect");
65: rectobj.setAttribute("x",links);
66: rectobj.setAttribute("y",oben);
67: rectobj.setAttribute("width",kantenlaenge);
68: rectobj.setAttribute("height",kantenlaenge);
69: rectobj.style.setProperty("fill",aktfarbe[z],"");
70: rectobj.setAttribute("onmousemove",
71: "ShowTooltip(evt,'"+aktfarbe[z]+" | "+rgbfarbe[z]+"')");
72:
73: svgroot.appendChild(rectobj);
74: z++;
75: }
76: }
77:
78: // Tooltip in den Vordergrund bringen
79: ttobj=svgdoc.getElementById("tooltip");
80: svgroot.removeChild(ttobj);
81: svgroot.appendChild(ttobj);
82: }
83:
84: ]]>
85: </script>
86:
87: </defs>
88:
89: <rect x="0" y="0" width="100%" height="100%" style="fill: #FFF"
90: onmouseover="HideTooltip()"/>
91:
92: <text x="20" y="25" style="fill: #000; font-size: 24px">
93: #RRGGBB-Farben dynamisch erzeugen (4096)</text>
94:
95: <text x="20" y="40" style="fill: #00C; font-size: 12px">
96: Kombinationen aus 00, 11, 22, 33, 44, 55, 66, 77, 88, 99,
97: AA, BB, CC, DD, EE, FF</text>
98:
99: <!-- Tooltip - Beginn (ttr=Tooltip-Rechteck, ttt=Tooltip-Text) -->
100: <g id="tooltip" style="pointer-events: none">
101: <rect id="ttr" x="0" y="0" rx="5" ry="5" width="100" height="16"
102: style="visibility: hidden"/>
103: <text id="ttt" x="0" y="0" style="visibility: hidden">dyn. Text</text>
104: </g><!-- Tooltip - Ende -->
105:
106: </svg>
[zum Anfang]
