SVG – Learning by Coding

[ skalieren_um_punkt.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 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]