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 04/05 - 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: <style type="text/css">
19: <![CDATA[
20:
21: *
22: {
23: font-family: sans-serif;
24: font-size: 12px;
25: }
26:
27: ]]>
28: </style>
29:
30:
31: <script type="text/javascript">
32: <![CDATA[
33:
34: var svgdoc,g1,g2,ta,p1,p2,p3;
35:
36:
37: function Init(load_evt)
38: {
39: svgdoc=load_evt.target.ownerDocument;
40:
41: g1=svgdoc.getElementById("g1");
42: g2=svgdoc.getElementById("g2");
43: p1=svgdoc.getElementById("p1");
44: p2=svgdoc.getElementById("p2");
45: p3=svgdoc.getElementById("p3");
46: ta=svgdoc.getElementById("ta");
47:
48: p1.setAttribute("points",Linear_Bezier(130,200,330,200));
49: p2.setAttribute("points",Quadratic_Bezier(130,200,280,100,330,200));
50: p3.setAttribute("points",Cubic_Bezier(130,200,280,100,180,300,330,200));
51: }
52:
53:
54: function Linear_Bezier(x0,y0,x1,y1)
55: {
56: // C(t) = (1-t)*P0 + t*P1 | t = [0...1]
57:
58: var x,y,t,tm,dt=0.005,data="";
59:
60: for(t=0;t<=1;t+=dt)
61: {
62: tm=1-t;
63: x=tm*x0 + t*x1;
64: y=tm*y0 + t*y1;
65: data+=x+","+y;
66: if(t<1)data+=" ";
67: }
68:
69: return data;
70: }
71:
72:
73: function Quadratic_Bezier(x0,y0,x1,y1,x2,y2)
74: {
75: // C(t) = (1-t)^2*P0 + 2t(1-t)*P1 + t^2*P2 | t = [0...1]
76:
77: var x,y,t,tm,t0,t1,t2,dt=0.005,data="";
78:
79: for(t=0;t<=1;t+=dt)
80: {
81: tm=1-t;
82: t0=Math.pow(tm,2);
83: t1=2*t*tm;
84: t2=Math.pow(t,2);
85: x=t0*x0 + t1*x1 + t2*x2;
86: y=t0*y0 + t1*y1 + t2*y2;
87: data+=x+","+y;
88: if(t<1)data+=" ";
89: }
90:
91: return data;
92: }
93:
94:
95: function Cubic_Bezier(x0,y0,x1,y1,x2,y2,x3,y3)
96: {
97: // C(t) = (1-t)^3*P0 + 3t(1-t)^2*P1 + 3(1-t)t^2*P2 + t^3*P3 | t = [0...1]
98:
99: var x,y,t,tm,t0,t1,t2,t3,dt=0.005,data="";
100:
101: for(t=0;t<=1;t+=dt)
102: {
103: tm=1-t;
104: t0=Math.pow(tm,3);
105: t1=3*t*Math.pow(tm,2);
106: t2=3*tm*Math.pow(t,2);
107: t3=Math.pow(t,3);
108: x=t0*x0 + t1*x1 + t2*x2 + t3*x3;
109: y=t0*y0 + t1*y1 + t2*y2 + t3*y3;
110: data+=x+","+y;
111: if(t<1)data+=" ";
112: }
113:
114: return data;
115: }
116:
117: ]]>
118: </script>
119: </defs>
120:
121: <text x="20" y="30" style="fill: #000; font-size: 24px">
122: Bézier-Kurven darstellen / berechnen</text>
123:
124: <!-- Kurven in SVG-Pfadsyntax -->
125: <g id="g1" visibility="hidden" style="fill: none; stroke: #00C">
126: <!-- Gerade ersetzt lineare Bezier-Kurve (L): P0 ... P3 -->
127: <path d="M130,200 L330,200"/>
128: <!-- quadratische Bezier-Kurve (Q): P0 ... [P1] ... P3 -->
129: <path d="M130,200 Q280,100 330,200"/>
130: <!-- kubische Bezier-Kurve (C): P0 ... [P1 | P2] ... P3 -->
131: <path d="M130,200 C280,100 180,300 330,200"/>
132: </g>
133:
134: <!-- Poly-Linien mit den berechneten Daten (Bezier-Polynome) -->
135: <g id="g2" visibility="hidden" style="fill: none; stroke: #F00">
136: <polyline id="p1" points=""/>
137: <polyline id="p2" points=""/>
138: <polyline id="p3" points=""/>
139: </g>
140:
141: <!-- Tangenten-Hilfslinien -->
142: <g id="ta" visibility="hidden"
143: style="stroke: gray; stroke-width: 1px; stroke-dasharray: 2,4">
144: <line x1="130" y1="200" x2="280" y2="100"/>
145: <line x1="330" y1="200" x2="180" y2="300"/>
146: </g>
147:
148: <!-- Start- und Zielpunkt -->
149: <circle cx="130" cy="200" r="2.5" style="fill: #F00"/>
150: <text x="125" y="215">P0 (Startpunkt)</text>
151: <circle cx="330" cy="200" r="2.5" style="fill: #FB0"/>
152: <text x="325" y="215">P3 (Zielpunkt)</text>
153:
154: <!-- Kontrollpunkte (Anfasser) -->
155: <circle cx="280" cy="100" r="2.5" style="fill: #090"/>
156: <text x="275" y="115">P1 (Anfasser 1)</text>
157: <circle cx="180" cy="300" r="2.5" style="fill: #00C"/>
158: <text x="175" y="315">P2 (Anfasser 2)</text>
159:
160: <a xlink:href="http://de.wikipedia.org/wiki/B%C3%A9zierkurve" target="_blank">
161: <text x="20" y="50">Grundlagen bei Wikipedia
162: <set attributeName="fill" to="#090" begin="mouseover" end="mouseout"/>
163: </text>
164: </a>
165:
166: <a xlink:href="" cursor="pointer" onclick="return false">
167: <text x="70" y="380" onclick="g1.setAttribute('visibility','visible');
168: g2.setAttribute('visibility','hidden');ta.setAttribute('visibility','visible')">
169: SVG-Pfadsyntax
170: <set attributeName="fill" to="#00C" begin="mouseover" end="mouseout"/>
171: </text>
172: </a>
173:
174: <a xlink:href="" cursor="pointer" onclick="return false">
175: <text x="200" y="380" onclick="g2.setAttribute('visibility','visible');
176: g1.setAttribute('visibility','hidden');ta.setAttribute('visibility','visible')">
177: Bézier-Polynome
178: <set attributeName="fill" to="#F00" begin="mouseover" end="mouseout"/>
179: </text>
180: </a>
181:
182: <a xlink:href="" cursor="pointer" onclick="return false">
183: <text x="330" y="380" onclick="g2.setAttribute('visibility','hidden');
184: g1.setAttribute('visibility','hidden');ta.setAttribute('visibility','hidden')">
185: Kurven ausblenden
186: <set attributeName="fill" to="#FB0" begin="mouseover" end="mouseout"/>
187: </text>
188: </a>
189:
190: </svg>
[zum Anfang]
