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]
