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 07/04 - thomas@handmadecode.de -->
9: 10:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
11:
onload="Init(evt)">
12: 13:
<title>SVG - Learning by Coding</title>
14:
<desc>SVG-Spezifikation in Beispielen</desc>
15: 16:
<defs>
17: 18:
<style type="text/css">
19:
<![CDATA[
20: 21:
text
22:
{
23:
font-family: monospace;
24:
font-weight: bold;
25:
}
26: 27:
text.lz
28:
{
29:
fill: #090;
30:
font-size: 24px;
31:
}
32: 33:
text.headline
34:
{
35:
font-family: sans-serif;
36:
font-size: 24px;
37:
font-weight: normal;
38:
fill: #000;
39:
}
40: 41:
a text
42:
{
43:
fill: #00C;
44:
font-size: 14px;
45:
}
46: 47:
]]>
48:
</style>
49: 50:
<script type="text/javascript">
51:
<![CDATA[
52: 53:
var svgdoc,svgroot,laufzeit;
54: 55: 56:
function Init(load_evt)
57:
{
58:
svgdoc=load_evt.target.ownerDocument;
59:
svgroot=svgdoc.documentElement;
60:
laufzeit=svgdoc.getElementById("laufzeit");
61:
if(!window.XML)setInterval("Laufzeit()",1000);
62:
}
63: 64: 65:
function Laufzeit()
66:
{
67:
var curtime,std,min,sek;
68: 69:
curtime=svgroot.getCurrentTime();
70: 71:
sek=curtime;
72:
std=Math.floor(sek/3600);
73:
sek-=std*3600;
74:
min=Math.floor(sek/60);
75:
sek-=min*60;
76:
sek=Math.floor(sek);
77: 78:
std=(std<10)?"0"+std:std;
79:
min=(min<10)?"0"+min:min;
80:
sek=(sek<10)?"0"+sek:sek;
81: 82:
laufzeit.firstChild.data=std+":"+min+":"+sek;
83:
}
84: 85: 86:
function ZeitSetzen(t)
87:
{
88:
if(!window.XML)svgroot.setCurrentTime(t);
89:
}
90: 91:
]]>
92:
</script>
93: 94:
</defs>
95: 96:
<text class="headline" x="20" y="30">
97:
Die Methoden getCurrentTime() bzw. setCurrentTime()</text>
98: 99:
<text x="20" y="60">Laufzeit des aktuellen Scripts:</text>
100:
<text id="laufzeit" class="lz" x="20" y="90">00:00:00</text>
101: 102:
<a xlink:href="" cursor="pointer" onclick="return false">
103:
<text x="20" y="120" onclick="ZeitSetzen(0)">
104:
<set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
105:
<set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
106:
Zeit auf 00:00:00 setzen
107:
</text>
108:
</a>
109: 110:
<a xlink:href="" cursor="pointer" onclick="return false">
111:
<text x="250" y="120" onclick="ZeitSetzen(5415)">
112:
<set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
113:
<set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
114:
Zeit auf 01:30:15 setzen
115:
</text>
116:
</a>
117: 118:
</svg>
[zum Anfang]
