SVG – Learning by Coding

[ rrggbb-farben.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 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 00112233445566778899,
 97:     AABBCCDDEEFF</text>
 98: 
 99:   <!-- Tooltip Beginn (ttr=Tooltip-Rechteckttt=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">dynText</text>
104:   </g><!-- Tooltip Ende -->
105: 
106: </svg>

[zum Anfang]