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