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: <!-- experimentelle DTD-Erweiterung by TM 2004 -->
6: <!ATTLIST svg xmlns:a CDATA #FIXED "http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/">
7: <!ENTITY % defsExt "|a:transition">
8: <!ELEMENT a:transition (a:param?)>
9: <!ELEMENT a:param EMPTY>
10: <!ATTLIST a:transition id ID #IMPLIED
11: direction (forward|reverse) #REQUIRED dur CDATA #REQUIRED
12: type (barWipe|barnDoorWipe|fade|glitter|irisWipe) #REQUIRED
13: subType (crossFade|horizontal|leftToRight|random|rectangle|
14: topLeft|topToBottom|vertical) #REQUIRED>
15: <!ATTLIST a:param
16: name (sections|cellSize) #REQUIRED value CDATA #REQUIRED>
17: <!ATTLIST set a:transIn CDATA #IMPLIED>
18: ]>
19:
20: <!-- SVG - Learning by Coding - http://www.datenverdrahten.de/svglbc/ -->
21: <!-- Author: Dr. Thomas Meinike 05/04 - thomas@handmadecode.de -->
22:
23: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
24: xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" zoomAndPan="disable">
25:
26: <title>SVG - Learning by Coding</title>
27: <desc>SVG-Spezifikation in Beispielen</desc>
28:
29: <defs>
30:
31: <style type="text/css">
32: <![CDATA[
33:
34: *
35: {
36: font-family: sans-serif;
37: font-size: 12px;
38: }
39:
40: ]]>
41: </style>
42:
43: <!-- barWipe - Definitionen -->
44: <a:transition id="bw1" type="barWipe" subType="topToBottom" direction="forward" dur="2s">
45: <a:param name="sections" value="10"/>
46: </a:transition>
47: <a:transition id="bw2" type="barWipe" subType="topToBottom" direction="reverse" dur="2s">
48: <a:param name="sections" value="10"/>
49: </a:transition>
50: <a:transition id="bw3" type="barWipe" subType="leftToRight" direction="forward" dur="2s">
51: <a:param name="sections" value="10"/>
52: </a:transition>
53: <a:transition id="bw4" type="barWipe" subType="leftToRight" direction="reverse" dur="2s">
54: <a:param name="sections" value="10"/>
55: </a:transition>
56:
57: <!-- irisWipe - Definitionen -->
58: <a:transition id="iw1" type="irisWipe" subType="rectangle" direction="forward" dur="2s"/>
59: <a:transition id="iw2" type="irisWipe" subType="rectangle" direction="reverse" dur="2s"/>
60:
61: <!-- barnDoorWipe - Definitionen -->
62: <a:transition id="bd1" type="barnDoorWipe" subType="horizontal" direction="forward" dur="2s"/>
63: <a:transition id="bd2" type="barnDoorWipe" subType="horizontal" direction="reverse" dur="2s"/>
64: <a:transition id="bd3" type="barnDoorWipe" subType="vertical" direction="forward" dur="2s"/>
65: <a:transition id="bd4" type="barnDoorWipe" subType="vertical" direction="reverse" dur="2s"/>
66:
67: <!-- glitter - Definitionen -->
68: <a:transition id="gl1" type="glitter" subType="topToBottom" direction="forward" dur="2s">
69: <a:param name="cellSize" value="5"/>
70: </a:transition>
71: <a:transition id="gl2" type="glitter" subType="topToBottom" direction="reverse" dur="2s">
72: <a:param name="cellSize" value="5"/>
73: </a:transition>
74: <a:transition id="gl3" type="glitter" subType="leftToRight" direction="forward" dur="2s">
75: <a:param name="cellSize" value="5"/>
76: </a:transition>
77: <a:transition id="gl4" type="glitter" subType="leftToRight" direction="reverse" dur="2s">
78: <a:param name="cellSize" value="5"/>
79: </a:transition>
80: <a:transition id="gl5" type="glitter" subType="topLeft" direction="forward" dur="2s">
81: <a:param name="cellSize" value="5"/>
82: </a:transition>
83: <a:transition id="gl6" type="glitter" subType="topLeft" direction="reverse" dur="2s">
84: <a:param name="cellSize" value="5"/>
85: </a:transition>
86: <a:transition id="gl7" type="glitter" subType="random" direction="forward" dur="2s">
87: <a:param name="cellSize" value="5"/>
88: </a:transition>
89: <a:transition id="gl8" type="glitter" subType="random" direction="reverse" dur="2s">
90: <a:param name="cellSize" value="5"/>
91: </a:transition>
92:
93: <!-- fade - Definitionen -->
94: <a:transition id="fa" type="fade" subType="crossFade" direction="forward" dur="2s"/>
95:
96: <!-- graues und rotes Rechteck zum Überblenden -->
97: <rect id="re1" x="0" y="0" width="50" height="50" style="fill: #EEE; cursor: pointer"/>
98: <rect id="re2" x="0" y="0" width="50" height="50" style="fill: #F00; cursor: pointer"/>
99:
100: </defs>
101:
102: <text x="20" y="30" style="fill: #000; font-size: 24px">
103: Übergangseffekte mit a:transition (ASV 6 / SMIL 2.0)</text>
104: <text x="20" y="50">[sonst werden <tspan style="font-weight: bold">
105: beim Anklicken der grauen Rechtecke</tspan> die Effekte nicht angewendet]</text>
106:
107: <!-- barWipe - Anwendung -->
108: <text x="20" y="80" style="fill: #00C"><tspan style="font-weight: bold">
109: type="barWipe"</tspan> + subType="topToBottom | leftToRight"
110: + direction="forward | reverse"</text>
111: <text x="20" y="92" style="fill: #00C"> + <param name="sections"
112: value="integer"/></text>
113: <use xlink:href="#re1" x="20" y="100">
114: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="bw1"/>
115: </use>
116: <use xlink:href="#re1" x="80" y="100">
117: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="bw2"/>
118: </use>
119: <use xlink:href="#re1" x="140" y="100">
120: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="bw3"/>
121: </use>
122: <use xlink:href="#re1" x="200" y="100">
123: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="bw4"/>
124: </use>
125:
126: <!-- irisWipe - Anwendung -->
127: <text x="20" y="180" style="fill: #00C"><tspan style="font-weight: bold">
128: type="irisWipe"</tspan> + subType="rectangle"
129: + direction="forward | reverse"</text>
130: <use xlink:href="#re1" x="20" y="190">
131: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="iw1"/>
132: </use>
133: <use xlink:href="#re1" x="80" y="190">
134: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="iw2"/>
135: </use>
136:
137: <!-- barnDoorWipe - Anwendung -->
138: <text x="20" y="270" style="fill: #00C"><tspan style="font-weight: bold">
139: type="barnDoorWipe"</tspan> + subType="horizontal | vertical"
140: + direction="forward | reverse"</text>
141: <use xlink:href="#re1" x="20" y="280">
142: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="bd1"/>
143: </use>
144: <use xlink:href="#re1" x="80" y="280">
145: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="bd2"/>
146: </use>
147: <use xlink:href="#re1" x="140" y="280">
148: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="bd3"/>
149: </use>
150: <use xlink:href="#re1" x="200" y="280">
151: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="bd4"/>
152: </use>
153:
154: <!-- glitter - Anwendung -->
155: <text x="20" y="360" style="fill: #00C"><tspan style="font-weight: bold">
156: type="glitter"</tspan> + subType="topToBottom | leftToRight |
157: topLeft | random" + direction="forward | reverse"</text>
158: <text x="20" y="372" style="fill: #00C"> + <param name="cellSize"
159: value="integer"/></text>
160: <use xlink:href="#re1" x="20" y="380">
161: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="gl1"/>
162: </use>
163: <use xlink:href="#re1" x="80" y="380">
164: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="gl2"/>
165: </use>
166: <use xlink:href="#re1" x="140" y="380">
167: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="gl3"/>
168: </use>
169: <use xlink:href="#re1" x="200" y="380">
170: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="gl4"/>
171: </use>
172: <use xlink:href="#re1" x="260" y="380">
173: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="gl5"/>
174: </use>
175: <use xlink:href="#re1" x="320" y="380">
176: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="gl6"/>
177: </use>
178: <use xlink:href="#re1" x="380" y="380">
179: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="gl7"/>
180: </use>
181: <use xlink:href="#re1" x="440" y="380">
182: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="gl8"/>
183: </use>
184:
185: <!-- fade - Anwendung -->
186: <text x="20" y="460" style="fill: #00C"><tspan style="font-weight: bold">
187: type="fade"</tspan> + subType="crossFade"
188: + direction="forward"</text>
189: <use xlink:href="#re1" x="20" y="470">
190: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="fa"/>
191: </use>
192:
193: </svg>
[zum Anfang]
