SVG – Learning by Coding

[ a.svg --> Grafik anzeigen ]

  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 &#8211; 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 &#8211; 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 &#8211; 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 &#8211; 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 &#8211; 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 &#8211; 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 &#8211; 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]