SVG – Learning by Coding

[ css_selectors.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 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-SelektorAlle Elemente des Dokuments werden zunaechst
 22:         unsichtbar (und spaeter wieder sichtbargemacht.
 23:       */
 24:       *
 25:       {
 26:         visibilityhidden;
 27:       }
 28: 
 29:       /*
 30:         Elementtyp-SelektorRechtecke erhalten gelbe Fuellfarbe.
 31:       */
 32:       rect
 33:       {
 34:         fill#FF0;
 35:       }
 36: 
 37:       /*
 38:         Elementtyp-SelektorKreise erhalten rote Fuellfarbe.
 39:       */
 40:       circle
 41:       {
 42:         fill#F00;
 43:       }
 44: 
 45:       /*
 46:         Selektoren-GruppierungDeckkraft wird fuer Rechtecke
 47:         und Kreise auf 80gesetzt (dh20Transparenz).
 48:       */
 49:       rect,circle
 50:       {
 51:         opacity0.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:         visibilityvisible;
 62:       }
 63: 
 64:       /*
 65:         Attribut-SelektorKreise mit Attribut cx="240" erhalten
 66:         gruene Fuellfarbe.
 67:       */
 68:       circle[cx="240"]
 69:       {
 70:         fill#090;
 71:       }
 72: 
 73:       /*
 74:         Attribut-SelektorKreise 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-SelektorRechtecke die nach Kreisen unterhalb desselben
 84:         Elternelements folgenerhalten blaue Fuellfarbe.
 85:       */
 86:       circle rect
 87:       {
 88:         fill#00C;
 89:       }
 90: 
 91:       /*
 92:         Kind-SelektorRechtecke, die unmittelbare Kindelemente der Gruppe
 93:         mit ID="gruppe1" sinderhalten graue Fuellfarbe.
 94:       */
 95:       g#gruppe1 > rect
 96:       {
 97:         fill#CCC;
 98:       }
 99: 
100:       /*
101:         Nachfahren-SelektorRechtecke, die unterhalb vom g-Element mit
102:         der ID="gruppe2" liegenerhalten eine hellgruene Fuellfarbe.
103:       */
104:       g#gruppe2 rect
105:       {
106:         fill#CFC;
107:       }
108: 
109:       /*
110:         ID-SelektorInhalte der Gruppe mit ID="gruppe2" erhalten roten Rand.
111:       */
112:       g#gruppe2
113:       {
114:         stroke#F00;
115:       }
116: 
117:       /*
118:         ID-Selektor mit Pseudo-KlasseDas 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-dasharray3,5;
125:       }
126: 
127:       /*
128:         Klassen-SelektorKreise mit der Klasse "extrakreis" erhalten
129:         keine Fuellfarbe und einen schwarzen Rand.
130:       */
131:       circle.extrakreis
132:       {
133:         fillnone;
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]