SVG – Learning by Coding

[ bezier-polynome.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 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-familysans-serif;
 24:         font-size12px;
 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&#233;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:   <!-- Startund 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&#233;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]