SVG – Learning by Coding

[ animateClock.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 animateExt "|a:animateClock*">
 8:   <!ELEMENT a:animateClock EMPTY>
 9:   <!ATTLIST a:animateClock to CDATA #IMPLIED by CDATA #IMPLIED begin CDATA #IMPLIED>
10: ]>
11: 
12: <!-- SVG Learning By Coding http://www.datenverdrahten.de/svglbc/ -->
13: <!--    AuthorDrThomas Meinike 08/04 thomas@handmadecode.de     -->
14: 
15: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
16:      xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/">
17: 
18:   <title>SVG Learning By Coding</title>
19:   <desc>SVG-Spezifikation in Beispielen</desc>
20: 
21:   <defs>
22: 
23:     <style type="text/css">
24:       <![CDATA[
25: 
26:       *
27:       {
28:         font-familysans-serif;
29:         font-size12px;
30:       }
31: 
32:       ]]>
33:     </style>
34: 
35:   </defs>
36: 
37:   <text x="20" y="30" style="fill: #000; font-size: 24px">
38:     Animationen steuern mit animateClock (ASV 3/6)</text>
39: 
40:   <circle cx="40" cy="70" r="20" style="fill: #F00">
41:     <animate attributeName="cx" attributeType="XML" from="40" to="500"
42:       begin="0s" dur="30s" fill="freeze">
43:       <a:animateClock to="0s" begin="test1.click"/>
44:       <a:animateClock to="15s" begin="test2.click"/>
45:       <a:animateClock to="30s" begin="test3.click"/>
46:       <a:animateClock by="5s" begin="test4.click"/>
47:       <a:animateClock by="-5s" begin="test5.click"/>
48:     </animate>
49:   </circle>
50: 
51:   <line x1="40" y1="50" x2="40" y2="90" style="stroke: #00C"/>
52:   <line x1="270" y1="50" x2="270" y2="90" style="stroke: #00C"/>
53:   <line x1="500" y1="50" x2="500" y2="90" style="stroke: #00C"/>
54:   <text x="30" y="100">[0s]</text>
55:   <text x="260" y="100">[15s]</text>
56:   <text x="490" y="100">[30s]</text>
57: 
58:   <text x="30" y="130" style="fill: #F00">&lt;animateClock .../&gt;</text>
59: 
60:   <a id="test1" xlink:href="">
61:     <text x="60" y="150">to="0s"</text>
62:     <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
63:     <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
64:   </a>
65:   <a id="test2" xlink:href="">
66:     <text x="60" y="170">to="15s"</text>
67:     <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
68:     <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
69:   </a>
70:   <a id="test3" xlink:href="">
71:     <text x="60" y="190">to="30s"</text>
72:     <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
73:     <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
74:   </a>
75:   <a id="test4" xlink:href="">
76:     <text x="60" y="210">by="5s"</text>
77:     <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
78:     <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
79:   </a>
80:   <a id="test5" xlink:href="">
81:     <text x="60" y="230">by="-5s"</text>
82:     <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
83:     <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
84:   </a>
85: 
86: </svg>

[zum Anfang]