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]
