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]
