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: <!-- 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: <!-- Author: Dr. Thomas 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-family: sans-serif;
29: font-size: 12px;
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"><animateClock .../></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]
