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/06 - thomas@handmadecode.de -->
9:
10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
11: onload="Init(evt)">
12:
13: <title>SVG - Learning by Coding</title>
14: <desc>SVG-Spezifikation in Beispielen</desc>
15:
16: <defs>
17:
18: <script type="text/javascript">
19: <![CDATA[
20:
21: var svgdoc,svgroot,basis,output;
22:
23:
24: function Init(load_evt)
25: {
26: svgdoc=load_evt.target.ownerDocument;
27: svgroot=svgdoc.documentElement;
28: basis=svgdoc.getElementById("basis");
29: output=svgdoc.getElementById("output");
30:
31: Skalieren(270,290);
32: }
33:
34:
35: function Skalieren(mpx,mpy)
36: {
37: var clone,transcale,f;
38:
39: // ab dem zweiten Aufruf vorhandene Kindknoten des g-Elements entfernen
40: while(output.hasChildNodes())output.removeChild(output.lastChild);
41:
42: for(f=1.5;f<25;f+=0.5)
43: {
44: // bei der Skalierung gegen die auftretende Verschiebung steuern
45: transcale="translate("+(-mpx*(f-1))+","+(-mpy*(f-1))+") scale("+f+")";
46:
47: // Original-Rechteckobjekt klonen
48: clone=basis.cloneNode(true);
49:
50: // Transformation zuweisen
51: clone.setAttribute("transform",transcale);
52:
53: // Zufallsfarbe fuer den Rahmen zuweisen
54: clone.setAttribute("stroke",Zufallsfarbe());
55:
56: // Rahmenstaerke bezogen auf Faktor f anpassen
57: clone.setAttribute("stroke-width",clone.getAttribute("stroke-width")/f);
58:
59: // neues Rechteck in den DOM-Baum einhaengen
60: output.appendChild(clone);
61: }
62: }
63:
64:
65: function Zufallsfarbe()
66: {
67: var r,g,b,rgb;
68:
69: r=Math.floor(Math.random()*256);
70: g=Math.floor(Math.random()*256);
71: b=Math.floor(Math.random()*256);
72: rgb="rgb("+r+","+g+","+b+")";
73:
74: return rgb;
75: }
76:
77: ]]>
78: </script>
79:
80: </defs>
81:
82: <text x="20" y="30" style="fill: #000; font-size: 24px">
83: Skalieren um einen Mittelpunkt</text>
84:
85: <circle cx="270" cy="290" r="1.5" fill="#F00"/>
86:
87: <rect id="basis" x="260" y="280" width="20" height="20"
88: fill="none" stroke="#F00" stroke-width="1"/>
89:
90: <a xlink:href="" cursor="pointer" onclick="return false"><text x="380" y="30" style="fill: #F00; font-size: 12px"
91: onclick="Skalieren(270,290)">Funktion erneut aufrufen!</text></a>
92:
93: <g id="output"></g>
94:
95: </svg>
[zum Anfang]
