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/04 - thomas@handmadecode.de -->
9:
10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
11: onload="getSVGDoc(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,x=0,y=0,np=1000,faktor=100,xversatz=280,yversatz=180,
22: svgns="http://www.w3.org/2000/svg";
23:
24:
25: function getSVGDoc(load_evt)
26: {
27: svgdoc=load_evt.target.ownerDocument;
28: svgroot=svgdoc.documentElement;
29: }
30:
31:
32: function SuperShapeEval(m,n1,n2,n3,phi)
33: {
34: var r,t1,t2,a=1,b=1;
35:
36: t1=Math.pow(Math.abs(Math.cos(m*phi/4)/a),n2);
37: t2=Math.pow(Math.abs(Math.sin(m*phi/4)/b),n3);
38:
39: r=Math.pow(t1+t2,1/n1);
40: if(Math.abs(r)==0)
41: {
42: x=0;
43: y=0;
44: }
45: else
46: {
47: r=1/r;
48: x=r*Math.cos(phi);
49: y=r*Math.sin(phi);
50: }
51:
52: x=xversatz+x*faktor;
53: y=yversatz+y*faktor;
54: return x.toString()+","+y.toString()+" ";
55: }
56:
57:
58: function SuperShapeDraw(m,n1,n2,n3,z,col)
59: {
60: var zpi,punkte="",elemobj;
61: zpi=z*Math.PI;
62:
63: // Polygon-Wertepaare berechnen
64: for(i=0;i<=np;i++)
65: {
66: phi=i*zpi/np;
67: punkte+=SuperShapeEval(m,n1,n2,n3,phi);
68: }
69:
70: // vorheriges Polygon entfernen
71: if(svgroot.lastChild.tagName=="polygon")
72: svgroot.removeChild(svgroot.lastChild);
73:
74: // neues Polygon erzeugen
75: elemobj=svgdoc.createElementNS(svgns,"polygon");
76: elemobj.setAttribute("points",punkte);
77: elemobj.setAttribute("stroke",col);
78: elemobj.setAttribute("stroke-width","1.2px");
79: elemobj.setAttribute("fill","none");
80: svgroot.appendChild(elemobj);
81: }
82:
83: ]]>
84: </script>
85:
86: </defs>
87:
88: <text x="20" y="30" style="fill: #000; font-size: 24px">
89: Supershapes-Plotter</text>
90:
91: <a xlink:href="" cursor="pointer" onclick="return false">
92: <text x="20" y="80" style="fill: #00C; font-size: 16px"
93: onclick="SuperShapeDraw(5,1,1,1,2,'#FC0')">Figur 1 zeichnen
94: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
95: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
96: </text>
97: </a>
98: <text x="20" y="100" style="fill: #000; font-size: 12px">
99: m=5, n1=n2=n3=1, 2π</text>
100:
101: <a xlink:href="" cursor="pointer" onclick="return false">
102: <text x="20" y="130" style="fill: #00C; font-size: 16px"
103: onclick="SuperShapeDraw(5,0.1,1.7,1.7,2,'#F00')">Figur 2 zeichnen
104: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
105: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
106: </text>
107: </a>
108: <text x="20" y="150" style="fill: #000; font-size: 12px">
109: m=5, n1=0.1, n2=n3=1.7, 2π</text>
110:
111: <a xlink:href="" cursor="pointer" onclick="return false">
112: <text x="20" y="180" style="fill: #00C; font-size: 16px"
113: onclick="SuperShapeDraw(6,0.3,0.3,0.3,2,'#090')">Figur 3 zeichnen
114: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
115: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
116: </text>
117: </a>
118: <text x="20" y="200" style="fill: #000; font-size: 12px">
119: m=6, n1=n2=n3=0.3, 2π</text>
120:
121: <a xlink:href="" cursor="pointer" onclick="return false">
122: <text x="20" y="230" style="fill: #00C; font-size: 16px"
123: onclick="SuperShapeDraw(1/6,0.3,0.3,0.3,12,'#00C')">Figur 4 zeichnen
124: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
125: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
126: </text>
127: </a>
128: <text x="20" y="250" style="fill: #000; font-size: 12px">
129: m=1/6, n1=n2=n3=0.3, 12π</text>
130:
131: <a xlink:href="" cursor="pointer" onclick="return false">
132: <text x="20" y="280" style="fill: #00C; font-size: 16px"
133: onclick="SuperShapeDraw(19/6,0.3,0.3,0.3,12,'#000')">Figur 5 zeichnen
134: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
135: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
136: </text>
137: </a>
138: <text x="20" y="300" style="fill: #000; font-size: 12px">
139: m=19/6, n1=n2=n3=0.3, 12π</text>
140:
141: <a xlink:href="http://paulbourke.net/geometry/supershape/" target="_top">
142: <text x="20" y="350" style="fill: #00C; font-size: 12px">
143: Code adapted from Paul Bourke
144: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
145: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
146: </text>
147: </a>
148:
149: </svg>
[zum Anfang]
