SVG – Learning by Coding

[ websichere_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);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 00336699CCFF</text>
 96: 
 97:   <!-- Tooltip Beginn (ttr=Tooltip-Rechteckttt=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">dynText</text>
102:   </g><!-- Tooltip Ende -->
103: 
104: </svg>

[zum Anfang]