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 02/03 - thomas@handmadecode.de -->
9:
10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
11: id="grafik">
12:
13: <defs>
14:
15: <style type="text/css">
16: <![CDATA[
17:
18: text
19: {
20: font-family: "Courier New", Courier, monospace;
21: font-size: 24px;
22: font-weight: bold;
23: fill: #090;
24: visibility: hidden;
25: }
26:
27: line
28: {
29: stroke: #E00;
30: stroke-width: 2px;
31: visibility: hidden;
32: }
33:
34: text.headline
35: {
36: fill: #000;
37: font-family: Arial, Helvetica, sans-serif;
38: font-size: 24px;
39: visibility: visible;
40: }
41:
42: ]]>
43: </style>
44:
45: </defs>
46:
47: <title>SVG - Learning by Coding</title>
48: <desc>SVG-Spezifikation in Beispielen</desc>
49: <text x="20" y="30" class="headline">Textanimation mit dem Element set</text>
50:
51: <text x="10" y="80">S<set attributeType="CSS" attributeName="visibility"
52: to="visible" begin="grafik.load+1s"/></text>
53: <text x="30" y="80">C<set attributeType="CSS" attributeName="visibility"
54: to="visible" begin="grafik.load+1.25s"/></text>
55: <text x="50" y="80">A<set attributeType="CSS" attributeName="visibility"
56: to="visible" begin="grafik.load+1.5s"/></text>
57: <text x="70" y="80">L<set attributeType="CSS" attributeName="visibility"
58: to="visible" begin="grafik.load+1.75s"/></text>
59: <text x="90" y="80">A<set attributeType="CSS" attributeName="visibility"
60: to="visible" begin="grafik.load+2s"/></text>
61: <text x="110" y="80">B<set attributeType="CSS" attributeName="visibility"
62: to="visible" begin="grafik.load+2.25s"/></text>
63: <text x="130" y="80">L<set attributeType="CSS" attributeName="visibility"
64: to="visible" begin="grafik.load+2.5s"/></text>
65: <text x="150" y="80">E<set attributeType="CSS" attributeName="visibility"
66: to="visible" begin="grafik.load+2.75s"/></text>
67: <text x="170" y="80"> <set attributeType="CSS" attributeName="visibility"
68: to="visible" begin="grafik.load+3s"/></text>
69: <text x="190" y="80">V<set attributeType="CSS" attributeName="visibility"
70: to="visible" begin="grafik.load+3.25s"/></text>
71: <text x="210" y="80">E<set attributeType="CSS" attributeName="visibility"
72: to="visible" begin="grafik.load+3.5s"/></text>
73: <text x="230" y="80">C<set attributeType="CSS" attributeName="visibility"
74: to="visible" begin="grafik.load+3.75s"/></text>
75: <text x="250" y="80">T<set attributeType="CSS" attributeName="visibility"
76: to="visible" begin="grafik.load+4s"/></text>
77: <text x="270" y="80">O<set attributeType="CSS" attributeName="visibility"
78: to="visible" begin="grafik.load+4.25s"/></text>
79: <text x="290" y="80">R<set attributeType="CSS" attributeName="visibility"
80: to="visible" begin="grafik.load+4.5s"/></text>
81: <text x="310" y="80"> <set attributeType="CSS" attributeName="visibility"
82: to="visible" begin="grafik.load+4.75s"/></text>
83: <text x="330" y="80">G<set attributeType="CSS" attributeName="visibility"
84: to="visible" begin="grafik.load+5s"/></text>
85: <text x="350" y="80">R<set attributeType="CSS" attributeName="visibility"
86: to="visible" begin="grafik.load+5.25s"/></text>
87: <text x="370" y="80">A<set attributeType="CSS" attributeName="visibility"
88: to="visible" begin="grafik.load+5.5s"/></text>
89: <text x="390" y="80">P<set attributeType="CSS" attributeName="visibility"
90: to="visible" begin="grafik.load+5.75s"/></text>
91: <text x="410" y="80">H<set attributeType="CSS" attributeName="visibility"
92: to="visible" begin="grafik.load+6s"/></text>
93: <text x="430" y="80">I<set attributeType="CSS" attributeName="visibility"
94: to="visible" begin="grafik.load+6.25s"/></text>
95: <text x="450" y="80">C<set attributeType="CSS" attributeName="visibility"
96: to="visible" begin="grafik.load+6.5s"/></text>
97: <text x="470" y="80">S<set attributeType="CSS" attributeName="visibility"
98: to="visible" begin="grafik.load+6.75s"/></text>
99:
100: <line x1="10" y1="55" x2="485" y2="55"><set attributeType="CSS"
101: attributeName="visibility" to="visible" begin="grafik.load+7s"/></line>
102: <line x1="10" y1="90" x2="485" y2="90"><set attributeType="CSS"
103: attributeName="visibility" to="visible" begin="grafik.load+7s"/></line>
104:
105: </svg>
[zum Anfang]
