SVG – Learning by Coding

[ zufallskreise.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 06/09 thomas@handmadecode.de     -->
 9: 
10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="Ausgabe()">
11: 
12:   <title>SVG Learning By Coding</title>
13:   <desc>SVG-Spezifikation in Beispielen</desc>
14: 
15:   <defs>
16: 
17:     <script type="text/javascript">
18:       <![CDATA[
19: 
20:       function Kreis()
21:       {
22:         // circle-Elementobjekt erzeugen
23:       
24:         var svgns="http://www.w3.org/2000/svg";
25:         var document.createElementNS(svgns,"circle");
26: 
27:         // Mittelpunkt und Radius
28:         k.setAttribute("cx"50 Math.random() * 650);
29:         k.setAttribute("cy"70 Math.random() * 400);
30:         k.setAttribute("r",  Math.random() * 50);
31: 
32:         // Deckkraft
33:         k.setAttribute("opacity"Math.random());
34: 
35:         // Zufallsfarbe im rgb()-Farbschema
36:         var Math.floor(Math.random() * 256);
37:         var Math.floor(Math.random() * 256);
38:         var Math.floor(Math.random() * 256);
39:         var farbe="rgb(" "," "," ")";        
40:         k.setAttribute("fill",farbe);
41:        
42:         // Ausgabe von Radius, Füllfarbe und Deckkraft bei Mausberührung        
43:         k.addEventListener("mouseover", function(evt)
44:         {
45:           document.getElementById("ra").firstChild.nodeValue "r = " +
46:             parseFloat(evt.target.getAttribute("r")).toFixed(3);
47:           document.getElementById("co").firstChild.nodeValue "fill = " +
48:             evt.target.getAttribute("fill");
49:           document.getElementById("op").firstChild.nodeValue "opacity = " +
50:             parseFloat(evt.target.getAttribute("opacity")).toFixed(3);
51:         }, false);
52: 
53:         k.addEventListener("mouseout", function()
54:         {
55:           document.getElementById("ra").firstChild.nodeValue "r = ";
56:           document.getElementById("co").firstChild.nodeValue "fill = ";
57:           document.getElementById("op").firstChild.nodeValue "opacity = ";
58:         }, false);
59: 
60:         return k// Objekt k an aufrufende Instanz [hier Funktion Ausgabe()] zurück geben
61:       }
62: 
63: 
64:       function Ausgabe()
65:       {
66:         var 100// n Kreise erzeugen und ausgeben
67: 
68:         for(var i=0; i<n; i++)
69:         {
70:           document.documentElement.appendChild(Kreis());
71:         }
72:       }
73: 
74:       ]]>
75:     </script>
76: 
77:   </defs>
78: 
79:   <text x="20" y="30" fill="#000" font-size="24">
80:     Zufallskreise erzeugen</text>
81: 
82:   <!-- Ausgabe von RadiusFüllfarbe und Deckkraft -->
83:   <g font-family="sans-serif" font-size="14">
84:     <text id="ra" x="140" y="530">= </text>
85:     <text id="co" x="340" y="530">fill = </text>
86:     <text id="op" x="540" y="530">opacity = </text>
87:   </g>
88: 
89: </svg>

[zum Anfang]