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 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==0 || j==vanzahl-2 || i==0 || 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-Rechteck, ttt=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">dyn. Text</text>
95: </g><!-- Tooltip - Ende -->
96:
97: </svg>
[zum Anfang]
