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 05/05 - thomas@handmadecode.de -->
9:
10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
11:
12: <title>SVG - Learning by Coding</title>
13: <desc>SVG-Spezifikation in Beispielen</desc>
14:
15: <defs>
16:
17: <style type="text/css">
18: <![CDATA[
19:
20: /*
21: Universal-Selektor: Alle Elemente des Dokuments werden zunaechst
22: unsichtbar (und spaeter wieder sichtbar) gemacht.
23: */
24: *
25: {
26: visibility: hidden;
27: }
28:
29: /*
30: Elementtyp-Selektor: Rechtecke erhalten gelbe Fuellfarbe.
31: */
32: rect
33: {
34: fill: #FF0;
35: }
36:
37: /*
38: Elementtyp-Selektor: Kreise erhalten rote Fuellfarbe.
39: */
40: circle
41: {
42: fill: #F00;
43: }
44:
45: /*
46: Selektoren-Gruppierung: Deckkraft wird fuer Rechtecke
47: und Kreise auf 80% gesetzt (d. h. 20% Transparenz).
48: */
49: rect,circle
50: {
51: opacity: 0.8;
52: }
53:
54: /*
55: Nachfahren-Selektor mit Selektoren-Gruppierung kombiniert:
56: Alle darzustellenden Elemente werden wieder sichtbar gemacht
57: (Aufhebung der visibility-Vorgabe des Universal-Selektors).
58: */
59: svg rect,circle,text,line,image
60: {
61: visibility: visible;
62: }
63:
64: /*
65: Attribut-Selektor: Kreise mit Attribut cx="240" erhalten
66: gruene Fuellfarbe.
67: */
68: circle[cx="240"]
69: {
70: fill: #090;
71: }
72:
73: /*
74: Attribut-Selektor: Kreise mit Attribut cx="90" und Attribut cy="130"
75: erhalten hellblaue Fuellfarbe.
76: */
77: circle[cx="90"][cy="130"]
78: {
79: fill: #9CF;
80: }
81:
82: /*
83: Nachbar-Selektor: Rechtecke die nach Kreisen unterhalb desselben
84: Elternelements folgen, erhalten blaue Fuellfarbe.
85: */
86: circle + rect
87: {
88: fill: #00C;
89: }
90:
91: /*
92: Kind-Selektor: Rechtecke, die unmittelbare Kindelemente der Gruppe
93: mit ID="gruppe1" sind, erhalten graue Fuellfarbe.
94: */
95: g#gruppe1 > rect
96: {
97: fill: #CCC;
98: }
99:
100: /*
101: Nachfahren-Selektor: Rechtecke, die unterhalb vom g-Element mit
102: der ID="gruppe2" liegen, erhalten eine hellgruene Fuellfarbe.
103: */
104: g#gruppe2 rect
105: {
106: fill: #CFC;
107: }
108:
109: /*
110: ID-Selektor: Inhalte der Gruppe mit ID="gruppe2" erhalten roten Rand.
111: */
112: g#gruppe2
113: {
114: stroke: #F00;
115: }
116:
117: /*
118: ID-Selektor mit Pseudo-Klasse: Das erste direkt folgende Rechteck-Kindelement
119: unterhalb der Gruppe mit der ID="gruppe1" erhaelt blauen gestrichelten Rand.
120: */
121: g#gruppe1 > rect:first-child
122: {
123: stroke: #00C;
124: stroke-dasharray: 3,5;
125: }
126:
127: /*
128: Klassen-Selektor: Kreise mit der Klasse "extrakreis" erhalten
129: keine Fuellfarbe und einen schwarzen Rand.
130: */
131: circle.extrakreis
132: {
133: fill: none;
134: stroke: #000;
135: }
136:
137: ]]>
138: </style>
139:
140: </defs>
141:
142: <text x="20" y="30" style="fill: #000; font-size: 24px">
143: Ausgewählte CSS-Selektoren im Einsatz</text>
144: <text x="20" y="45">Details als Kommentare im Code</text>
145:
146: <circle cx="40" cy="80" r="20"/>
147: <circle cx="90" cy="80" r="20"/>
148: <circle class="extrakreis" cx="140" cy="80" r="20"/>
149: <circle cx="190" cy="80" r="20"/>
150: <circle cx="240" cy="80" r="20"/>
151:
152: <circle cx="40" cy="130" r="20"/>
153: <circle cx="90" cy="130" r="20"/>
154: <circle cx="140" cy="130" r="20"/>
155: <circle class="extrakreis" cx="190" cy="130" r="20"/>
156: <circle cx="240" cy="130" r="20"/>
157:
158: <circle cx="40" cy="180" r="20"/>
159: <rect x="70" y="160" width="40" height="40"/>
160: <rect x="120" y="160" width="40" height="40"/>
161: <rect x="170" y="160" width="40" height="40"/>
162: <circle cx="240" cy="180" r="20"/>
163:
164: <g id="gruppe1">
165: <rect x="20" y="210" width="40" height="40"/>
166: <rect x="70" y="210" width="40" height="40"/>
167: <g id="gruppe2">
168: <rect x="120" y="210" width="40" height="40"/>
169: <rect x="170" y="210" width="40" height="40"/>
170: </g>
171: <rect x="220" y="210" width="40" height="40"/>
172: </g>
173:
174: <line x1="285" y1="60" x2="285" y2="280" style="stroke: #CCC; stroke-width: 2px"/>
175: <image xlink:href="bilder/css_selectors.png" x="310" y="60" width="244" height="194"/>
176: <text x="20" y="275" style="fill: #00C; font-size: 12px">aktuelles Ergebnis</text>
177: <text x="310" y="275" style="fill: #00C; font-size: 12px">erwartetes Ergebnis</text>
178:
179: </svg>
[zum Anfang]
