SVG – Learning by Coding

[ textanimation.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 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"Couriermonospace;
 21:       font-size24px;
 22:       font-weightbold;
 23:       fill#090;
 24:       visibilityhidden;
 25:     }
 26: 
 27:     line
 28:     {
 29:       stroke#E00;
 30:       stroke-width2px;
 31:       visibilityhidden;
 32:     }
 33: 
 34:     text.headline
 35:     {
 36:       fill#000;
 37:       font-familyArialHelveticasans-serif;
 38:       font-size24px;
 39:       visibilityvisible;
 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]