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: <!ENTITY rad "2"><!-- Kreisradius -->
7:
8: ]>
9:
10: <!-- SVG - Learning by Coding - http://www.datenverdrahten.de/svglbc/ -->
11: <!-- Author: Dr. Thomas Meinike 02/04 - thomas@handmadecode.de -->
12:
13: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
14:
15: <title>SVG - Learning by Coding</title>
16: <desc>SVG-Spezifikation in Beispielen</desc>
17:
18: <defs>
19:
20: <style type="text/css">
21: <![CDATA[
22:
23: *
24: {
25: font-family: sans-serif;
26: font-size: 12px;
27: }
28:
29: .pkt
30: {
31: fill: #00C;
32: }
33:
34: .anf
35: {
36: fill: #F00;
37: }
38:
39: .cur
40: {
41: fill: none;
42: stroke: #090;
43: }
44:
45: .lin
46: {
47: fill: none;
48: stroke: #CCC;
49: stroke-width: 1px;
50: }
51:
52: ]]>
53: </style>
54:
55: </defs>
56:
57: <text x="20" y="30" style="fill: #000; font-size: 24px">
58: Bézier-Kurven</text>
59:
60: <!-- Kurvendefinitionen -->
61:
62: <!-- cubic C,c -->
63: <path class="cur" d="M 50,100 C 50,50 125,50 125,100"/>
64:
65: <!-- quadratic Q,q -->
66: <path class="cur" d="M 125,150 Q 50,175 200,200"/>
67:
68: <!-- smooth curveto S,s -->
69: <path class="cur" d="M 125,100 S 200,150 125,150"/>
70:
71: <!-- Kurvenpunkte -->
72: <circle class="pkt" cx="50" cy="100" r="&rad;"/>
73: <circle class="pkt" cx="125" cy="100" r="&rad;"/>
74: <circle class="pkt" cx="125" cy="150" r="&rad;"/>
75: <circle class="pkt" cx="200" cy="200" r="&rad;"/>
76:
77: <!-- Anfasser -->
78: <circle class="anf" cx="50" cy="50" r="&rad;"/>
79: <circle class="anf" cx="125" cy="50" r="&rad;"/>
80: <circle class="anf" cx="200" cy="150" r="&rad;"/>
81: <circle class="anf" cx="50" cy="175" r="&rad;"/>
82:
83: <!-- Hilfslinien -->
84: <line class="lin" x1="50" y1="50" x2="50" y2="100"/>
85: <line class="lin" x1="125" y1="50" x2="125" y2="100"/>
86: <line class="lin" x1="50" y1="175" x2="125" y2="150"/>
87: <line class="lin" x1="50" y1="175" x2="200" y2="200"/>
88: <line class="lin" x1="200" y1="150" x2="125" y2="150"/>
89: <line class="lin" x1="200" y1="150" x2="125" y2="100"/>
90:
91: <!-- Legende -->
92: <circle class="pkt" cx="50" cy="250" r="&rad;"/>
93: <text x="60" y="255">Kurvenpunkt</text>
94: <circle class="anf" cx="50" cy="270" r="&rad;"/>
95: <text x="60" y="275">Anfasser</text>
96:
97: </svg>
[zum Anfang]
