SVG – Learning by Coding

[ zufallsfarben2.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 03/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);FarbQuadrate(25)" 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: 
21:     <script type="text/javascript">
22:       <![CDATA[
23: 
24:       function Zufallsfarbe()
25:       {
26:         var r,g,b,rgb;
27: 
28:         r=Math.floor(Math.random()*256);
29:         g=Math.floor(Math.random()*256);
30:         b=Math.floor(Math.random()*256);
31:         rgb="rgb("+r+","+g+","+b+")";
32: 
33:         // als rgb(r,g,b) direkt verwendbar fuer style-Objekt
34:         return rgb;
35:       }
36: 
37: 
38:       function FarbQuadrate(kantenlaenge)
39:       {
40:         // Rechtecke mit Breite = Hoehe = kantenlaenge erzeugen
41:         var fbreite,fhoehe,hanzahl,vanzahl,istart,jstart,
42:             oben,links,zfarbe,rectobj,ttobj,
43:             svgns="http://www.w3.org/2000/svg";
44: 
45:         fbreite=window.innerWidth;
46:         fhoehe=window.innerHeight;
47: 
48:         hanzahl=parseInt(fbreite/kantenlaenge);
49:         vanzahl=parseInt(fhoehe/kantenlaenge);
50:         istart=Math.round((fbreite-hanzahl*kantenlaenge)/2);
51:         jstart=Math.round((fhoehe-vanzahl*kantenlaenge)/2)+kantenlaenge;
52: 
53:         for(j=0;j<vanzahl-1;j++)
54:         {
55:           oben=j*kantenlaenge+jstart;
56: 
57:           for(i=0;i<hanzahl;i++)
58:           {
59:             zfarbe=Zufallsfarbe();
60:             links=i*kantenlaenge+istart;
61: 
62:             rectobj=svgdoc.createElementNS(svgns,"rect");
63:             rectobj.setAttribute("x",links);
64:             rectobj.setAttribute("y",oben);
65:             rectobj.setAttribute("width",kantenlaenge);
66:             rectobj.setAttribute("height",kantenlaenge);
67:             rectobj.style.setProperty("fill",zfarbe,"");
68:             rectobj.setAttribute("onmousemove","ShowTooltip(evt,'"+zfarbe+"')");
69:             if(j==|| j==vanzahl-|| i==|| i==hanzahl-1)
70:               rectobj.setAttribute("onmouseout","HideTooltip()");
71: 
72:             svgroot.appendChild(rectobj);
73:           }
74:         }
75: 
76:         // Tooltip in den Vordergrund bringen
77:         ttobj=svgdoc.getElementById("tooltip");
78:         svgroot.removeChild(ttobj);
79:         svgroot.appendChild(ttobj);
80:       }
81: 
82:       ]]>
83:     </script>
84: 
85:   </defs>
86: 
87:   <text x="20" y="25" style="fill: #000; font-size: 24px">
88:     Zufallsfarben erzeugen</text>
89: 
90:   <!-- Tooltip Beginn (ttr=Tooltip-Rechteckttt=Tooltip-Text) -->
91:   <g id="tooltip" style="pointer-events: none">
92:     <rect id="ttr" x="0" y="0" rx="5" ry="5" width="100" height="16"
93:       style="visibility: hidden"/>
94:     <text id="ttt" x="0" y="0" style="visibility: hidden">dynText</text>
95:   </g><!-- Tooltip Ende -->
96: 
97: </svg>

[zum Anfang]