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 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 k = 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 r = Math.floor(Math.random() * 256);
37: var g = Math.floor(Math.random() * 256);
38: var b = Math.floor(Math.random() * 256);
39: var farbe="rgb(" + r + "," + g + "," + b + ")";
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 n = 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 Radius, Füllfarbe und Deckkraft -->
83: <g font-family="sans-serif" font-size="14">
84: <text id="ra" x="140" y="530">r = </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]
