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 12/02 - thomas@handmadecode.de -->
9:
10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
11: onload="getSVGDoc(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: a text
22: {
23: fill: #F00;
24: font-size: 18px;
25: }
26:
27: ]]>
28: </style>
29:
30:
31: <script type="text/javascript">
32: <![CDATA[
33:
34: var svgdoc,svgroot;
35:
36:
37: function getSVGDoc(load_evt)
38: {
39: svgdoc=load_evt.target.ownerDocument;
40: svgroot=svgdoc.documentElement;
41:
42: svgroot.addEventListener("mouseover",LinkOver,false);
43: svgroot.addEventListener("mouseout",LinkOut,false);
44:
45: // Hinweis: EventListener kann ggf. mit
46: // removeEventListener("event",function,false) entfernt werden
47: }
48:
49:
50: function LinkOver(mouseover_evt)
51: {
52: // Funktion fuer mouseover-Events bei Texten in a-Elementen
53:
54: var objekt=mouseover_evt.target;
55:
56: if(objekt.parentNode.tagName=="a")
57: {
58: objekt.style.setProperty("fill","#00C","");
59: objekt.style.setProperty("text-decoration","underline","");
60: }
61: }
62:
63:
64: function LinkOut(mouseout_evt)
65: {
66: // Funktion fuer mouseout-Events bei Texten in a-Elementen
67:
68: var objekt=mouseout_evt.target;
69:
70: if(objekt.parentNode.tagName=="a")
71: {
72: objekt.style.setProperty("fill","#F00","");
73: objekt.style.setProperty("text-decoration","none","");
74: }
75: }
76:
77: ]]>
78: </script>
79:
80: </defs>
81:
82: <text x="20" y="30" style="fill: #000; font-size: 24px">
83: Element a (Hyperlinks, Hover-Effekt über EventListener)</text>
84:
85: <a xlink:href="http://www.w3.org/Graphics/SVG/" target="_top">
86: <text x="30" y="70">
87: W3C – Spezifikationen und Aktivitäten rund um SVG
88: </text>
89: </a>
90:
91: <a xlink:href="http://www.vnunet.de/testticker/video_grafik/article.asp?ArticleID=3589"
92: target="_top">
93: <text x="30" y="100">
94: Grafik-Tagwerk – Statische und dynamische SVG-Grafiken erstellen
95: </text>
96: </a>
97:
98: <a xlink:href="http://www.vnunet.de/testticker/video_grafik/article.asp?ArticleID=6940"
99: target="_top">
100: <text x="30" y="130">
101: Mobile Vektoren – Animationen und Effekte mit SVG
102: </text>
103: </a>
104:
105: <a xlink:href="http://www.et.fh-merseburg.de/person/meinike/PDF/TdF2002_Meinike.pdf"
106: target="_top">
107: <text x="30" y="160">
108: SVG – ein XML-basierter Grafikstandard für 2D-Vektorgrafiken (PDF)
109: </text>
110: </a>
111:
112: <a xlink:href="http://www.et.fh-merseburg.de/person/meinike/PDF/tekom2002_Wiesbaden_Meinike.htm"
113: target="_top">
114: <text x="30" y="190">
115: "On the fly"-Generierung von SVG-Dokumenten auf dem Webserver (SVG)
116: </text>
117: </a>
118:
119: <a xlink:href="http://www.et.fh-merseburg.de/person/meinike/mspecsvg/" target="_top">
120: <text x="30" y="220">
121: MSpec::SVG – Dynamische Generierung von Massenspektren im SVG-Format
122: </text>
123: </a>
124:
125: <a xlink:href="http://www.et.fh-merseburg.de/person/meinike/PDF/tekom2003_Wiesbaden_Meinike.pdf"
126: target="_top">
127: <text x="30" y="250">
128: SVG-Aktionsprogrammierung – Mit DOM-Methoden vom Ereignis zum Effekt (PDF)
129: </text>
130: </a>
131:
132: <a xlink:href="http://www.carto.net/papers/svg/links/" target="_top">
133: <text x="30" y="280">
134: carto:net – Links to SVG and mapping sites
135: </text>
136: </a>
137:
138: <a xlink:href="http://svg.tutorial.aptico.de/index.php" target="_top">
139: <text x="30" y="310">
140: SVG-Tutorial von aptico
141: </text>
142: </a>
143:
144: <a xlink:href="http://www.scale-a-vector.de/" target="_top">
145: <text x="30" y="340">
146: Mehr SVG-Informationen auf scale-a-vector.de
147: </text>
148: </a>
149:
150: <a xlink:href="http://www.svgx.org/" target="_top">
151: <text x="30" y="370">
152: Aktivitäten rund um SVG auf svgx.org
153: </text>
154: </a>
155:
156: </svg>
[zum Anfang]