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]
