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]
