SVG – Learning by Coding

[ zufallsfarben1.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 02/03 thomas@handmadecode.de     -->
 9: 
10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
11: 
12:   <title>SVG Learning By Coding</title>
13:   <desc>SVG-Spezifikation in Beispielen</desc>
14: 
15:   <defs>
16: 
17:     <style type="text/css">
18:       <![CDATA[
19: 
20:       text.t1
21:       {
22:         fill#F00;
23:         font-size12px;
24:       }
25: 
26:       text.t2
27:       {
28:         fill#00C;
29:         font-size12px;
30:       }
31: 
32:       ]]>
33:     </style>
34: 
35: 
36:     <script type="text/javascript">
37:       <![CDATA[
38: 
39:       function Zufallsfarbe()
40:       {
41:         var r,g,b,rgb;
42: 
43:         r=Math.floor(Math.random()*256);
44:         g=Math.floor(Math.random()*256);
45:         b=Math.floor(Math.random()*256);
46:         rgb="rgb("+r+","+g+","+b+")";
47: 
48:         // als rgb(r,g,b) direkt verwendbar fuer style-Objekt
49:         return rgb;
50:       }
51: 
52: 
53:       function ZeigeFarbe(click_evt)
54:       {
55:         var svgdoc,rgbfarbe,hexfarbe,hex,hr,hg,hb,ausgabe;
56: 
57:         svgdoc=click_evt.target.ownerDocument;
58: 
59:         // Funktion Zufallsfarbe() aufrufen
60:         rgbfarbe=Zufallsfarbe();
61: 
62:         // RGB-Werte zur Anzeige in Hex-Schreibweise umwandeln
63:         hex=rgbfarbe.substring(4,rgbfarbe.length-1);
64:         hex=hex.split(",");
65:         hr=parseInt(hex[0]).toString(16).toUpperCase();
66:         hr=(hr.length==1)?"0"+hr:hr;
67:         hg=parseInt(hex[1]).toString(16).toUpperCase();
68:         hg=(hg.length==1)?"0"+hg:hg;
69:         hb=parseInt(hex[2]).toString(16).toUpperCase();
70:         hb=(hb.length==1)?"0"+hb:hb;
71:         hexfarbe="#"+hr+hg+hb// #RRGGBB
72: 
73:         ausgabe=rgbfarbe+" | "+hexfarbe;
74: 
75:         // Kreisfarbe zuweisen sowie Farbwerte ausgeben
76:         click_evt.target.style.setProperty("fill",rgbfarbe,"");
77:         svgdoc.getElementById("farbwerte").firstChild.data=ausgabe;
78:       }
79: 
80:       ]]>
81:     </script>
82: 
83:   </defs>
84: 
85:   <text x="20" y="30" style="fill: #000; font-size: 24px">
86:     Zufallsfarben erzeugen</text>
87: 
88:   <circle cx="140" cy="150" r="80" style="fill: #FFF; stroke: #000"
89:     onclick="ZeigeFarbe(evt)"/>
90: 
91:   <text x="100" y="270" class="t1">Kreis anklicken!</text>
92: 
93:   <text id="farbwerte" x="70" y="290" class="t2"> </text>
94: 
95: </svg>

[zum Anfang]