SVG – Learning by Coding

[ transition.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:   <!-- 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: <!--    AuthorDrThomas 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-familysans-serif;
 37:         font-size12px;
 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=&quot;barWipe&quot;</tspan> + subType=&quot;topToBottom leftToRight&quot;
110:     direction=&quot;forward reverse&quot;</text>
111:   <text x="20" y="92" style="fill: #00C"> + &lt;param name=&quot;sections&quot;
112:     value=&quot;integer&quot;/&gt;</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=&quot;irisWipe&quot;</tspan> + subType=&quot;rectangle&quot;
129:     direction=&quot;forward reverse&quot;</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=&quot;barnDoorWipe&quot;</tspan> + subType=&quot;horizontal vertical&quot;
140:     direction=&quot;forward reverse&quot;</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=&quot;glitter&quot;</tspan> + subType=&quot;topToBottom leftToRight |
157:     topLeft random&quot; + direction=&quot;forward reverse&quot;</text>
158:   <text x="20" y="372" style="fill: #00C"> + &lt;param name=&quot;cellSize&quot;
159:     value=&quot;integer&quot;/&gt;</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=&quot;fade&quot;</tspan> + subType=&quot;crossFade&quot;
188:     direction=&quot;forward&quot;</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]