SVG - Learning By Coding

SVG – Learning By Coding

Codebook

Beispiele der Website

http://svglbc.datenverdrahten.de/

von Dr. Thomas Meinike 2002–2005

(Stand: 2004-06-15 / 2005-07-03)

http://svglbc.datenverdrahten.de/

.:. SVG – Learning By Coding :: Codebook – Seite 2 .:.

Inhaltsverzeichnis a.svg ................................................................... 5 accessKey.svg ........................................................... 7 ampel.svg ............................................................... 8 animate.svg ............................................................. 9 animateColor.svg ....................................................... 10 animateMotion.svg ...................................................... 11 animateTransform.svg ................................................... 12 attributes.svg ......................................................... 13 audio.svg .............................................................. 14 barchart.svg ........................................................... 15 baseline-shift.svg ..................................................... 16 begin_endElement.svg ................................................... 17 bezier-kurven.svg ...................................................... 19 circle.svg ............................................................. 20 clipPath.svg ........................................................... 21 contextMenu.svg ........................................................ 22 create_image.svg ....................................................... 26 css_extern.svg ......................................................... 27 extern.css zu css_extern.svg ........................................... 28 cursor.svg ............................................................. 28 defaultFont.svg ........................................................ 30 digitaluhr.svg ......................................................... 31 dispatchEvent.svg ...................................................... 32 display_visibility.svg ................................................. 33 doctype-features.svg ................................................... 35 domtest1.svg ........................................................... 37 domtest2.svg ........................................................... 38 draganddrop.svg ........................................................ 40 drawlines.svg .......................................................... 42 drawshapes.svg ......................................................... 44 eingabefelder.svg ...................................................... 50 ellipse.svg ............................................................ 52 embedded_fonts.svg ..................................................... 53 embedded_images.svg .................................................... 56 entities.svg ........................................................... 58 event-handler.svg ...................................................... 59 farben.svg ............................................................. 60 farbnamen.svg .......................................................... 61 fill-rule.svg .......................................................... 68 filter_feFilterName.svg ................................................ 68 filter_animation.svg ................................................... 69 filter_ColorMatrix.svg ................................................. 70 filter_Composite.svg ................................................... 72 filter_Displacement.svg ................................................ 73 filter_Flood.svg ....................................................... 74 filter_ImageBlend.svg .................................................. 75 filter_Merge.svg ....................................................... 76 filter_Morphology.svg .................................................. 77 filter_PointLight.svg .................................................. 78 filter_SpotLight.svg ................................................... 79 filter_Tile.svg ........................................................ 80 filter_Turbulence.svg .................................................. 81 flowtext.svg ........................................................... 82 font-related.svg ....................................................... 83 font-stretch.svg ....................................................... 86 foreignObject.svg ...................................................... 87 funktionsplotter.svg ................................................... 88 g.svg .................................................................. 90 g_animation.svg ........................................................ 91


g_animateMotion.svg .................................................... 92 get_setId.svg .......................................................... 93 get_setSrc.svg ......................................................... 94 getbbox.svg ............................................................ 95 getProperty.svg ........................................................ 96 geturl.svg ............................................................. 97 grad_animation.svg ..................................................... 99 handleClicks.svg ...................................................... 100 image.svg ............................................................. 101 ip_in_motion.svg ...................................................... 102 js_extern.svg ......................................................... 103 extern.js zu js_extern.svg ............................................ 104 kerning.svg ........................................................... 104 keySplines.svg ........................................................ 105 klassen_tauschen.svg .................................................. 107 lauftext.svg .......................................................... 109 leerraum.svg .......................................................... 110 letter-spacing.svg .................................................... 111 line.svg .............................................................. 112 linearGradient.svg .................................................... 113 marker.svg ............................................................ 114 mask.svg .............................................................. 115 massenspektrum.svg .................................................... 116 matrix.svg ............................................................ 119 matrix_onthefly1.svg .................................................. 120 matrix_onthefly2.svg .................................................. 122 memoryspiel1.svg ...................................................... 124 memoryspiel2.svg ...................................................... 128 metadata.svg .......................................................... 133 mouse-button.svg ...................................................... 133 namespace.svg ......................................................... 134 object_details.svg .................................................... 136 objekte_top.svg ....................................................... 141 opacity.svg ........................................................... 142 opacity-rollovers.svg ................................................. 143 parsexml.svg .......................................................... 144 objekte.xml zu parsexml.svg ........................................... 146 path.svg .............................................................. 146 pathinfo.svg .......................................................... 147 pattern.svg ........................................................... 148 periodensystem.svg .................................................... 149 ptable.php zu periodensystem.svg ...................................... 157 piechart.svg .......................................................... 159 piechart_movearc.svg .................................................. 161 point_distance.svg .................................................... 164 pointer-events.svg .................................................... 165 polygon.svg ........................................................... 166 polygon_area.svg ...................................................... 167 polyline.svg .......................................................... 168 pulldownmenue_d.svg ................................................... 169 pulldownmenue_s.svg ................................................... 173 posturl.svg ........................................................... 176 primitive_rose.svg .................................................... 178 radialGradient.svg .................................................... 179 rcc-simplebutton.svg .................................................. 180 rect.svg .............................................................. 182 rotate_rect.svg ....................................................... 183 rrggbb-farben.svg ..................................................... 185 rss-newsfeed.svg ...................................................... 187 rss-newsfeed.php zu rss-newsfeed.svg .................................. 189 save_disable.svg ...................................................... 190 save_snapshot.svg ..................................................... 192 schieberegler.svg ..................................................... 194


script.svg ............................................................ 196 set.svg ............................................................... 197 simple_shadows.svg .................................................... 198 stroke-properties.svg ................................................. 199 style.svg ............................................................. 200 style_object.svg ...................................................... 201 supershapes.svg ....................................................... 203 svg_geruest.svg ....................................................... 206 svg_in_svg.svg ........................................................ 207 svgdomscripting.svg ................................................... 208 switch.svg ............................................................ 214 symbol.svg ............................................................ 214 text.svg .............................................................. 215 text-anchor.svg ....................................................... 215 textanimation.svg ..................................................... 216 textbearbeiten.svg .................................................... 218 text-decoration.svg ................................................... 220 textinformationen.svg ................................................. 221 textLength.svg ........................................................ 224 textPath.svg .......................................................... 225 text-rendering.svg .................................................... 226 textrichtung.svg ...................................................... 227 textrotate.svg ........................................................ 228 tooltip.svg ........................................................... 229 tooltip_mehrzeilig.svg ................................................ 231 transform.svg ......................................................... 233 transition.svg ........................................................ 235 tref.svg .............................................................. 238 tspan.svg ............................................................. 238 un_pause_anim.svg ..................................................... 239 unicode.svg ........................................................... 240 use.svg ............................................................... 241 user_colors.svg ....................................................... 242 video.svg ............................................................. 243 view.svg .............................................................. 244 viewBox.svg ........................................................... 245 viewport1.svg zu viewBox.svg .......................................... 246 viewport2.svg zu viewBox.svg .......................................... 247 viewport3.svg zu viewBox.svg .......................................... 248 viewport4.svg zu viewBox.svg .......................................... 249 wavelength2rgb.svg .................................................... 250 weather.svg ........................................................... 252 weather.php zu weather.svg............................................. 255 websichere_farben.svg ................................................. 256 writing-mode.svg ...................................................... 257 wuerfelspiel.svg ...................................................... 258 xml_space.svg ......................................................... 260 xml-xslt-bsp1.svg ..................................................... 261 einwohnerdaten.xml zu xml-xslt-bsp1.svg ............................... 263 einwohnerdaten.xsl zu xml-xslt-bsp1.svg ............................... 265 xml-xslt-bsp2.svg ..................................................... 267 zufallszahlen.xml zu xml-xslt-bsp2.svg................................. 267 zufallszahlen.xsl zu xml-xslt-bsp2.svg................................. 268 zufallszahlen.php zu xml-xslt-bsp2.svg................................. 269 zeichenreihenfolge.svg ................................................ 270 zoomAndPan.svg ........................................................ 271 zufallsfarben1.svg .................................................... 272 zufallsfarben2.svg .................................................... 274


a.svg

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:  8:  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>

accessKey.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: onload="window.focus()"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: 16: <text x="20" y="30" style="fill: #000; font-size: 24px"> 17: Animationen mit accessKey steuern</text> 18: 19: <text x="30" y="90" style="font-size: 18px; fill: #00C"> 20: <set attributeName="fill" attributeType="CSS" to="#F00" begin="accessKey(r)"/> 21: <set attributeName="fill" attributeType="CSS" to="#00C" begin="accessKey(b)"/> 22: Dieser Text wird rot mit der Taste "R" und blau mit der Taste "B".


23: </text> 24: 25: <text x="30" y="120" style="font-size: 18px; fill: #090"> 26: Der Kreis setzt sich mit der Taste "S" in Bewegung. 27: </text> 28: 29: <circle cx="50" cy="180" r="20" style="fill: #090"> 30: <animate attributeName="cx" attributeType="XML" from="50" to="500" 31: dur="10s" begin="accessKey(s)" fill="freeze"/> 32: </circle> 33: 34: <text x="30" y="260"> 35: [vorher ggf. zum Setzen des Fokus in den Zeichenbereich klicken] 36: </text> 37: 38: </svg>

ampel.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <style type="text/css"> 18: <![CDATA[ 19: 20: .ampel 21: { 22: fill: none; 23: stroke: #000; 24: stroke-width: 2px; 25: } 26: 27: line 28: { 29: stroke: #000; 30: stroke-width: 2px; 31: } 32: 33: ]]> 34: </style> 35: 36: </defs> 37:


38: <text x="20" y="30" style="fill: #000; font-size: 24px">Ampel-Animation</text> 39: 40: <rect class="ampel" x="100" y="60" width="30" height="100"/> 41: <line x1="100" y1="230" x2="130" y2="230"/> 42: <line x1="115" y1="160" x2="115" y2="230"/> 43: 44: <circle id="k1" class="ampel" cx="115" cy="80" r="10"/> 45: <circle id="k2" class="ampel" cx="115" cy="110" r="10"/> 46: <circle id="k3" class="ampel" cx="115" cy="140" r="10"/> 47: 48: <animate attributeName="fill" attributeType="CSS" begin="0s;gelb.end" 49: xlink:href="#k3" dur="0.01s" from="none" to="#0F0" fill="freeze"/> 50: 51: <animate attributeName="fill" attributeType="CSS" begin="prev.end+6s" 52: xlink:href="#k2" dur="0.01s" from="none" to="#FF0" fill="freeze"/> 53: <animate attributeName="fill" attributeType="CSS" begin="prev.begin" 54: xlink:href="#k3" dur="0.01s" from="#0F0" to="none" fill="freeze"/> 55: 56: <animate attributeName="fill" attributeType="CSS" begin="prev.end+3s" 57: xlink:href="#k1" dur="0.01s" from="none" to="#F00" fill="freeze"/> 58: <animate attributeName="fill" attributeType="CSS" begin="prev.begin" 59: xlink:href="#k2" dur="0.01s" from="#FF0" to="none" fill="freeze"/> 60: 61: <animate attributeName="fill" attributeType="CSS" begin="prev.end+6s" 62: xlink:href="#k2" dur="0.01s" from="none" to="#FF0" fill="freeze"/> 63: <animate attributeName="fill" attributeType="CSS" begin="prev.begin" 64: xlink:href="#k1" dur="0.01s" from="#F00" to="none" fill="freeze"/> 65: 66: <animate attributeName="fill" attributeType="CSS" begin="prev.end+3s" 67: xlink:href="#k2" id="gelb" dur="0.01s" from="#FF0" to="none" fill="freeze"/> 68: 69: </svg>

animate.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px"> 15: Element animate</text> 16:


17: <rect x="50" y="50" width="0" height="80" style="fill: #F00"> 18: <animate attributeName="width" attributeType="XML" start="0s" dur="10s" 19: from="0" to="100" fill="freeze"/> 20: </rect> 21: 22: <rect x="50" y="150" width="100" height="80" style="fill: #00C"> 23: <animate attributeName="x" attributeType="XML" start="0s" dur="10s" 24: from="50" to="200" fill="freeze"/> 25: </rect> 26: 27: <circle cx="50" cy="300" r="10" style="fill: #FF0"> 28: <animate attributeName="fill" attributeType="CSS" begin="mouseover" 29: dur="2s" from="#FF0" to="#F00" fill="freeze"/> 30: <animate attributeName="fill" attributeType="CSS" begin="mouseout" 31: dur="2s" from="#F00" to="#FF0" fill="freeze"/> 32: </circle> 33: 34: <text x="70" y="305">Kreis berühren!</text> 35: 36: </svg>

animateColor.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px"> 15: Element animateColor</text> 16: 17: <rect x="50" y="50" width="100" height="80" style="fill: #F00"> 18: <animateColor attributeName="fill" attributeType="CSS" start="0s" dur="10s" 19: values="#F00;#090;#00C" repeatCount="indefinite"/> 20: </rect> 21: 22: <rect x="50" y="150" width="100" height="80" style="fill: #F00"> 23: <animateColor attributeName="fill" attributeType="CSS" start="10s" dur="5s" 24: from="#F00" to="#00C" fill="freeze"/> 25: </rect> 26: 27: </svg>


animateMotion.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px"> 15: Element animateMotion (mpath)</text> 16: 17: <path d="M 100,100 L 300,50 A 100,100 0 0,1 300,200 Z" 18: style="fill: none; stroke: #CCC; stroke-width: 1px"/> 19: <path id="einpfad" d="M 100,250 L 300,250 L 300,350 L 100,350 Z" 20: style="fill: none; stroke: #CCC; stroke-width: 1px"/> 21: 22:  23: <circle cx="0" cy="0" r="5" style="fill: #F00"> 24: <animateMotion begin="0s" dur="5s" repeatDur="indefinite" 25: path="M 100,100 L 300,50 A 100,100 0 0,1 300,200 Z"/> 26: </circle> 27: 28:  29: <rect x="-5" y="-5" width="11" height="11" style="fill: #00C"> 30: <animateMotion begin="0s" dur="10s" rotate="45" repeatDur="indefinite"> 31: <mpath xlink:href="#einpfad"/> 32: </animateMotion> 33: </rect> 34: 35: </svg>


animateTransform.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px"> 15: Element animateTransform</text> 16: 17: <rect x="300" y="80" width="100" height="80" style="fill: #F00"> 18: <animateTransform attributeName="transform" attributeType="XML" 19: type="rotate" from="0" to="60" begin="2s" dur="10s" fill="freeze"/> 20: </rect> 21: 22: <rect x="30" y="80" width="100" height="80" style="fill: #00C"> 23: <animateTransform attributeName="transform" attributeType="XML" 24: type="translate" from="0,0" to="300,200" begin="2s" dur="10s" fill="freeze"/> 25: </rect> 26: 27: <rect x="170" y="280" width="100" height="80" style="fill: #090"> 28: <animateTransform attributeName="transform" attributeType="XML" 29: type="scale" from="1" to="0.2" begin="2s" dur="10s" fill="freeze"/> 30: </rect> 31: 32: </svg>


attributes.svg

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:  8:  9: 10: 11: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: 16: <defs> 17: 18: <script type="text/javascript"> 19: <![CDATA[ 20: 21: function AttrInfos(click_evt) 22: { 23: var obj,out=""; 24: obj=click_evt.target; 25: out+="Objekt : "+obj; 26: out+="\n\nhasAttributes() : "+obj.hasAttributes(); 27: 28: if(obj.hasAttributes()) 29: { 30: attr=obj.attributes; 31: out+="\n\nattributes : "+attr; 32: out+="\n\nAnzahl Attribute : "+attr.length; 33: 34: for(i=0;i<attr.length;i++) 35: { 36: out+="\nAttribut : "+attr.item(i).nodeName; 37: out+=" - Wert : "+attr.item(i).nodeValue; 38: } 39: } 40: 41: alert(out); 42: } 43:


44: ]]> 45: </script> 46: 47: </defs> 48: 49: <text x="30" y="30" style="fill: #000; font-size: 24px"> 50: attributes / hasAttributes() / nodeName / nodeValue 51: </text> 52: 53: <rect x="90" y="70" width="40" height="40" style="fill: #00C" 54: onclick="AttrInfos(evt)"/> 55: 56: <circle cx="170" cy="90" r="20" style="fill: #F00" 57: onclick="AttrInfos(evt)"/> 58: 59: <polygon points="210,110 230,70 250,110" style="fill: #090" 60: onclick="AttrInfos(evt)"/> 61: 62: <text x="120" y="140" onclick="AttrInfos(evt)">Objekte anklicken!</text> 63: 64: </svg>

audio.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: <text x="20" y="30" style="fill: #000; font-size: 24px">Element a:audio (ASV)</text> 16: 17: <a:audio xlink:href="audvid/FRESSEHA.MP3" volume="1" pan="0" begin="10s" repeatCount="1" /> 18:  19: 20: <a xlink:href="http://www.nuhr.de/" target="_top"> 21: <text x="30" y="60" style="fill: #00C; font-size: 14px"> 22: Es sollte nach 10 Sekunden ein Spruch von Dieter Nuhr zu hören sein ... ;-) 23: </text> 24: </a> 25: 26: </svg>


barchart.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <defs> 13: <filter id="flt"> 14: <feGaussianBlur in="SourceAlpha" stdDeviation="0.5" result="blur"/> 15: <feSpecularLighting in="blur" surfaceScale="5" specularConstant="0.5" 16: specularExponent="10" result="specOut" style="lighting-color: #FFF"> 17: <fePointLight x="-5000" y="-5000" z="5000"/> 18: </feSpecularLighting> 19: <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut2"/> 20: <feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic" 21: k1="0" k2="1" k3="1" k4="0"/> 22: </filter> 23: </defs> 24: 25: <title>SVG - Learning By Coding</title> 26: <desc>SVG-Spezifikation in Beispielen</desc> 27: <text x="20" y="30" style="fill: #000; font-size: 24px">Balken-Diagramm</text> 28: 29: <rect x="100" y="80" width="0" height="15" style="fill: #FFC; filter: url(#flt)"> 30: <animate attributeName="width" attributeType="XML" begin="0s" dur="10s" fill="freeze" from="0" to="139"/> 31: </rect> 32: <text x="50" y="91" style="font-size: 12px; text-anchor: right">Text 1</text> 33: <text x="249" y="91" style="font-size: 12px; text-anchor: right; visibility: hidden">[17.39%] 34: <animate attributeName="visibility" attributeType="CSS" begin="10s" dur="2s" fill="freeze" from="hidden" to="visible" calcMode="discrete"/> 35: </text> 36: <rect x="100" y="102" width="0" height="15" style="fill: #F00; filter: url(#flt)"> 37: <animate attributeName="width" attributeType="XML" begin="0s" dur="10s" fill="freeze" from="0" to="104"/> 38: </rect> 39: <text x="50" y="113" style="font-size: 12px; text-anchor: right">Text 2</text> 40: <text x="214" y="113" style="font-size: 12px; text-anchor: right; visibility: hidden">[13.04%] 41: <animate attributeName="visibility" attributeType="CSS" begin="10s" dur="2s" fill="freeze" from="hidden" to="visible" calcMode="discrete"/> 42: </text> 43: <rect x="100" y="125" width="0" height="15" style="fill: #090; filter: url(#flt)"> 44: <animate attributeName="width" attributeType="XML" begin="0s" dur="10s" fill="freeze" from="0" to="208"/> 45: </rect> 46: <text x="50" y="136" style="font-size: 12px; text-anchor: right">Text 3</text> 47: <text x="318" y="136" style="font-size: 12px; text-anchor: right; visibility: hidden">[26.09%]


48: <animate attributeName="visibility" attributeType="CSS" begin="10s" dur="2s" fill="freeze" from="hidden" to="visible" calcMode="discrete"/> 49: </text> 50: <rect x="100" y="147" width="0" height="15" style="fill: #00C; filter: url(#flt)"> 51: <animate attributeName="width" attributeType="XML" begin="0s" dur="10s" fill="freeze" from="0" to="278"/> 52: </rect> 53: <text x="50" y="158" style="font-size: 12px; text-anchor: right">Text 4</text> 54: <text x="388" y="158" style="font-size: 12px; text-anchor: right; visibility: hidden">[34.78%] 55: <animate attributeName="visibility" attributeType="CSS" begin="10s" dur="2s" fill="freeze" from="hidden" to="visible" calcMode="discrete"/> 56: </text> 57: <rect x="100" y="170" width="0" height="15" style="fill: #000; filter: url(#flt)"> 58: <animate attributeName="width" attributeType="XML" begin="0s" dur="10s" fill="freeze" from="0" to="69"/> 59: </rect> 60: <text x="50" y="181" style="font-size: 12px; text-anchor: right">Text 5</text> 61: <text x="179" y="181" style="font-size: 12px; text-anchor: right; visibility: hidden">[8.70%] 62: <animate attributeName="visibility" attributeType="CSS" begin="10s" dur="2s" fill="freeze" from="hidden" to="visible" calcMode="discrete"/> 63: </text> 64: 65: <a xlink:href="http://www.datenverdrahten.de/svgphp/" target="_top"> 66: <text x="30" y="250" style="font-size: 12px; fill: #00C">[Siehe SVG::PHP – Generierung von Kreis- und Balkendiagrammen] 67: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 68: <set attributeName="text-decoration" attributeType="CSS" to="underline" begin="mouseover"/> 69: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 70: <set attributeName="text-decoration" attributeType="CSS" to="none" begin="mouseout"/> 71: </text> 72: </a> 73: 74: </svg>

baseline-shift.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <style type="text/css"> 18: <![CDATA[ 19:


20: text 21: { 22: font-size: 18px; 23: fill: #333; 24: } 25: 26: tspan 27: { 28: font-size: 18px; 29: fill: #00C; 30: } 31: 32: tspan.tief 33: { 34: font-size: 12px; 35: baseline-shift: -5px; 36: fill: orange; 37: } 38: 39: tspan.hoch 40: { 41: font-size: 12px; 42: baseline-shift: 10px; 43: fill: orange; 44: } 45: 46: ]]> 47: </style> 48: 49: </defs> 50: 51: <text x="20" y="30" style="fill: #000; font-size: 24px"> 52: Eigenschaft baseline-shift 53: </text> 54: 55: <line x1="20" y1="100" x2="320" y2="100"/> 56: 57: <text x="30" y="100"> 58: baseline-shift: 59: <tspan style="baseline-shift: 20px">20px</tspan> 60: <tspan style="baseline-shift: super">super</tspan> 61: <tspan style="baseline-shift: sub">sub</tspan> 62: <tspan style="baseline-shift: -20px">-20px</tspan> 63: </text> 64: 65: <text x="30" y="180" style="fill: orange; font-weight: bold"> 66: Das Dichromat-Ion: Cr<tspan class="tief">2</tspan>O<tspan 67: class="tief">7</tspan><tspan class="hoch">2-</tspan> 68: </text> 69: 70: </svg>

begin_endElement.svg

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:  8:  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: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc,ani1; 22: 23: 24: function Init(load_evt) 25: { 26: svgdoc=load_evt.target.ownerDocument; 27: ani1=svgdoc.getElementById("animation1"); 28: } 29: 30: 31: function AnimInfo(beginend_evt,txt) 32: { 33: var info; 34: info="[Animation wurde "+txt+".]"; 35: svgdoc.getElementById("infotext").firstChild.data=info; 36: } 37: 38: ]]> 39: </script> 40: 41: </defs> 42: 43: <text x="20" y="25" style="fill: #000; font-size: 24px"> 44: Animationsmethoden beginElement() / endElement()</text> 45: <text x="20" y="55" style="fill: #000; font-size: 24px"> 46: und beginElementAt() / endElementAt()</text> 47: 48: <circle cx="80" cy="100" r="20" style="fill: #090"> 49: <animate id="animation1" attributeName="cx" attributeType="XML" from="80" 50: to="500" begin="indefinite" end="indefinite" repeatCount="indefinite" dur="10s" 51: fill="freeze" onbegin="AnimInfo(evt,'gestartet')" onend="AnimInfo(evt,'beendet')"/> 52: </circle> 53: 54: <a xlink:href=""> 55: <text x="30" y="150" style="fill: #F00" onclick="ani1.beginElement()"> 56: Start 57: </text> 58: </a> 59: 60: <a xlink:href=""> 61: <text x="100" y="150" style="fill: #00C" onclick="ani1.endElement()"> 62: Stopp 63: </text> 64: </a> 65: 66: <a xlink:href=""> 67: <text x="30" y="170" style="fill: #F00" onclick="ani1.beginElementAt(1)"> 68: Start (+1s) 69: </text> 70: </a> 71: 72: <a xlink:href=""> 73: <text x="100" y="170" style="fill: #00C" onclick="ani1.endElementAt(2)"> 74: Stopp (+2s) 75: </text> 76: </a> 77: 78: <text id="infotext" x="20" y="200" style="fill: #000"> </text> 79: 80: </svg>


bezier-kurven.svg

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: <!ENTITY rad "2"> 7: 8: ]> 9: 10:  11:  12: 13: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 14: 15: <title>SVG - Learning By Coding</title> 16: <desc>SVG-Spezifikation in Beispielen</desc> 17: 18: <defs> 19: 20: <style type="text/css"> 21: <![CDATA[ 22: 23: .pkt 24: { 25: fill: #00C; 26: } 27: 28: .anf 29: { 30: fill: #F00; 31: } 32: 33: .cur 34: { 35: fill: none; 36: stroke: #090; 37: } 38: 39: .lin 40: { 41: fill: none; 42: stroke: #CCC; 43: stroke-width: 1px; 44: } 45: 46: ]]> 47: </style> 48: 49: </defs> 50: 51: <text x="20" y="30" style="fill: #000; font-size: 24px"> 52: Bézier-Kurven</text> 53: 54: 


55: 56:  57: <path class="cur" d="M 50,100 C 50,50 125,50 125,100"/> 58: 59:  60: <path class="cur" d="M 125,150 Q 50,175 200,200"/> 61: 62:  63: <path class="cur" d="M 125,100 S 200,150 125,150"/> 64: 65:  66: <circle class="pkt" cx="50" cy="100" r="&rad;"/> 67: <circle class="pkt" cx="125" cy="100" r="&rad;"/> 68: <circle class="pkt" cx="125" cy="150" r="&rad;"/> 69: <circle class="pkt" cx="200" cy="200" r="&rad;"/> 70: 71:  72: <circle class="anf" cx="50" cy="50" r="&rad;"/> 73: <circle class="anf" cx="125" cy="50" r="&rad;"/> 74: <circle class="anf" cx="200" cy="150" r="&rad;"/> 75: <circle class="anf" cx="50" cy="175" r="&rad;"/> 76: 77:  78: <line class="lin" x1="50" y1="50" x2="50" y2="100"/> 79: <line class="lin" x1="125" y1="50" x2="125" y2="100"/> 80: <line class="lin" x1="50" y1="175" x2="125" y2="150"/> 81: <line class="lin" x1="50" y1="175" x2="200" y2="200"/> 82: <line class="lin" x1="200" y1="150" x2="125" y2="150"/> 83: <line class="lin" x1="200" y1="150" x2="125" y2="100"/> 84: 85:  86: <circle class="pkt" cx="50" cy="250" r="&rad;"/> 87: <text x="60" y="255">Kurvenpunkt</text> 88: <circle class="anf" cx="50" cy="270" r="&rad;"/> 89: <text x="60" y="275">Anfasser</text> 90: 91: </svg>

circle.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px">Element circle</text> 15:


16: <circle cx="100" cy="110" r="40" style="fill: #FF0"/> 17: <circle cx="100" cy="210" r="30" style="fill: none; stroke: #F00; stroke-width: 2px"/> 18: 19: </svg>

clipPath.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <defs> 13: <clipPath id="einclip"> 14: <circle cx="150" cy="120" r="80"/> 15: </clipPath> 16: </defs> 17: 18: <title>SVG - Learning By Coding</title> 19: <desc>SVG-Spezifikation in Beispielen</desc> 20: <text x="20" y="30" style="fill: #000; font-size: 24px">Element clipPath</text> 21: 22: <g clip-path="url(#einclip)"> 23: <rect x="30" y="100" width="350" height="80" 24: style="fill: #FFC; stroke: #00C; stroke-width: 1.5px"/> 25: </g> 26: 27: </svg>


contextMenu.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: onload="setMenu('TMenuD')"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: 16: <defs> 17: 18: <script type="text/javascript"> 19: <![CDATA[ 20: 21: function setMenu(menuid) 22: { 23: var ver=getSVGViewerVersion(); 24: if(ver.indexOf("Adobe")!=-1) 25: { 26: var newMenu= parseXML(printNode(getDocument().getElementById(menuid)),getContextMenu()); 27: if(ver.indexOf("6.0")!=-1) 28: { 29: getContextMenu().replaceChild(newMenu.firstChild,getContextMenu().firstChild); 30: } 31: else 32: { 33: getContextMenu().replaceChild(newMenu,getContextMenu().firstChild); 34: } 35: } 36: } 37: 38: function AboutInfo() 39: { 40: alert("SVG - Learning By Coding\n\n(C) 2002...2003\nby Dr. Thomas Meinike"); 41: } 42: 43: ]]> 44: </script> 45: 46:  47: <menu id="TMenuE"> 48: 49: <header>Adobe SVG Viewer</header> 50: 51: <item action="Open">&Open</item> 52: <item action="OpenNew">Open in &New Window</item>


53: 54: <separator/> 55: 56: <item action="ZoomIn">Zoom &In</item> 57: <item action="ZoomOut">Zoom &Out</item> 58: <item action="OriginalView">&Original View</item> 59: 60: <separator/> 61: 62: <item action="Quality">Higher &Quality</item> 63: <item action="Pause">&Pause</item> 64: <item action="Mute">&Mute</item> 65: 66: <separator/> 67: 68: <item action="Find">&Find...</item> 69: <item action="FindAgain">Find &Again</item> 70: 71: <separator/> 72: 73: <item action="Copy">Copy Selected &Text</item> 74: <item action="CopySVG">&Copy SVG</item> 75: <item action="ViewSVG">&View SVG</item> 76: <item action="ViewSource">View Sourc&e</item> 77: <item action="SaveAs">&Save SVG As...</item> 78: 79: <separator/> 80: 81: <item action="Help">&Help</item> 82: <item action="About">&About Adobe SVG Viewer...</item> 83: 84: <separator/> 85: 86: <item onactivate="AboutInfo(evt)">About S&VGLBC...</item> 87: 88: </menu> 89: 90: 91:  92: <menu id="TMenuD"> 93: 94: <header>Adobe SVG Viewer</header> 95: 96: <item action="Open">Ö&ffnen</item> 97: <item action="OpenNew">Öffnen in neuem Fenste&r</item> 98: 99: <separator/> 100: 101: <item action="ZoomIn">Einz&oomen</item> 102: <item action="ZoomOut">Aus&zoomen</item> 103: <item action="OriginalView">O&riginalansicht</item> 104: 105: <separator/> 106: 107: <item action="Quality">Bessere &Qualität</item> 108: <item action="Pause">&Unterbrechen</item> 109: <item action="Mute">&Ton aus</item> 110: 111: <separator/> 112: 113: <item action="Find">&Suchen...</item> 114: <item action="FindAgain">&Weitersuchen</item> 115: 116: <separator/> 117: 118: <item action="Copy">Ausgewählten Te&xt kopieren</item> 119: <item action="CopySVG">SVG &kopieren</item> 120: <item action="ViewSVG">SVG &anzeigen</item> 121: <item action="ViewSource">Que&lle anzeigen</item> 122: <item action="SaveAs">SVG spei&chern unter...</item> 123: 124: <separator/> 125: 126: <item action="Help">&Hilfe</item> 127: <item action="About">Ü&ber Adobe SVG Viewer...</item> 128: 129: <separator/> 130:


131: <item onactivate="AboutInfo(evt)">Über S&VGLBC...</item> 132: 133: </menu> 134: 135: 136:  137: <menu id="TMenuEK"> 138: 139: <header>Adobe SVG Viewer</header> 140: 141: <item action="ZoomIn">Zoom &In</item> 142: <item action="ZoomOut">Zoom &Out</item> 143: <item action="OriginalView">&Original View</item> 144: 145: <separator/> 146: 147: <item action="Find">&Find...</item> 148: <item action="FindAgain">Find &Again</item> 149: 150: <separator/> 151: 152: <item action="Help">&Help</item> 153: <item action="About">&About Adobe SVG Viewer...</item> 154: 155: <separator/> 156: 157: <item onactivate="AboutInfo(evt)">About S&VGLBC...</item> 158: 159: </menu> 160: 161: 162:  163: <menu id="TMenuDK"> 164: 165: <header>Adobe SVG Viewer</header> 166: 167: <item action="ZoomIn">Einz&oomen</item> 168: <item action="ZoomOut">Aus&zoomen</item> 169: <item action="OriginalView">O&riginalansicht</item> 170: 171: <separator/> 172: 173: <item action="Find">&Suchen...</item> 174: <item action="FindAgain">&Weitersuchen</item> 175: 176: <separator/> 177: 178: <item action="Help">&Hilfe</item> 179: <item action="About">Ü&ber Adobe SVG Viewer...</item> 180: 181: <separator/> 182: 183: <item onactivate="AboutInfo(evt)">Über S&VGLBC...</item> 184: 185: </menu> 186: 187: 188:  189: <menu id="TMenuDS"> 190: 191: <header>Adobe SVG Viewer</header> 192: 193: <item action="ZoomIn">Einz&oomen</item> 194: <item action="ZoomOut">Aus&zoomen</item> 195: <item action="OriginalView">O&riginalansicht</item> 196: 197: <separator/> 198: 199: <item action="Find">&Suchen...</item> 200: <item action="FindAgain">&Weitersuchen</item> 201: 202: <separator/> 203: 204: <menu> 205: <header>Spezialmenü</header> 206: <item onactivate="alert('Untermenü 1\nwurde gewählt.')">Untermenü 1</item> 207: <item checked="yes" onactivate="alert('Untermenü 2\nwurde gewählt.')">Untermenü 2</item>


208: <item onactivate="alert('Untermenü 3\nwurde gewählt.')">Untermenü 3</item> 209: </menu> 210: 211: <separator /> 212: 213:  217: 218: <item onactivate="top.location.replace('matrixcalc.htm')">TMs MatrixCalc</item> 219: <item onactivate= "top.location.replace('http://www.styleassistant.de')">StyleAssistant.de</item> 220: 221: <separator/> 222: 223: <item onactivate="AboutInfo(evt)">Über S&VGLBC...</item> 224: 225: </menu> 226: 227: </defs> 228: 229: <text x="20" y="30" style="fill: #000; font-size: 24px"> 230: Context-Menü im Adobe SVG Viewer verändern</text> 231: 232: <text x="30" y="60" style="fill: #000">[Nach der Auswahl rechte Maustaste drücken!]</text> 233: 234: <a xlink:href="" onclick="setMenu('TMenuE')"> 235: <text x="30" y="90" style="fill: #00C">Komplettes Menü mit englischen Texten 236: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 237: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 238: </text> 239: </a> 240: 241: <a xlink:href="" onclick="setMenu('TMenuD')"> 242: <text x="30" y="110" style="fill: #00C">Komplettes Menü mit deutschen Texten 243: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 244: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 245: </text> 246: </a> 247: 248: <a xlink:href="" onclick="setMenu('TMenuEK')"> 249: <text x="30" y="130" style="fill: #00C">Kompaktes Menü ohne Speichern mit englischen Texten 250: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 251: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 252: </text> 253: </a> 254: 255: <a xlink:href="" onclick="setMenu('TMenuDK')"> 256: <text x="30" y="150" style="fill: #00C">Kompaktes Menü ohne Speichern mit deutschen Texten 257: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 258: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 259: </text> 260: </a> 261: 262: <a xlink:href="" onclick="setMenu('TMenuDS')"> 263: <text x="30" y="170" style="fill: #00C">Speziell angepasstes Menü mit deutschen Texten 264: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 265: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 266: </text> 267: </a> 268: 269: </svg>


create_image.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: onload="getDocRoot(evt)"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: 16: <defs> 17: 18: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc,svgroot,xi=0,yi=0; 22: 23: 24: function getDocRoot(load_evt) 25: { 26: svgdoc=load_evt.target.ownerDocument; 27: svgroot=svgdoc.documentElement; 28: } 29: 30: 31: function newImage(url,x,y,w,h) 32: { 33: var newobj; 34: 35: newobj=svgdoc.createElement("image"); 36: 37: // xlink:href 38: // wichtig ist hier setAttributeNS() mit Angabe des Namespaces 39: newobj.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",url); 40: 41: // x,y,width,height 42: newobj.setAttribute("x",x+xi); 43: newobj.setAttribute("y",y+yi); 44: newobj.setAttribute("width",w); 45: newobj.setAttribute("height",h); 46: 47: svgroot.appendChild(newobj); 48: 49: xi+=w; 50: yi+=h; 51: } 52: 53: ]]> 54: </script> 55: 56: </defs> 57:


58: <text x="20" y="30" style="fill: #000; font-size: 24px"> 59: Beispiel zum SVG-DOM-Scripting</text> 60: 61: <a xlink:href="" onclick="newImage('bilder/adobesvg.gif',100,100,88,31)"> 62: <text x="30" y="60" style="fill: #F00"> 63: neues Element (image) – wichtig ist hier setAttributeNS() 64: </text> 65: </a> 66: 67: </svg>

css_extern.svg

1: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?> 2: <?xml-stylesheet href="extern.css" type="text/css"?> 3: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 4: "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [ 5: <!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink"> 6: ]> 7: 8:  9:  10: 11: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: 16: <text x="20" y="30" style="fill: #000; font-size: 24px"> 17: Einbindung einer externen CSS-Datei (PI xml-stylesheet) 18: </text> 19: 20: <circle cx="100" cy="100" r="30"/> 21: <rect id="abc123" x="50" y="150" width="150" height="75"/> 22: <text class="xyz" x="50" y="260">Kreis, Rechteck und Text wurden mit CSS formatiert.</text> 23: 24: <a xlink:href="../?doc=style" target="_top"> 25: <text x="50" y="300" style="fill: #000; font-size: 18px"> 26: Der Inhalt von extern.css entspricht dem im Beispiel style.svg verwendeten Code. 27: </text> 28: </a> 29: 30: </svg>


extern.css zu css_extern.svg 1: /* externe CSS-Datei fuer SVG */ 2: 3: circle 4: { 5: fill: #FF0; 6: stroke: #00C; 7: stroke-width: 2px; 8: } 9: 10: #abc123 11: { 12: fill: #00C; 13: opacity: 0.5; 14: } 15: 16: .xyz 17: { 18: font-family: "Courier New", Courier, monospace; 19: font-size: 20px; 20: font-weight: bold; 21: fill: #F00; 22: }

cursor.svg

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:  8: 


9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <style type="text/css"> 18: <![CDATA[ 19: 20: text 21: { 22: font-family: Arial, Helvetica, sans-serif; 23: font-size: 18px; 24: fill: #F00; 25: } 26: 27: ]]> 28: </style> 29: 30: </defs> 31: 32: <text x="20" y="30" style="fill: #000; font-size: 24px">CSS-Eigenschaft cursor</text> 33: 34: <text x="30" y="60" style="cursor: auto">auto</text> 35: <text x="30" y="85" style="cursor: crosshair">crosshair</text> 36: <text x="30" y="110" style="cursor: default">default</text> 37: <text x="30" y="135" style="cursor: pointer">pointer</text> 38: <text x="30" y="160" style="cursor: move">move</text> 39: <text x="30" y="185" style="cursor: e-resize">e-resize</text> 40: <text x="30" y="210" style="cursor: ne-resize">ne-resize</text> 41: <text x="30" y="235" style="cursor: nw-resize">nw-resize</text> 42: <text x="30" y="260" style="cursor: n-resize">n-resize</text> 43: <text x="30" y="285" style="cursor: se-resize">se-resize</text> 44: <text x="30" y="310" style="cursor: sw-resize">sw-resize</text> 45: <text x="30" y="335" style="cursor: s-resize">s-resize</text> 46: <text x="30" y="360" style="cursor: w-resize">w-resize</text> 47: <text x="30" y="385" style="cursor: text">text</text> 48: <text x="30" y="410" style="cursor: wait">wait</text> 49: <text x="30" y="435" style="cursor: help">help</text> 50: <text x="30" y="460" style="cursor: url('extern.cur')">url('extern.cur')</text> 51: 52: <a xlink:href="http://www.w3.org/TR/SVG/interact.html#CursorElement" target="_top"> 53: <text x="30" y="500" style="fill: #00C; font-size: 14px"> 54: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 55: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 56: Informationen zum Element cursor 57: </text> 58: </a> 59: <text x="30" y="520" style="fill: #000; font-size: 14px"> 60: Beispiel: <cursor x="0" y="0" xlink:href="cursor.png"/></text> 61: 62: </svg>


defaultFont.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <script type="text/javascript"> 18: <![CDATA[ 19: 20: function getDefFont() 21: { 22: alert("defaultFontSize: "+window.defaultFontSize+ 23: "\ndefaultFontFamily: "+window.defaultFontFamily); 24: } 25: 26: 27: function setDefFont(s,f) 28: { 29: window.defaultFontSize=s; 30: window.defaultFontFamily=f; 31: } 32: 33: ]]> 34: </script> 35: 36: </defs> 37: 38: <text x="20" y="30" style="fill: #000; font-size: 24px; font-family: sans-serif"> 39: ASV-Eigenschaften defaultFontSize und defaultFontFamily</text> 40: 41: <a xlink:href="" onclick="getDefFont()"> 42: <text x="40" y="70" style="fill: #F00; font-size: 18px"> 43: aktuelle Werte anzeigen</text> 44: </a> 45: 46: <a xlink:href="" onclick="setDefFont(24,'fantasy')"> 47: <text x="260" y="70" style="fill: #00C; font-size: 18px"> 48: neue Werte setzen</text> 49: </a> 50: 51: <text x="100" y="100">Das ist ein Testtext, der sich verändern sollte ...</text> 52: 53: </svg>


digitaluhr.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: onload="Datum_Uhrzeit()"> 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.t1 28: { 29: fill: #F00; 30: font-size: 24px; 31: } 32: 33: text.t2 34: { 35: fill: #090; 36: font-size: 36px; 37: } 38: 39: text.headline 40: { 41: font-family: sans-serif; 42: font-size: 24px; 43: font-weight: normal; 44: fill: #000; 45: } 46: 47: ]]> 48: </style> 49: 50: <script type="text/javascript"> 51: <![CDATA[ 52: 53: var svgdoc,text1,text2; 54: svgdoc=getDocument().documentElement; 55: text1=svgdoc.getElementById("datum"); 56: text2=svgdoc.getElementById("zeit"); 57: 58: function Datum_Uhrzeit() 59: { 60: var datumzeit,temp,datum,zeit; 61: datumzeit=new Date().toLocaleString(); 62: temp=datumzeit.lastIndexOf(" "); 63: datum=datumzeit.substring(0,temp); 64: zeit=datumzeit.substring(temp+1,datumzeit.length);


65: text1.firstChild.data=datum; 66: text2.firstChild.data=zeit; 67: setTimeout("Datum_Uhrzeit()",1000); 68: } 69: 70: ]]> 71: </script> 72: 73: </defs> 74: 75: <text class="headline" x="20" y="30">Digitaluhr mit JavaScript</text> 76: 77: <text id="datum" class="t1" x="20" y="80"> </text> 78: <text id="zeit" class="t2" x="20" y="120"> </text> 79: 80: </svg>

dispatchEvent.svg

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:  8:  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: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc; 22: 23: 24: function getSVGDoc(load_evt) 25: { 26: svgdoc=load_evt.target.ownerDocument; 27: } 28: 29:


30: function EreignisAusloesen(click_evt) 31: { 32: alert("Kreis 5 wurde angeklickt - es folgen die" 33: +"\nclick-Events der Kreise 1 bis 4 ..."); 34: 35: svgdoc.getElementById("kreis1").dispatchEvent(click_evt); 36: svgdoc.getElementById("kreis2").dispatchEvent(click_evt); 37: svgdoc.getElementById("kreis3").dispatchEvent(click_evt); 38: svgdoc.getElementById("kreis4").dispatchEvent(click_evt); 39: } 40: 41: ]]> 42: </script> 43: 44: </defs> 45: 46: <text x="20" y="30" style="fill: #000; font-size: 24px"> 47: Ereignisse mit dispatchEvent() auslösen</text> 48: 49: <circle id="kreis1" cx="90" cy="100" r="30" 50: style="fill: #000" onclick="alert('Kreis 1')"/> 51: <circle id="kreis2" cx="160" cy="100" r="30" 52: style="fill: #00C" onclick="alert('Kreis 2')"/> 53: <circle id="kreis3" cx="230" cy="100" r="30" 54: style="fill: #090" onclick="alert('Kreis 3')"/> 55: <circle id="kreis4" cx="300" cy="100" r="30" 56: style="fill: #FF0" onclick="alert('Kreis 4')"/> 57: 58: <circle id="kreis5" cx="370" cy="100" r="30" 59: style="fill: #F00" onclick="EreignisAusloesen(evt)"> 60: <set attributeName="stroke" attributeType="CSS" to="#00C" begin="mouseover"/> 61: <set attributeName="stroke-width" attributeType="CSS" to="2px" begin="mouseover"/> 62: <set attributeName="stroke" attributeType="CSS" to="none" begin="mouseout"/> 63: </circle> 64: 65: <text x="50" y="180">Die fünf farbigen Kreise reagieren auf 66: click-Events. Das Anklicken des</text> 67: <text x="50" y="195">roten Kreises löst zusätzlich 68: die click-Events der anderen Kreise aus.</text> 69: 70: </svg>

display_visibility.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs>


16: 17: <script type="text/javascript"> 18: <![CDATA[ 19: 20: function UnSichtbar(click_evt,id,prop) 21: { 22: var objekt=click_evt.target.ownerDocument.getElementById(id).style; 23: 24: if(prop=="display") 25: { 26: if(objekt.getPropertyValue(prop)=="block") 27: objekt.setProperty(prop,"none"); 28: else objekt.setProperty(prop,"block"); 29: } 30: 31: if(prop=="visibility") 32: { 33: if(objekt.getPropertyValue(prop)=="visible") 34: objekt.setProperty(prop,"hidden"); 35: else objekt.setProperty(prop,"visible"); 36: } 37: } 38: 39: ]]> 40: </script> 41: 42: </defs> 43: 44: <text x="20" y="30" style="fill: #000; font-size: 24px"> 45: Eigenschaften display bzw. visibility</text> 46: 47: <text x="30" y="70" style="fill: #00C; font-size: 18px"> 48: <tspan style="display: block">Text1 </tspan> 49: <tspan id="text1" style="display: block" 50: onclick="UnSichtbar(evt,'text1','display')">Text2</tspan> 51: <tspan style="display: block">Text3 </tspan> 52: <tspan onclick="UnSichtbar(evt,'text1','display')">(display: block)</tspan> 53: </text> 54: 55: <text x="30" y="100" style="fill: #F00; font-size: 18px"> 56: <tspan style="visibility: visible">Text1 </tspan> 57: <tspan id="text2" style="visibility: visible" 58: onclick="UnSichtbar(evt,'text2','visibility')">Text2</tspan> 59: <tspan style="visibility: visible">Text3 </tspan> 60: <tspan onclick="UnSichtbar(evt,'text2','visibility')">(visibility: visible)</tspan> 61: </text> 62: 63: <text x="30" y="140" style="fill: #000; font-size: 14px; font-weight: bold"> 64: Jeweils "Text2" bzw. den Text in Klammern anklicken!</text> 65: <text x="30" y="160" style="fill: #000; font-size: 14px"> 66: display: none nimmt den Inhalt aus dem Dokument heraus,</text> 67: <text x="30" y="180" style="fill: #000; font-size: 14px"> 68: visibility: hidden versteckt den Inhalt, dieser belegt aber weiterhin Platz. 69: </text> 70: 71: </svg>


doctype-features.svg

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: <!ENTITY tt "Das ist ein Testtext."> 6: ]> 7: 8:  9:  10: 11: 12: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 13: onload="DocInfos()"> 14: 15: <title>SVG - Learning By Coding</title> 16: <desc>SVG-Spezifikation in Beispielen</desc> 17: 18: <defs> 19: 20: <style type="text/css"> 21: <![CDATA[ 22: 23: g.stat 24: { 25: fill: #00C; 26: } 27: 28: g.dyn 29: { 30: fill: #F00; 31: } 32: 33: ]]> 34: </style> 35: 36: <script type="text/javascript"> 37: <![CDATA[ 38: 39: function DocInfos() 40: { 41: var d,pid,sid,wue,ent,nsp,xml1,dom2,evt2,mev2,ran2,mut2,dd,ver; 42: 43: d=document; 44: 45: // Daten abfragen 46: 47: dd=d.domain; 48: dr=d.referrer; 49: du=d.URL;


50: 51: if(d.doctype) 52: { 53: pid=d.doctype.publicId; 54: sid=d.doctype.systemId; 55: wue=d.doctype.name; 56: ent=d.doctype.entities.getNamedItem("tt").firstChild.nodeValue; 57: // d.doctype.notations liefert wie entities eine NamedNodeMap 58: } 59: 60: if(d.documentElement.namespaceURI)nsp=d.documentElement.namespaceURI; 61: 62: if(d.implementation) 63: { 64: xml1=d.implementation.hasFeature("XML","1.0"); 65: dom2=d.implementation.hasFeature("Core","2.0"); 66: evt2=d.implementation.hasFeature("Events","2.0"); 67: mev2=d.implementation.hasFeature("MouseEvents","2.0"); 68: ran2=d.implementation.hasFeature("Range","2.0"); 69: mut2=d.implementation.hasFeature("MutationEvents","2.0"); 70: } 71: 72: if(getSVGViewerVersion())ver=getSVGViewerVersion(); 73: 74: // Ergebnisse ausgeben 75: d.getElementById("t0").firstChild.nodeValue=pid; 76: d.getElementById("t1").firstChild.nodeValue=sid; 77: d.getElementById("t2").firstChild.nodeValue=wue; 78: d.getElementById("t3").firstChild.nodeValue=nsp; 79: d.getElementById("t4").firstChild.nodeValue=ent; 80: d.getElementById("t5").firstChild.nodeValue=xml1; 81: d.getElementById("t6").firstChild.nodeValue=dom2; 82: d.getElementById("t7").firstChild.nodeValue=evt2; 83: d.getElementById("t8").firstChild.nodeValue=mev2; 84: d.getElementById("t9").firstChild.nodeValue=ran2; 85: d.getElementById("t10").firstChild.nodeValue=mut2; 86: d.getElementById("t11").firstChild.nodeValue=du; 87: d.getElementById("t12").firstChild.nodeValue=dd; 88: d.getElementById("t13").firstChild.nodeValue=dr; 89: d.getElementById("t14").firstChild.nodeValue=ver; 90: } 91: 92: ]]> 93: </script> 94: 95: </defs> 96: 97: <text x="30" y="30" style="fill: #000; font-size: 24px"> 98: Informationen zu DOCTYPE und Features 99: </text> 100: 101: <g class="stat"> 102:  103: <text x="30" y="80">DOCTYPE-Public</text> 104: <text x="30" y="100">DOCTYPE-System</text> 105: <text x="30" y="120">Wurzelelement</text> 106: <text x="30" y="140">Wurzel-Namespace</text> 107: <text x="30" y="160">Entity-Zugriff (tt)</text> 108: <text x="30" y="180">XML 1.0</text> 109: <text x="30" y="200">DOM 2.0</text> 110: <text x="30" y="220">Events 2.0</text> 111: <text x="30" y="240">MouseEvents 2.0</text> 112: <text x="30" y="260">Range 2.0</text> 113: <text x="30" y="280">MutationEvents 2.0</text> 114: <text x="30" y="300">document.URL</text> 115: <text x="30" y="320">document.domain</text> 116: <text x="30" y="340">document.referrer</text> 117: <text x="30" y="360">SVG-Viewer-Version</text> 118: </g> 119: 120: <g class="dyn"> 121:  122: <text id="t0" x="150" y="80"> </text> 123: <text id="t1" x="150" y="100"> </text> 124: <text id="t2" x="150" y="120"> </text> 125: <text id="t3" x="150" y="140"> </text> 126: <text id="t4" x="150" y="160"> </text> 127: <text id="t5" x="150" y="180"> </text>


128: <text id="t6" x="150" y="200"> </text> 129: <text id="t7" x="150" y="220"> </text> 130: <text id="t8" x="150" y="240"> </text> 131: <text id="t9" x="150" y="260"> </text> 132: <text id="t10" x="150" y="280"> </text> 133: <text id="t11" x="150" y="300"> </text> 134: <text id="t12" x="150" y="320"> </text> 135: <text id="t13" x="150" y="340"> </text> 136: <text id="t14" x="150" y="360"> </text> 137: </g> 138: 139: </svg>

domtest1.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <script type="text/javascript"> 18: <![CDATA[ 19: 20: var svgdoc,svgroot,svgtarget; 21: 22: function DOMTest(evt) 23: { 24: svgdoc=evt.target.ownerDocument; 25: alert(svgdoc); 26: 27: /* 28: gibt (analog zu HTML) das document-Object zurueck, Ausgabe: SVGDocument 29: oder alternativ 30: svgdoc=document; bzw. svgdoc=svgDocument; 31: */ 32: 33: svgroot=svgdoc.documentElement; 34: alert(svgroot); 35: 36: /* 37: gibt (analog zu HTML) das documentElement-Object zurueck, Ausgabe: SVGSVGElement 38: oder alternativ 39: svgroot=svgdoc.documentElement; 40: */ 41: 42: alert(svgroot.tagName); // Ausgabe von svg als Wurzelelement 43: 44: svgtarget=evt.target; 45: alert(svgtarget); // Ausgabe von SVGCircleElement, 46: // der aktuelle Element-Kontext (Kreis)


47: alert(svgtarget.tagName); // Ausgabe von circle 48: 49: alert(svgtarget.style.getPropertyValue("fill")); // gibt aktuelle Fuellfarbe aus 50: svgtarget.style.setProperty("fill","#00C"); // faerbt den Kreis blau 51: 52: 53: // Text lesen und schreiben bzw. ersetzen: 54: 55: textknoten=svgroot.getElementById("txt").firstChild; 56: textinhalt=textknoten.data; 57: alert(textinhalt); 58: textknoten.data="Der Kreis wurde angeklickt."; 59: } 60: 61: ]]> 62: </script> 63: 64: </defs> 65: 66: <text x="20" y="30" style="fill: #000; font-size: 24px">DOM-Test 1</text> 67: 68: <circle cx="100" cy="100" r="30" style="fill: #F00" onclick="DOMTest(evt)"/> 69: <text id="txt" x="60" y="150" style="fill: #00C">Klicke den Kreis an!</text> 70: 71: </svg>

domtest2.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <script type="text/javascript"> 18: 19: <![CDATA[ 20: 21: var count=0; 22: 23: function DOMinant(evt) 24: { 25: var svgdoc, svgroot, objekt, recneu, anineu;


26: 27: if(count==0) 28: { 29: svgdoc=evt.target.ownerDocument; // Dokumenteninstanz 30: svgroot=svgdoc.documentElement; // Wurzelelement 31: // oder: svgroot=document.documentElement; 32: 33: // Neue Eigenschaften fuer Kreis setzen 34: 35: objekt=svgdoc.getElementById("kreis"); // getElementById() 36: objekt.setAttribute("r","70"); // XML-Attribut setzen: setAttribute() 37: objekt.style.setProperty("fill","#FFC"); // CSS-Attribut setzen: style.setProperty() 38: 39: 40: // Neues Element rect erstellen und mit Attributen sowie Werten versehen 41: 42: recneu=svgdoc.createElement("rect"); // createElement() 43: 44: recneu.setAttribute("x","200"); // setAttribute() 45: recneu.setAttribute("y","70"); 46: recneu.setAttribute("width","0"); 47: recneu.setAttribute("height","100"); 48: recneu.setAttribute("style","fill: #090; stroke: #000; stroke-width: 1px"); 49: 50: 51: // Neues Element animation erstellen und mit Attributen sowie Werten versehen 52: 53: anineu=svgdoc.createElement("animate"); 54: anineu.setAttribute("attributeName","width"); 55: anineu.setAttribute("attributeType","XML"); 56: anineu.setAttribute("begin","1s"); 57: anineu.setAttribute("dur","10s"); 58: anineu.setAttribute("fill","freeze"); 59: anineu.setAttribute("from","0"); 60: anineu.setAttribute("to","300"); 61: 62: 63: // die neuen Elemente in den Dokumentenbaum einhaengen 64: 65: svgroot.appendChild(recneu).appendChild(anineu); // appendChild() 66: 67: count++; 68: } 69: } 70: 71: 72: function DOMInfos(evt) 73: { 74: var svgdoc, anzahl, objekt, knoten, kind, kindobjekt, kindobjanz, name, typ, attr, attranz, output; 75: 76: svgdoc=evt.target.ownerDocument; // Dokumenteninstanz 77: 78: output="svgdoc: "+svgdoc+"\n"; 79: 80: objekt=svgdoc.childNodes; // childNodes 81: anzahl=objekt.length; // length 82: 83: for(j=0;j<anzahl;j++) 84: { 85: kind=objekt.item(j).childNodes; 86: kindobjanz=kind.length; 87: 88: if(kindobjanz>0) 89: { 90: for(l=0;l<kindobjanz;l++) 91: { 92: name=kind.item(l).nodeName; // nodeName 93: typ=kind.item(l).nodeType; // nodeType 94: 95: knoten=""; 96: 97: if(typ==1) // Elementknoten 98: { 99: attr=kind.item(l).attributes(); // Attribute 100: attranz=attr.length; 101: knoten="Element "+name+" hat "+ attranz+" Attribute:";


102: 103: if(attranz>0) 104: { 105: for(k=0;k<attranz;k++) 106: { 107: knoten+="\n"+attr.item(k).name+"=\""+attr.item(k).value+"\""; 108: } 109: } 110: } 111: 112: else if(typ==3) // Textknoten 113: { 114: knoten="Text: "+name; 115: } 116: 117: output+="\n"+knoten; 118: } 119: } 120: } 121: 122: alert(output); 123: } 124: 125: ]]> 126: 127: </script> 128: 129: </defs> 130: 131: <text x="20" y="30" style="fill: #000; font-size: 24px">DOM-Test 2</text> 132: 133: <circle cx="100" cy="100" r="30" style="fill: #F00" onclick="DOMTest(evt)"/> 134: <text id="txt" x="50" y="210" style="fill: #00C">Klicke den Kreis an!</text> 135: 136: <circle id="kreis" cx="100" cy="120" r="49" style="fill: #F00; stroke: #000; stroke-width: 2px" onclick="DOMinant(evt)"/> 137: <text x="50" y="240">Klick auf den Kreis ändert Radius und Farbe und fügt Rechteck mit Animation hinzu.</text> 138: <a xlink:href=""><text x="195" y="270" style="fill: #F00; text-decoration: underline" onclick="DOMInfos(evt)">Funktion DOMInfos() aufrufen ...</text></a> 139: 140: </svg>

draganddrop.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <script type="text/javascript"> 18: <![CDATA[


19: 20: var obj,x,y,attr1,attr2,wert1,wert2,aktiv=false; 21: 22: function MoveObj(evt) 23: { 24: if(aktiv) 25: { 26: x=evt.clientX() 27: y=evt.clientY() 28: 29: if(obj.tagName=="circle") 30: { 31: attr1="cx"; 32: attr2="cy"; 33: wert1=x; 34: wert2=y; 35: } 36: else if(obj.tagName=="rect") 37: { 38: attr1="x"; 39: attr2="y"; 40: wert1=x-obj.getAttribute("width")/2; 41: wert2=y-obj.getAttribute("height")/2; 42: } 43: 44: obj.setAttribute(attr1,wert1); 45: obj.setAttribute(attr2,wert2); 46: } 47: } 48: 49: function ClickObj(evt) 50: { 51: obj=evt.target; 52: aktiv=true; 53: } 54: 55: function OutOfObj(evt) 56: { 57: aktiv=false; 58: } 59: 60: ]]> 61: </script> 62: 63: </defs> 64: 65: <text x="20" y="30" style="fill: #000; font-size: 24px"> 66: Drag and Drop simulieren</text> 67: 68: <text x="20" y="55" style="fill: #000"> 69: Objekte mit dem Mauszeiger erfassen und langsam bewegen ...</text> 70: 71: <circle r="20" cx="100" cy="100" style="fill: #F00" 72: onmousedown="ClickObj(evt)" onclick="ClickObj(evt)" onmousemove="MoveObj(evt)" 73: onmouseup="OutOfObj(evt)" onmouseout="OutOfObj(evt)"> 74: <set attributeName="fill" attributeType="CSS" to="#090" begin="mousedown"/> 75: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseup"/> 76: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseout"/> 77: </circle> 78: 79: <rect x="150" y="85" width="50" height="30" style="fill: #00F" 80: onmousedown="ClickObj(evt)" onclick="ClickObj(evt)" onmousemove="MoveObj(evt)" 81: onmouseup="OutOfObj(evt)" onmouseout="OutOfObj(evt)"> 82: <set attributeName="fill" attributeType="CSS" to="#FF0" begin="mousedown"/> 83: <set attributeName="fill" attributeType="CSS" to="#00F" begin="mouseup"/> 84: <set attributeName="fill" attributeType="CSS" to="#00F" begin="mouseout"/> 85: </rect> 86: 87: </svg>


drawlines.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: zoomAndPan="disable" onload="getSVGDoc(evt)"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: 16: <defs> 17: 18: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc,svgroot,newline,posx,posy,posmin=50,drawing; 22: var linecol="#000",linewidth="1px",check=false; 23: 24: 25: function getSVGDoc(load_evt) 26: { 27: svgdoc=load_evt.target.ownerDocument; 28: svgroot=svgdoc.rootElement; 29: 30: drawing=svgdoc.getElementById("drawing"); 31: 32: svgroot.addEventListener("mousedown",MDown,false); 33: svgroot.addEventListener("mousemove",MMove,false); 34: svgroot.addEventListener("mouseup",MUp,false); 35: } 36: 37: 38: function MDown(mousedown_event) 39: { 40: Coords(mousedown_event); 41: 42: newline=svgdoc.createElement("line"); 43: newline.setAttribute("x1",posx); 44: newline.setAttribute("x2",posx); 45: newline.setAttribute("y1",posy); 46: newline.setAttribute("y2",posy); 47: newline.setAttribute("stroke",linecol); 48: newline.setAttribute("stroke-width",linewidth); 49: 50: check=true; 51: } 52: 53: 54: function MMove(mousemove_event) 55: {


56: if(check) 57: { 58: Coords(mousemove_event); 59: 60: newline.setAttribute("x2",posx); 61: newline.setAttribute("y2",posy); 62: drawing.appendChild(newline); 63: } 64: } 65: 66: 67: function MUp() 68: { 69: check=false; 70: } 71: 72: 73: function Coords(mouse_event) 74: { 75: posx=mouse_event.clientX; 76: posy=mouse_event.clientY; 77: 78: if(posx<posmin)posx=posmin; 79: if(posy<posmin)posy=posmin; 80: if(posx>640+posmin)posx=640+posmin; 81: if(posy>480+posmin)posy=480+posmin; 82: } 83: 84: 85: function SetLineColor(mousedown_event) 86: { 87: linecol=mousedown_event.target.style.getPropertyValue("fill"); 88: svgdoc.getElementById("aktline").style.setProperty("stroke",linecol); 89: } 90: 91: 92: function SetLineWidth(mousedown_event) 93: { 94: linewidth=mousedown_event.target.style.getPropertyValue("stroke-width"); 95: svgdoc.getElementById("aktline").style.setProperty("stroke-width",linewidth); 96: } 97: 98: ]]> 99: </script> 100: 101: </defs> 102: 103: <text x="30" y="30" style="fill: #000; font-size: 24px"> 104: Linien zeichnen (mit Wahl von Farbe und Strichstärke)</text> 105: 106: <rect x="50" y="50" width="640" height="480" rx="5" ry="5" 107: style="fill: #FFF; stroke: #000"/> 108: 109: <g onmousedown="SetLineColor(evt)"> 110: 111: <rect x="30" y="60" width="10" height="10" 112: style="fill: #FF0; stroke: #000"/> 113: 114: <rect x="30" y="80" width="10" height="10" 115: style="fill: #F00; stroke: #000"/> 116: 117: <rect x="30" y="100" width="10" height="10" 118: style="fill: #090; stroke: #000"/> 119: 120: <rect x="30" y="120" width="10" height="10" 121: style="fill: #00C; stroke: #000"/> 122: 123: <rect x="30" y="140" width="10" height="10" 124: style="fill: #000; stroke: #000"/> 125: 126: </g> 127: 128: <g onmousedown="SetLineWidth(evt)"> 129: 130: <line x1="30" y1="180" x2="40" y2="180" 131: style="stroke: #000; stroke-width: 1px"/> 132: 133: <line x1="30" y1="200" x2="40" y2="200"


134: style="stroke: #000; stroke-width: 2px"/> 135: 136: <line x1="30" y1="220" x2="40" y2="220" 137: style="stroke: #000; stroke-width: 3px"/> 138: 139: <line x1="30" y1="240" x2="40" y2="240" 140: style="stroke: #000; stroke-width: 4px"/> 141: 142: <line x1="30" y1="260" x2="40" y2="260" 143: style="stroke: #000; stroke-width: 5px"/> 144: 145: </g> 146: 147: <line id="aktline" x1="18" y1="58" x2="18" y2="262" 148: style="stroke: #000; stroke-width: 1px"/> 149: 150:  151: <g id="drawing"></g> 152: 153: </svg>

drawshapes.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: zoomAndPan="disable" onload="getSVGDoc(evt)"> 12: 13: <title>SVG - Learning By Coding</title>


14: <desc>SVG-Spezifikation in Beispielen</desc> 15: 16: <defs> 17: 18: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc,svgroot,newline,newcircle,newrect,posx,posy,startx,starty,anzahl; 22: var aktfill,aktline,radius,maxradius,grid,drawing,shape,shapes,shapeobj,shapetag; 23: var posminx=50,posminy=50,zbreite=640,zhoehe=480,gridbox=20,gr=true,check=false; 24: var curshape="l",linecol="#000",fillcol="none",linewidth="1px",ausgabe=""; 25: 26: 27: function getSVGDoc(load_evt) 28: { 29: svgdoc=load_evt.target.ownerDocument; 30: svgroot=svgdoc.rootElement; 31: 32: aktfill=svgdoc.getElementById("aktfill"); 33: aktline=svgdoc.getElementById("aktline"); 34: drawing=svgdoc.getElementById("drawing"); 35: grid=svgdoc.getElementById("grid"); 36: shape=svgdoc.getElementById("shape") 37: 38: DrawGrid(zbreite,zhoehe,posminx,posminy,gridbox); 39: 40: svgroot.addEventListener("mousedown",MDown,false); 41: svgroot.addEventListener("mousemove",MMove,false); 42: svgroot.addEventListener("mouseup",MUp,false); 43: } 44: 45: 46: function MDown(mousedown_event) 47: { 48: fillcol=aktfill.style.getPropertyValue("fill"); 49: linecol=aktline.style.getPropertyValue("stroke"); 50: 51: Coords(mousedown_event); 52: startx=posx; 53: starty=posy; 54: 55: if(curshape=="l")StartLine(); 56: if(curshape=="c")StartCircle(); 57: if(curshape=="r")StartRect(); 58: 59: check=true; 60: } 61: 62: 63: function MMove(mousemove_event) 64: { 65: if(check) 66: { 67: Coords(mousemove_event); 68: if(Math.abs(startx-posx)>0 && Math.abs(starty-posy)>0) 69: { 70: if(curshape=="l")FinishLine(); 71: if(curshape=="c")FinishCircle(); 72: if(curshape=="r")FinishRect(); 73: } 74: } 75: } 76: 77: 78: function MUp() 79: { 80: check=false; 81: } 82: 83: 84: function StartLine() 85: { 86: newline=svgdoc.createElement("line"); 87: newline.setAttribute("x1",posx); 88: newline.setAttribute("x2",posx); 89: newline.setAttribute("y1",posy); 90: newline.setAttribute("y2",posy); 91: newline.setAttribute("stroke",linecol);


92: newline.setAttribute("stroke-width",linewidth); 93: } 94: 95: 96: function FinishLine() 97: { 98: newline.setAttribute("x2",posx); 99: newline.setAttribute("y2",posy); 100: drawing.appendChild(newline); 101: } 102: 103: 104: function StartCircle() 105: { 106: radius=0; 107: newcircle=svgdoc.createElement("circle"); 108: newcircle.setAttribute("cx",posx); 109: newcircle.setAttribute("cy",posy); 110: newcircle.setAttribute("r",radius); 111: newcircle.setAttribute("fill",fillcol); 112: newcircle.setAttribute("stroke",linecol); 113: newcircle.setAttribute("stroke-width",linewidth); 114: } 115: 116: 117: function FinishCircle() 118: { 119: radius=parseInt(Math.sqrt(Math.pow(posx-startx,2)+Math.pow(posy-starty,2))); 120: maxradius=Math.min(Math.min(startx-posminx,zbreite-(startx- posminx)),Math.min(starty-posminy,zhoehe-(starty-posminy))); 121: if(radius>maxradius)radius=maxradius; 122: 123: newcircle.setAttribute("r",radius); 124: drawing.appendChild(newcircle); 125: } 126: 127: 128: function StartRect() 129: { 130: newrect=svgdoc.createElement("rect"); 131: newrect.setAttribute("x",posx); 132: newrect.setAttribute("y",posy); 133: newrect.setAttribute("width","0"); 134: newrect.setAttribute("height","0"); 135: newrect.setAttribute("fill",fillcol); 136: newrect.setAttribute("stroke",linecol); 137: newrect.setAttribute("stroke-width",linewidth); 138: } 139: 140: 141: function FinishRect() 142: { 143: w=parseInt(posx-startx); 144: h=parseInt(posy-starty); 145: newrect.setAttribute("width",w); 146: newrect.setAttribute("height",h); 147: drawing.appendChild(newrect); 148: } 149: 150: 151: function Coords(mouse_event) 152: { 153: posx=mouse_event.clientX; 154: posy=mouse_event.clientY; 155: 156: if(posx<posminx)posx=posminx; 157: if(posy<posminy)posy=posminy; 158: if(posx>zbreite+posminx)posx=zbreite+posminx; 159: if(posy>zhoehe+posminy)posy=zhoehe+posminy; 160: } 161: 162: 163: function SetColors(mousedown_event) 164: { 165: setcol=mousedown_event.target.style.getPropertyValue("fill"); 166: if(setcol=="#FFF")setcol="none"; 167: 168: if(curshape=="l")aktline.style.setProperty("stroke",setcol);


169: else if(curshape=="c")aktfill.style.setProperty("fill",setcol); 170: else if(curshape=="r")aktfill.style.setProperty("fill",setcol); 171: } 172: 173: 174: function SetLineWidth(mousedown_event) 175: { 176: linewidth=mousedown_event.target.style.getPropertyValue("stroke-width"); 177: aktline.style.setProperty("stroke-width",linewidth); 178: } 179: 180: 181: function SetShape(mousedown_event) 182: { 183: shapetag=mousedown_event.target.tagName; 184: shapeobj=shape.childNodes; 185: 186: for(i=0;i<shapeobj.length;i++) 187: { 188: if(shapeobj.item(i).tagName==shapetag) 189: { 190: curshape=shapetag.charAt(0); 191: shapeobj.item(i).style.setProperty("stroke-width","3px"); 192: } 193: else if(shapeobj.item(i).nodeType==1) 194: { 195: shapeobj.item(i).style.setProperty("stroke-width","1px"); 196: } 197: } 198: } 199: 200: 201: function UndoLastShape() 202: { 203: shapes=drawing.childNodes; 204: anzahl=shapes.length; 205: if(anzahl>0)drawing.removeChild(drawing.lastChild); 206: } 207: 208: 209: function ClearDrawing() 210: { 211: shapes=drawing.childNodes; 212: anzahl=shapes.length; 213: 214: if(anzahl>0) 215: { 216: if(top.confirm && top.confirm("Zeichnung löschen?")) 217: { 218: for(i=0;i<anzahl;i++)drawing.removeChild(drawing.lastChild); 219: } 220: } 221: } 222: 223: 224: function ShowHideGrid() 225: { 226: if(gr) 227: { 228: grid.style.setProperty("visibility","hidden"); 229: gr=false; 230: } 231: else 232: { 233: grid.style.setProperty("visibility","visible"); 234: gr=true; 235: } 236: } 237: 238: 239: function Copy2Clipboard() 240: { 241: shapes=drawing.childNodes; 242: anzahl=shapes.length; 243: 244: if(top.clipboardData && anzahl>0) 245: { 246: ausgabe="<?xml version=\"1.0\" encoding=\"ISO-8859-1\" standalone=\"no\"?>\r\n";


247: ausgabe+="<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.0//EN\"\r\n"; 248: ausgabe+=" \"http://www.w3.org/TR/2001/REC-SVG- 20010904/DTD/svg10.dtd\">\r\n\r\n"; 249: ausgabe+="<svg xmlns=\"http://www.w3.org/2000/svg\">\r\n\r\n"; 250: ausgabe+=" <title>SVG - Learning By Coding | http://www.datenverdrahten.de/svglbc/</title>\r\n"; 251: ausgabe+=" <desc>Beispiel Grafikobjekte zeichnen</desc>\r\n"; 252: 253: for(i=0;i<anzahl;i++) 254: { 255: ausgabe+="\r\n "+printNode(shapes.item(i)); 256: } 257: 258: ausgabe+="\r\n\r\n</svg>\r\n"; 259: ausgabe+="\r\n\r\n"; 260: 261: top.clipboardData.setData("Text",ausgabe); 262: alert("Der erzeugte SVG-Code wurde\nin die Zwischenablage kopiert."); 263: } 264: else alert("Kopieren in die Zwischenablage nicht\nmöglich oder keine Objekte vorhanden!"); 265: } 266: 267: 268: function DrawGrid(breite,hoehe,xstart,ystart,step) 269: { 270: // lokale Variablen 271: var bmax,vmax,xs,xe,ys,ye,i,gridline; 272: 273: hmax=parseInt(breite/step); 274: vmax=parseInt(hoehe/step); 275: xs=xstart; 276: xe=xstart+breite; 277: ys=ystart; 278: ye=ystart+hoehe; 279: 280: for(i=1;i<vmax;i++) 281: { 282: gridline=svgdoc.createElement("line"); 283: gridline.setAttribute("x1",xs); 284: gridline.setAttribute("x2",xe); 285: gridline.setAttribute("y1",ys+i*step); 286: gridline.setAttribute("y2",ys+i*step); 287: grid.appendChild(gridline); 288: } 289: 290: for(i=1;i<hmax;i++) 291: { 292: gridline=svgdoc.createElement("line"); 293: gridline.setAttribute("x1",xs+i*step); 294: gridline.setAttribute("x2",xs+i*step); 295: gridline.setAttribute("y1",ys); 296: gridline.setAttribute("y2",ye); 297: grid.appendChild(gridline); 298: } 299: } 300: 301: ]]> 302: </script> 303: 304: </defs> 305: 306: <text x="30" y="30" style="fill: #000; font-size: 24px"> 307: Grafikobjekte zeichnen (mit Wahl von Farbe und Strichstärke)</text> 308: 309: <rect x="50" y="50" width="640" height="480" rx="5" ry="5" 310: style="fill: #FFF; stroke: #000"/> 311: 312: <rect id="aktfill" x="10" y="70" width="10" height="160" 313: style="stroke: #000; fill: none"/> 314: 315: <line id="aktline" x1="15" y1="248" x2="15" y2="313" 316: style="stroke: #000; stroke-width: 1px"/> 317: 318: <g onclick="SetColors(evt)"> 319: 320: <rect x="30" y="70" width="10" height="10"


321: style="fill: #FFF; stroke: #000"/> 322: 323: <rect x="30" y="85" width="10" height="10" 324: style="fill: #FF0; stroke: #000"/> 325: 326: <rect x="30" y="100" width="10" height="10" 327: style="fill: #FC0; stroke: #000"/> 328: 329: <rect x="30" y="115" width="10" height="10" 330: style="fill: #F69; stroke: #000"/> 331: 332: <rect x="30" y="130" width="10" height="10" 333: style="fill: #F00; stroke: #000"/> 334: 335: <rect x="30" y="145" width="10" height="10" 336: style="fill: #9F9; stroke: #000"/> 337: 338: <rect x="30" y="160" width="10" height="10" 339: style="fill: #090; stroke: #000"/> 340: 341: <rect x="30" y="175" width="10" height="10" 342: style="fill: #39F; stroke: #000"/> 343: 344: <rect x="30" y="190" width="10" height="10" 345: style="fill: #00C; stroke: #000"/> 346: 347: <rect x="30" y="205" width="10" height="10" 348: style="fill: #CCC; stroke: #000"/> 349: 350: <rect x="30" y="220" width="10" height="10" 351: style="fill: #000; stroke: #000"/> 352: 353: </g> 354: 355: <g onclick="SetLineWidth(evt)"> 356: 357: <line x1="30" y1="250" x2="40" y2="250" 358: style="stroke: #000; stroke-width: 1px"/> 359: 360: <line x1="30" y1="265" x2="40" y2="265" 361: style="stroke: #000; stroke-width: 2px"/> 362: 363: <line x1="30" y1="280" x2="40" y2="280" 364: style="stroke: #000; stroke-width: 3px"/> 365: 366: <line x1="30" y1="295" x2="40" y2="295" 367: style="stroke: #000; stroke-width: 4px"/> 368: 369: <line x1="30" y1="310" x2="40" y2="310" 370: style="stroke: #000; stroke-width: 5px"/> 371: 372: </g> 373: 374: <g id="shape" onclick="SetShape(evt)"> 375: 376: <line id="l" x1="15" y1="370" x2="35" y2="350" 377: style="stroke: #000; stroke-width: 3px"/> 378: 379: <circle id="c" cx="25" cy="390" r="10" 380: style="stroke: #000; stroke-width: 1px; fill: #FFF"/> 381: 382: <rect id="r" x="15" y="415" width="20" height="20" 383: style="stroke: #000; stroke-width: 1px; fill: #FFF"/> 384: 385: </g> 386: 387: <text x="8" y="60" style="fill: #00C; pointer-events: none">Colors</text> 388: 389: <text x="5" y="340" style="fill: #00C; pointer-events: none">Options</text> 390: 391: <a xlink:href="" onclick="UndoLastShape()"> 392: <text x="5" y="465">> Undo 393: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 394: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 395: </text> 396: </a> 397: 398: <a xlink:href="" onclick="ClearDrawing()">


399: <text x="5" y="485">> Clear 400: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 401: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 402: </text> 403: </a> 404: 405: <a xlink:href="" onclick="Copy2Clipboard()"> 406: <text x="5" y="505">> Copy 407: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 408: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 409: </text> 410: </a> 411: 412: <a xlink:href="" onclick="ShowHideGrid()"> 413: <text x="5" y="525">> Grid 414: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 415: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 416: </text> 417: </a> 418: 419:  420: <g id="grid" style="visibility: visible"></g> 421: 422:  423: <g id="drawing"></g> 424: 425: </svg>

eingabefelder.svg

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:  8:  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: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc,svgroot,nr=0; 22: 23: 24: function getSVGDoc(load_evt) 25: { 26: svgdoc=load_evt.target.ownerDocument; 27: svgroot=svgdoc.rootElement; 28: svgroot.addEventListener("keypress",Key,false); 29: }


30: 31: 32: function SetNr(nummer) 33: { 34: nr=nummer; 35: } 36: 37: 38: function Key(keypress_evt) 39: { 40: var keynum,keychar,textobj,lineobj,text,lt,lx; 41: 42: if(nr>0) 43: { 44: // aus Zeichencode Zeichen ermitteln 45: keynum=keypress_evt.charCode; 46: keychar=String.fromCharCode(keynum); 47: 48: // Text auslesen und hinzufuegen 49: textobj=svgdoc.getElementById("feld"+nr); 50: lineobj=svgdoc.getElementById("cur"+nr); 51: text=textobj.firstChild.data; 52: if(text.charAt(0)==" ")text=text.substring(1,text.length); 53: 54: if(keynum>=32 && keynum<=255)text+=keychar; 55: if(keynum==32 && text.length==1)text=""; 56: if(text.length>1)lt=textobj.getComputedTextLength(); 57: if(keynum==8 || lt>135)text=text.substring(0,text.length-1); 58: 59: // Text ausgeben 60: textobj.firstChild.data=text; 61: 62: // Textcursor nach rechts verschieben 63: if(text.length>0)lx=62+textobj.getComputedTextLength(); 64: else lx=61; 65: lineobj.setAttribute("x1",lx); 66: lineobj.setAttribute("x2",lx); 67: } 68: } 69: 70: 71: function Feldinhalt(nr) 72: { 73: // aktuellen Feldinhalt ausgeben 74: var textobj,text; 75: textobj=svgdoc.getElementById("feld"+nr); 76: text=textobj.firstChild.data; 77: alert("Text"+nr+":\n"+text); 78: } 79: 80: ]]> 81: </script> 82: 83: </defs> 84: 85: <rect id="back" x="0" y="0" width="100%" height="100%" style="fill: #FFF" 86: onclick="SetNr(0)"/> 87: 88: <text x="20" y="30" style="fill: #000; font-size: 24px"> 89: Simulation von Eingabefeldern</text> 90: 91:  92: <g id="box1" onclick="SetNr(1)"> 93: <text x="20" y="75" style="pointer-events: none">Text1: </text> 94: <rect x="58" y="60" width="150" height="20" 95: style="fill: #FFF; stroke: #000; stroke-width: 0.8px"/> 96: <text id="feld1" x="60" y="75"> </text> 97: <line id="cur1" x1="61" y1="62" x2="61" y2="78" 98: style="stroke: #F00; stroke-width: 1.5px; visibility: hidden"> 99: <set attributeName="visibility" attributeType="CSS" 100: to="visible" begin="box1.click"/> 101: <set attributeName="visibility" attributeType="CSS" 102: to="hidden" begin="box2.click;box3.click;back.click"/> 103: </line> 104: </g> 105: 106:  107: <g id="box2" onclick="SetNr(2)">


108: <text x="20" y="125" style="pointer-events: none">Text2: </text> 109: <rect x="58" y="110" width="150" height="20" 110: style="fill: #FFF; stroke: #000; stroke-width: 0.8px"/> 111: <text id="feld2" x="60" y="125"> </text> 112: <line id="cur2" x1="61" y1="112" x2="61" y2="128" 113: style="stroke: #F00; stroke-width: 1.5px; visibility: hidden"> 114: <set attributeName="visibility" attributeType="CSS" 115: to="visible" begin="box2.click"/> 116: <set attributeName="visibility" attributeType="CSS" 117: to="hidden" begin="box1.click;box3.click;back.click"/> 118: </line> 119: </g> 120: 121:  122: <g id="box3" onclick="SetNr(3)"> 123: <text x="20" y="175" style="pointer-events: none">Text3: </text> 124: <rect x="58" y="160" width="150" height="20" 125: style="fill: #FFF; stroke: #000; stroke-width: 0.8px"/> 126: <text id="feld3" x="60" y="175"> </text> 127: <line id="cur3" x1="61" y1="162" x2="61" y2="178" 128: style="stroke: #F00; stroke-width: 1.5px; visibility: hidden"> 129: <set attributeName="visibility" attributeType="CSS" 130: to="visible" begin="box3.click"/> 131: <set attributeName="visibility" attributeType="CSS" 132: to="hidden" begin="box1.click;box2.click;back.click"/> 133: </line> 134: </g> 135: 136: <a id="link1" xlink:href="" onclick="Feldinhalt(1)"> 137: <text x="220" y="75" style="fill: #00C"> 138: [Zeige Inhalt von Text1] 139: </text> 140: </a> 141: 142: <a id="link2" xlink:href="" onclick="Feldinhalt(2)"> 143: <text x="220" y="125" style="fill: #00C"> 144: [Zeige Inhalt von Text2] 145: </text> 146: </a> 147: 148: <a id="link3" xlink:href="" onclick="Feldinhalt(3)"> 149: <text x="220" y="175" style="fill: #00C"> 150: [Zeige Inhalt von Text3] 151: </text> 152: </a> 153: 154: </svg>

ellipse.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px">Element ellipse</text> 15: 16: <ellipse cx="100" cy="110" rx="40" ry="20" style="fill: #00C"/> 17: <ellipse cx="200" cy="180" rx="30" ry="30" style="fill: #F00"/> 18: <ellipse cx="100" cy="210" rx="30" ry="60" style="fill: none; 19: stroke: #090; stroke-width: 2px"/> 20: 21: </svg>

embedded_fonts.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <style type="text/css"> 18: <![CDATA[ 19: 20: text{font-size: 36px; fill: #F00;} 21: .t1{font-family: f1;} 22: .t2{font-family: f2;} 23: .t3{font-family: f3;} 24: .t4{font-family: f4;} 25: .t5{font-family: f5;} 26: .t6{font-family: f6;} 27: .t7{font-family: f7;} 28: .t8{font-family: f8;} 29: .t9{font-family: f9;} 30: 31: @font-face{font-family:f1;src:url("data:;base64,\ 32: T1RUTwACACAAAQAAQ0ZGIFSI06IAAAAsAAACJ2NtYXAACwA+AAACVAAAADQBAAQCAAEBARBNb25v\ 33: dHlwZUNvcnNpdmEAAQEBPfgbAfgYBB4UoJmZHwwC/H/9CBwJRRwHTQUeoABIgoEl/4uLHqAASIKB\ 34: Jf+LiwwH92UP92oQ92wRi/i7EgABAQFyTW9ub3R5cGUgQ29yc2l2YShUTSkgaXMgYSB0cmFkZW1h\ 35: cmsgb2YgVGhlIE1vbm90eXBlIENvcnBvcmF0aW9uIHdoaWNoIG1heSBiZSByZWdpc3RlcmVkIGlu\ 36: IGNlcnRhaW4ganVyaXNkaWN0aW9ucy4AAAAAAQAiAAAAAwIAAQAdACABRRwGAPeUFhwFAPqUHPsA\ 37: B/50qxX6VBwEwP5UBg74Vg4cBPYcBRO3FYFSBYlzdop5G3FsjY9mH5JMZI56G29gh4JRH6C/nMKZ\ 38: xJW0ltGW7j2M+w2J+ziH+z37l/sQ+zY8SQhIPD9qRBtmb5KaeR94mYKdohqckJqWlh6WlpiRmxuU\ 39: mImImx+Cs6aGmBu4vKS+wR/j3vcW90H3QPec91f3v/cx9233Dfcc+zl8JX1iflN5YXBvaAhvaH1n\ 40: Zhp/j3qUdR6UcpB5gBp8hX6AgB6AgH2Fext0eZScfh99nISkrRq7mLqkuB6kuK6wuqq6qcWi0Zuv\ 41: lMqS5pLakryRn5GqlKmcqKR3OX1Dgk49/NYYXvwyBX68uIWyG6WnjpGqH/vW+BsVq/ejq/dZq/cR\ 42: NvsEV0R3bvuV/BEYicLaivIbpKaMjagfDgAAAAABAAAAAwAAAAwABAAoAAAABgAEAAEAAgAgAEH/\ 43: /wAAACAAQf///+H/wQABAAAAAAAA")}


44: 45: @font-face{font-family:f2;src:url("data:;base64,\ 46: T1RUTwACACAAAQAAQ0ZGILEkBhkAAAAsAAAB0GNtYXD/xgB3AAAB/AAAACwBAAQCAAEBAQhHZW9y\ 47: Z2lhAAEBATT4GwH4GAT79/xQHAlVHAdMBR6gAEiCgSX/i4seoABIgoEl/4uLDAf3Ew+MEPcWEYv4\ 48: ZBIAAQEBMUdlb3JnaWEgaXMgYSB0cmFkZW1hcmsgb2YgTWljcm9zb2Z0IENvcnBvcmF0aW9uLgAA\ 49: AAAjAAICAAEAIgFGHAgA95QWHAYAHAYAHPoABxz6gPcUFRwFABwFABz7AAYOHAU7+uT5KRW0b65m\ 50: pl4Ipl6ZVEoaSX1SbloeblpmY11sXmxZdFN7CHtSUYNPG/000gabjKKOqpCqj6GQmJGglJmYlJsI\ 51: lJqPn6Qa+pAHooefhJweg5x8mXSWd5V1k3KQcpB3j3qMCNL5Iwe+u4aBuh+5gbd5tXKydKxrpGMI\ 52: pGOYWlIaWYJfeWQeeWRyaWpvbHBodWR5Y3hgfV2BCIIHtIa4gb58vXu4dbJvCPuF92oVpKicqpWt\ 53: CJStkLO6Gtl2yGC4HrdgSKEvG3Zwi4prH2qKcIp1igj8tfcTB8K6kpmyH7KZqqCjpwj3HvxZFd9v\ 54: 0FPBHsFSO6YiG2Bni4puH26KdYp8igj8iAdhnGutdh52rbqAyBvu16jFwB/AxaXg9wUaDgAAAAEA\ 55: AAADAAAADAAEACAAAAAEAAQAAQAAAEL//wAAAEL///+/AAEAAAAAFSIVIqbeCAAAAAAAGiIZIgAA\ 56: ")} 57: 58: @font-face{font-family:f3;src:url("data:;base64,\ 59: T1RUTwADACAAAQAQQ0ZGINuZPHcAAAA8AAABb0dQT1Ov5r8UAAAB2AAAAFBjbWFw/8UAeAAAAawA\ 60: AAAsAQAEAgABAQENTXlyaWFkLVJvbWFuAAEBAR/4GwH4GARd+476+vnTBR0AAKQDDfd8D/d/Eb/3\ 61: zxIAAQEBqkNvcHlyaWdodCAoYykgMTk5MiwgMTk5NCBBZG9iZSBTeXN0ZW1zIEluY29ycG9yYXRl\ 62: ZC4gIEFsbCBSaWdodHMgUmVzZXJ2ZWQuTXlyaWFkIGlzIGEgdHJhZGVtYXJrIG9mIEFkb2JlIFN5\ 63: c3RlbXMgSW5jb3Jwb3JhdGVkIG1heSBiZSByZWdpc3RlcmVkIGluIGNlcnRhaW4ganVyaXNkaWN0\ 64: aW9ucy4AAAAAJAACAQEES/doDvjYgNX4udQBr+cD+KXmFXpoVYBVG/s3LPT3OvdF9PD3MsO6f3ur\ 65: H6HSBZd0VZ04G/tl+yP7Ivto+3L3IvsM91LdzJubqh8OgJb5Npb7XZf3Lpa8lgb3mZD8ZpFwlAce\ 66: oGBFgpn/DAkeegmZmZ8MCs4K4wvOkQwM448MDQAAAAABAAAAAwAAAAwABAAgAAAABAAEAAEAAABD\ 67: //8AAABD////vgABAAAAAAABAAAACgAeACwAAURGTFQACAAEAAAAAP//AAEAAAABa2VybgAIAAAA\ 68: AQAAAAEABAACAAAAAQAIAAEAEgAEAAAAAQAMAAEAAf/oAAEAAQABAAAAAAAAAAAAAAAAAAAAAAAA\ 69: ")} 70: 71: @font-face{font-family:f4;src:url("data:;base64,\ 72: T1RUTwACACAAAQAAQ0ZGIKm4P48AAAAsAAABIGNtYXD/xAB5AAABTAAAACwBAAQCAAEBAQdJbXBh\ 73: Y3QAAQEBNPgbAfgYBPud/TkcChccCVgFHqAASIKBJf+Lix6gAEiCgSX/i4sMB/cbD4wQ9x4Ri/e0\ 74: EgABAQE6SW1wYWN0IGlzIGEgdHJhZGVtYXJrIG9mIFN0ZXBoZW5zb24gQmxha2UgKEhvbGRpbmdz\ 75: KSBMdGQuAAAAACUAAgEBHZEcBgD3lBYcBQD6lBz7AAf+dKsV+lQcBMD+VAYOHARs3xwGUxX3zwb3\ 76: X/cegnjTH9J4wm2wYLBgo1yUVwiUVpAk+y0a/MsH+yWEKn5aHn1ac2RpcGlvYXhZgAiAWUCFJhv8\ 77: pwb4ORwFPhX+vQfIsJekmR+Zo5LN9wAa+QkH1Im6hqAehqCBmnqVCJR6bJBdGw4AAAABAAAAAwAA\ 78: AAwABAAgAAAABAAEAAEAAABE//8AAABE////vQABAAAAAJb5Npb7XZf3Lpa8lgb3mZD8ZpFwlAce\ 79: oGBFgpn/DAkeegmZmZ8MCs4K4wvOkQwM448MDQAAAAABAAAAAwAAAAwABAAgAAAABAAEAAEAAABD\ 80: //8AAABD////vgABAAAAAAABAAAACgAeACwAAURGTFQACAAEAAAAAP//AAEAAAABa2VybgAIAAA+\ 81: AEEAAQBcAWgDfARoA3wELQFfAS4BYAEvAWEBMAH4ADEB1QAyATgBMwE5ATQBYgE1AWMBNgFkATcB\ 82: ")} 83: 84: @font-face{font-family:f5;src:url("data:;base64,\ 85: T1RUTwACACAAAQAAQ0ZGIG8g25IAAAAsAAABA2NtYXD/wwB6AAABMAAAACwBAAQCAAEBARFIYWV0\ 86: dGVuc2Nod2VpbGVyAAEBATX4GwwA+BgE+3j9ORwIDBwIOgUeoABIgoEl/4uLHqAASIKBJf+LiwwH\ 87: 91QPjBD3VxGL95cSAAEBAWhEYXRhIGJ5IEVyYW1hbiBMdGQuLCBhbmQgTW9ub3R5cGUgVHlwb2dy\ 88: YXBoeSBJbmMuIChDKSAxOTk1LiBNaWNyb3NvZnQgQ29ycG9yYXRpb24uIEFsbCByaWdodHMgcmVz\ 89: ZXJ2ZWQuAAAAACYAAgEBHTscBgD3lBYcBQD6lBz7AAf+dKsV+lQcBMD+VAYO+TD5Hxb8/BwFmvj4\ 90: +037vfwX96D7Qvug/Iz3wQYOAAAAAAEAAAADAAAADAAEACAAAAAEAAQAAQAAAEX//wAAAEX///+8\ 91: AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\ 92: AAAAAAAAAAAAAACAPwAAgD8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\ 93: AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAs\ 94: AEEAAQCAP9gCfATYAnwEAAAAAM3MTD0AAAAAAAAAAAIAAAACAAAAAwAAAAEAAAAAAAAAaEkcbgQA\ 95: ")} 96: 97: @font-face{font-family:f6;src:url("data:;base64,\ 98: T1RUTwACACAAAQAAQ0ZGIO64Q5IAAAAsAAABZ2NtYXAACwA5AAABlAAAADQBAAQCAAEBAQhTeWxm\ 99: YWVuAAEBATX4GwH4GAT76PzwHAtbHAgOBR6gAEiCgSX/i4seoABIgoEl/4uLDAf3FA/3GRD3GxGL\ 100: 9/sSAAEBATFTeWxmYWVuIGlzIGEgdHJhZGVtYXJrIG9mIE1pY3Jvc29mdCBDb3Jwb3JhdGlvbi4A\ 101: AAAAAQAnAAAAAwEBHSDa+pT3FBYcBdD5lBz6MAf9FPcUFfiUHATQ/JQGDviUDvrc+qgcBWIVko+I\ 102: hB/71QeEh4eEHkAGhIeOkB9j93wFkIeOhB78VAaEiIiEH/ytB4aOiJIe96IGko6OkB+g9zoFkI6O\ 103: kh7CBpKPiIQf/EgHhIeIhB5UBoSIjpAfdvc8BZCIjoQe+6IGhIiIhh/8pweEjoiSHvdCewWSjoeE\ 104: H1YHhIiIhB78twaEiI6SH8AHko6Pkh73QpsFko6Okh8cBJ4Hj4qJjYgbhwb7QpwFhIiOkh/AB5KO\ 105: jpAeDgAAAAABAAAAAwAAAAwABAAoAAAABgAEAAEAAgAgAEb//wAAACAARv///+H/vAABAAAAAAAA\ 106: i4p7H4pseouIG3yAiIWGH4WFiIB7GoxFBYCJTIj7Bx6KdIt3fBowjj8BEQFAARIBa2VybgAIAAAD\ 107: AEEAAAEIAJj8fARwI2AKuB5gCgAAgD8LAAMAAAEIAMgGYApY1nwEkKJgCjguODgyIDc0Ny43NDMg\ 108: ")} 109: 110: @font-face{font-family:f7;src:url("data:;base64,\ 111: T1RUTwACACAAAQAAQ0ZGIN8TDhUAAAAsAAABn2NtYXD/wQB8AAABzAAAACwBAAQCAAEBARVOZXdC\ 112: YXNrZXJ2aWxsZS1Sb21hbgABAQEh+BsB+BkE+2H7pBwEt/oeBR0AAKM+DfeHD/eKEaf4FxIAAQEB\ 113: q0NvcHlyaWdodCAoYykgMTk4NSwgMTk4NywgMTk5MCwgMTk5NCBBZG9iZSBTeXN0ZW1zIEluY29y\ 114: cG9yYXRlZC4gIEFsbCBSaWdodHMgUmVzZXJ2ZWQuSVRDIE5ldyBCYXNrZXJ2aWxsZSBpcyBhIHJl\ 115: Z2lzdGVyZWQgdHJhZGVtYXJrIG9mIEludGVybmF0aW9uYWwgVHlwZWZhY2UgQ29ycG9yYXRpb24u\ 116: AAAAACgAAgEBBIj3mA75eH6m93+i90z3WoaiErr3Efgf9wY//wAagAAT3BPq+RH5IhWABhPadl4F\ 117: uE9BnUEb+2X7Ifsv+2D7Wvch+xT3V8S8l6W+HxPcrcmRk9Qb9Qe9k6bBih6i+5p0B8iGpH5IGiRI\ 118: XCf7PlH3J/cq9zK190j3Vx4T2vcI1Dr7BJIfE+qgBg53n/kkn/uNmPeGiwb7pKAHHqBDeRf/DAmm\ 119: CuALAAAAAAEAAAADAAAADAAEACAAAAAEAAQAAQAAAEf//wAAAEf///+6AAEAAAAAG5SYiYibH4Iz\ 120: AEEAAQEIAGD1fAQFAAAAAAAAAAAAAAAAAIlEAQAAAACApUMBAAAAAADGQwEAAAAIAAAAAACgwQAA\ 121: ")}


122: 123: @font-face{font-family:f8;src:url("data:;base64,\ 124: T1RUTwACACAAAQAAQ0ZGINRe400AAAAsAAADJmNtYXD/wAB9AAADVAAAACwBAAQCAAEBAQlHYXJh\ 125: bW9uZAABAQE0+BsB+BgE+7D9CBwIgRwH5AUeoABIgoEl/4uLHqAASIKBJf+LiwwH91UPjBD3WBGL\ 126: +boSAAEBAXJNb25vdHlwZSBHYXJhbW9uZChSKSBpcyBhIHRyYWRlbWFyayBvZiBNb25vdHlwZSBU\ 127: eXBvZ3JhcGh5LCBMdGQgd2hpY2ggbWF5IGJlIHJlZ2lzdGVyZWQgaW4gY2VydGFpbiBqdXJpc2Rp\ 128: Y3Rpb25zLgAAAAApAAICAAEAHAJaHAYAiwQcBQD6lBz7AAf+dKsV+lQcBMD+VAYOHAYVsnwVjKGi\ 129: mKWTqY4ZupGpkZiSmJGUlJCWCJShkKGiGonXjNGJ3QWtjLaNvh6Nvoymjhr3pQe2jLqNvh6NvYyu\ 130: nhrEiq2IlB6IlIaShI+Ej3OPYo5sjnWNf40IiJKJkZAakIuSjJIejJuXjJQb6YoFztGOkNYfsI7C\ 131: jdWNCIyFjIWGGoSKhoiIHoiHhYiEijSEV4B8fQh7fINnUBr7AI37A477Bx6PLY6It4jehxmKopiK\ 132: jxv3J43siPeSk6qMnoySjRmP9wiN9wT3ARr0iciGnh6IloeThI+HjWiQSpSAjICNgY0IiJWJlpga\ 133: jqKZjZEbzYcFiMjIicgbss2OkuYfin6Kf4iAcoFshWiIdIp4h3yFCH6ChXhuGoSLhIyDHoxzi3uE\ 134: GvsHB4xDiS6M+0KJ+zgFaoxYjUYeivsbBV6PapN4Ho+CkoSUh9x5GLOBo4OThQiShI+EghqIf4aK\ 135: BYiGjIyGH5hCP5I7G0xfiolxH3CJVIQ4fgiKlIqRjxqQjJGMkx6gl6uTuJCsjqaWnp0ImJeRnaIa\ 136: ivckBY22jKOPGsSK3Yn3AR6JlIeRho15kTKK+zOCCIlrc4p7G3tqjI1YH4xYW4xgG3R3i4p7H4ps\ 137: eouIG3yAiIWGH4WFiIB7GoxFBYCJTIj7Bx6KdIt3fBowjk6SbR6OfZGBlIaRh6WEuYGqhKKFm4WR\ 138: gRiIioiIiR6Ih4WJhBuGhIuMhB+EfIuMdh9pjGGNWI8IjmpujHIbYEeJhy0finl8i34bDgAAAAAA\ 149: AQAAAAMAAAAMAAQAIAAAAAQABAABAAAASP//AAAASP///7kAAQAAAAA=")} 140: 141: @font-face{font-family:f9;src:url("data:;base64,\ 142: T1RUTwACACAAAQAAQ0ZGIGdE0cMAAAAsAAAAzmNtYXD/vwB+AAAA/AAAACwBAAQBAAEBAQ5MdWNp\ 143: ZGFDb25zb2xlAAEBATP4GwH4GASL/EQcBNIcBlAFHqAASIKBJf+Lix6gAEiCgSX/i4sMB/chD4wQ\ 144: 9yQRj/deEgABAQE6THVjaWRhIGlzIGEgcmVnaXN0ZXJlZCB0cmFkZW1hcmsgb2YgQmlnZWxvdyAm\ 145: IEhvbG1lcyBJbmMuAAAAACoAAgEBGjX3lBYcBQD5Zhz7AAf9JssV+OYcBID85gYO90EW9yj37fpv\ 146: ++33KPoM+yj77f5v9+37KAcOHATSFAAAAAAAAQAAAAMAAAAMAAQAIAAAAAQABAABAAAASf//AAAA\ 147: Sf///7gAAQAAAAD3mA75eH6m93+i90z3WoaiErr3Efgf9wY//wAagAAT3BPq+RH5IhWABhPadl4F\ 148: uE9BnUEb+2X7Ifsv+2D7Wvch+xT3V8S8l6W+HxPcrcmRk9Qb9Qe9k6bBih6i+5p0B8iGpH5IGiRI\ 149: XCf7PlH3J/cq9zK190j3Vx4T2vcI1Dr7BJIfE+qgBg53n/kkn/uNmPeGiwb7pKAHHqBDeRf/DAmm\ 150: CuALAAAAAAEAAAADAAAADAAEACAAAAAEAAQAAQAAAEf//wAAAEf///+6AAEAAAAAG5SYiYibH4Iz\ 151: AEEAAQEIAHCrYAoBAAAAAAARRAEAAAAAAIlEAQAAAACApUMBAAAAAADGQwEAAAAIAAAAAACgwQAA\ 152: ")} 153: 154: ]]> 155: </style> 156: 157: </defs> 158: 159: <text x="20" y="30" style="fill: #000; font-size: 24px"> 160: Eingebettete Font-Glyphen</text> 161: <text x="25" y="50" style="fill: #000; font-size: 12px"> 162: [Jeder Buchstabe stammt aus einem anderen Font.]</text> 163: 164: <text x="20" y="110" style="pointer-events: none"> 165: <tspan class="t1">A</tspan> 166: <tspan class="t2">B</tspan> 167: <tspan class="t3">C</tspan> 168: <tspan class="t4">D</tspan> 169: <tspan class="t5">E</tspan> 170: <tspan class="t6">F</tspan> 171: <tspan class="t7">G</tspan> 172: <tspan class="t8">H</tspan> 173: <tspan class="t9">I</tspan> 174: </text> 175: 176: </svg>


embedded_images.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <text x="20" y="30" style="fill: #000; font-size: 24px"> 16: Eingebettete Rasterbilder</text> 17: 18: <text x="150" y="150">embedded JPEG image (base64 encoded)</text> 19: 20: <image x="30" y="80" width="106" height="138" xlink:href="data:image/jpeg;base64, 21: /9j/4AAQSkZJRgABAQEAZABkAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoM\ 22: DAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsN\ 23: FBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAAR\ 24: CACKAGoDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAA\ 25: AgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkK\ 26: FhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWG\ 27: h4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl\ 28: 5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREA\ 29: AgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYk\ 30: NOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOE\ 31: hYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk\ 32: 5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD3LULu8W/uFW5mRRI+FEhxjPShLq8YgfaZ\ 33: iev+sPFTXsebu5BxgyMTx05NEMSoqnkgjp/n8K60k9xCpcXOP+PmXnv5h4qX7RcED/SJDwOj\ 34: kZxSxrkjqMDAyeBXl/xk+Puh/CuBrZ5Uu9aCh1tVwSo4PzYPFKTUEXFObPQdZ8Uw6FaNPf6g\ 35: lnEily002wHHPUkdq89179qLwPoUAd/EsNwxONtvMHPX/er4E+J/xx8T/EDUp31DUpfs5YmO\ 36: 3jZljj4xgDNebTXMkjks7MfU9a5XKUttDoUIx31P0J1H9u3wXbv5cJ1i6KsctDGm3HrkyVTm\ 37: /bs8F6mWtnTX7eGT5TcRbV2/isoIP0r8/wBGI5wDjsaR3JbJ6/yqUmne43GMvs6H078XPi1c\ 38: CW01bwN8TvFMtpcblm0+41qcPA3UYG/7pHfJIIxVWX9tbx7beFhoouY3kNn9n/tOR5ftW7DD\ 39: zN28fNjAz6jNfNRmKDIbpUqX5YhXBYAde/0qn72rJ5UvhPbvA37UnxE8Maoly3ibUdV5w1vq\ 40: t3LcQuB14Z8g/TvX2p8Iv2ktH+MVnPaWs81jrMMIeWzmcK3IwzIQTlc9+tfmNBcI8oyCI27H\ 41: nFd38K/HM/gn4l+H9XilKAXCxXHzEBo2OCD69c1KTjLTYhq6sztPGfxT+IOh3epadL438TQ3\ 42: thfMhVdXuBlDkEHD9iBj6mv0X+EN9cap8J/BV5eTy3V3caJZTTTzuXkkdoELMzHkkkkknrmv\ 43: gX9pzwcdM8b6/eQLiG9NvdRv/fL7t3/jw/SvvP4JLs+DPgJeuNAsB/5LR1qYxfQkvZgt5cnc\ 44: OJWBB69TT4JF2hjkDnJHeqeoDGo3XXmWT+dSxr8vDfKfatkwaLhk2RFscKdxIHOMCvzW+N17\ 45: fax8X9fN5I5E1yRG0hIKoAAoP0/Gv0b1K9i0vTLq7uXKwwIWdz12gdvf/CvmTSPhJYeM9avN\ 46: Z1G2Jku7kyq0q5KoSMduK5cRWhTS5tz0MJh6laT5dj4t1Xw/dQX7RsucHCuB94flV3SfA17f\ 47: spjjZj0IPA/P1r9EJf2bfCuu2caSwGJwMb41TJ/Ern8BVWL9mSx0uZTb6jK8XG6GQ8ADjgEc\ 48: /j0rz/rkWj1ll0kz4TPwsv4nZxCZYx8rAqcgnp0GM+1V7j4bzmMkQyo4OCkiFW9Mjiv0Ls/g\ 49: tDYW00bRpcLIwzITub3JOOfxrgPHPweu7GEva+dOm0tlgdqRqTx8o6nj64NTHF3ZpLAKKPg7\ 50: VvCt7pcsqyQsBE21jg8ZFYUkbK2DgHPNe+fE2NZ2cwwLFuijllhyU3EqDgDvjkc14zqUSJKx\ 51: 2jef7vAAr0IVOZHj1afs5WMpHCNz+lalpJ9pj2ISJ1ZSje+4CsmVNr5BwKltbhoJUkRiGUgg\ 52: jgg8Y/lWjVzmkj6P8WfFZfi9pOgW/wBmaHVLS3EN6GAwfLJKsOTwdxz6HNfoH8G4/K+EPgdM\ 53: Y26FYjHp/o6V+ePw7sdFFre+Ip9Rs9PM9v5giuZUQB1B8wBcjJPylQOSSa/RH4QOknwl8EtG\ 54: /mRtoliVf+8PITBpRfQ5l8T0sV75f+Jhc5yreY+OeCNxp0C5AHA9faq93eKdRvI2bJWWTHH+\ 55: 0eKU38Vjby3FwypBEm53bjaoGSck9hW7aSuWk2zifi/qZmt7TRImKvdsJJh0HlgjAPqCef8A\


56: gNXvDGlKbaKFFxsUBv8AaNcXo/iK0+I3iC51yCcSQHEcIyDiNTgcdsk5/wCBV6far/ZlqXiB\ 57: LuoKmvlcZW9pUPusuoezonQxmOCONUHzE4yowcDitiy0tZUGSS2OgHSuf0uKe6ZXdeDwRkiu\ 58: vsoZol+WMrgdSetcdO8uh6M9FuR3GnLDH5mA56c9xXPaxp8c9s7umUXBcMO3auwnXbBtkQjA\ 59: /irnNeuFt7KUP8yhdpB7g8/0rrjvZnDUelz86f2irP8AsLxndxpkW7SNLEwHRTjge3FfP+qA\ 60: tKSdoH6/jX0j+0bPHd66FEhZIwSu85ZQ3O0+igjt2PvXzxqWnkDcm4qeRnqPavZoP3UfN4pX\ 61: kznpVyBgEf7vFMRGGeuc55OasyRsrYII+tJGpUkjsOa7Uec0aqsTp8LFslhtwO2BX66fA9t3\ 62: wV8AHpnw/p5x/wBu0dfkDp7ebFtySM9Celfr/wDBEbfgv4BA7eH9P/8ASaOklYweh+fnxP8A\ 63: 2j/HXhX4xeNLWy1hza2Wu3sENvKgdBGtw6hcHHGABxzXceEP2toviH4d1Pwt4pSHRdQ1KB7S\ 64: 31G2ylsrMpC+ZucsvPfpz2FfOvx4IX43/EHnr4h1Hp2/0mSuLtWZ50WPcZGYBQo6ntUuCtdG\ 65: 0Z3dmfX/AIN0U+GoItT8M+I4ruSLAvNKnm2szDrtA4J7YJ/Gvp7wj4mj8QaFBcgM22JfMRlw\ 66: yOQcgjPUHg/SvnLwN4ML/D2HR7mSS0hnu4buSUJly8ZGAynhlPfPtX0z8JPC0HhXwdBFLcS3\ 67: c0o+VrrG+TnljwBz19ea+cxKi3fqfb4TnhHVaPYpah4t8QWrstlCSFU/MsZI9Bg9jW9oPiHx\ 68: Z4isE8xk0+QJwpJycf3uMD8OayfHjT2D6eIJ4raC4bb5pUnYc8+35mub1Tx7qngLx62ljTtQ\ 69: 1vTGjgMN/p8TyBy6sWJxlCq7QCNwbLDAIzjnpxcrtK9jtn7qV3a57Pput3dxafZ9RjxdREBp\ 70: FzhhjrTdX0z+1rCVBJtLAkNkYJAx9ag8OalH4ps4LqNl3NwAOGUe/HTr+VbF6PskQU4DkE/j\ 71: VqT+I5px+yfCXxy+HVzDrQJzI7FozJksAApZe2c5HPsa8Hv9DFrOkRjKhgOGX+LuD74/XFff\ 72: PxQ8HPr97NL9pjjWUqGYjlT04/OvPrT9mfT9U02S+ur+fyzMAI7dVDuwxgICOua9KnXjGOp4\ 73: 9TCynOyPh7V9FiOdhO5Rkcd+9YbR+Ukhxt+TJPofSv0C8Yfs8+F7jw99gtdG+yXLwgpck/vy\ 74: ccM5I6eor4D1pfIBiGCzEhyD1wQM130a0aqsuh5uLwssNZy6lPTlZ246Dnjv2r9hfgpGYvg1\ 75: 4CQ9V0CwB/8AAeOvyR8HaJc69rNrYWibprhwoGSOM85OOOOfbr0Ffr38L7H+zPhp4SsxN9oF\ 76: vpFpF5wGN+2FBux74zXUk7X6Hjtrmsj8mvjmCfjd8RAM5/4SLUTkH/p5krnfBiqfF2ipJ9w3\ 77: sIIPTG8V0Hx0+X45fEI4Y/8AFRaj0/6+ZK5CznNpfQzqSGjkV1xxgggj+VEleLXkaw92afof\ 78: ph4W0aDVbmytlQsigSy4+6BjJH4nH5e9eqwFp7hI0CxpEMbB2Fcl8MdGjtfCEV35kbSMEYt5\ 79: gG5iOw6kYrctdRlsz5vlEqgGWPQjrXx89HY/S6OsUXPE3hn+07OCZULNE+UUjgjGfSul8Iad\ 80: byacySBArqodWjBY46dqJNRiu1too/lGwMAe+RWtotn9nLNtYA9vSqp+69NiKj5oWkWtP0m0\ 81: 09C8EAjzzyoFYviK+J5BG4ADcDxk88n6Vt6pd7IDlsHHUdcV5vqeoNPqEcES7lGDyc855p1H\ 82: 0RhTim+ZnO+I7tr+FDGxwTkH+9z1/wA+1buhadsfTLC9kKRXKG4TY2CFHAPsd2D+Fc/r0n2Y\ 83: 7xhio4I+nSuo0+xuVWK9ubmJZDDHBDHJHkxgDkkn16n6qKFoVFc020cH8Z/ETeAvAPiLVZZz\ 84: JNBbPBbOxzukkbbH+O7B/E1+ZGpxi51BYUbd0XPueSa+rP20PjHa63qVp4O0m5jnttPk869n\ 85: icODMoKqmQcMV+YkEdWHpXUfsw/se6H4/wDBk+teK4rxJ78K9rJC5SSFT8xIDLjJyByG/Cve\ 86: y+jaLk9D5fN8Qp1FFa2PAvh1pB8J6bHfsB/berE29nG2c20WOZ2GMgHpnIyh7hq/S34TM7/C\ 87: vwa0hcyHRrIsZM7ifITOc85rzT4sfAIeD9Alv/C2j6XdXCNFFC19CVMMe9VLnauDsXJwMDAO\ 88: OmD7F4WtJLDwxpFtNsMsNnDG5jTYu4IAcLk4GR0yfqa9io48qUWfMU1Lmbkj8ivj1Fj43fEE\ 89: kY/4qHUDgj/p5krho+TjqfT2r7D/AGs/2dbi+8Rav4s8NW73ck13I99YxqWkLlyS6KBkjqSD\ 90: z1I9R8gy27QPscMpHBBBBBrGUdLrY6YS113Puf4MeK9T8R6ZpOni6ka0W2EpjUneECgnB/lX\ 91: 0pZ6Jb39jDGuoXP2UqpEYYZZe+c85r4w/Z18bMuk6OunPbx6jCslrP5oyCgKlCMEEHB65/Cv\ 92: p/wd441q5PlSabaTQx/KptnkDH8xj+VfJ1oqM3dH6DhFUqUVOL/E9ZMCQxQNEQdoC4A5Aroo\ 93: JgbfgHGOOe9efLqOqQKt29rssTjfFv8A3wGQCcYIx3611lperPAroQd3OAcg+4rKF0yqjdlc\ 94: XVyTbMzMd3LbV5rzyUi3uZJXIXkYJ69a6/XNXjt7V1BJYcFc9q8y1TVf3r4wzEfdH14/lVSj\ 95: d6GftLKzKmvakiP5zKJYYF8xlOcHB6YH0/U1lfFbxZqw8DT3811Hp6yQl2S0BRwcZ4JPHPpz\ 96: yPSte601ru2SEqqvIwklPG0f3F/qR9a8z/aK1M/2ANJt2OSmwbu4GCc/UA/nVwjzTSM51HTh\ 97: Jo+YPgJ8MLn41fFS101xI9kJDdX03JCxg5IJx3yBz61+sfw/0S30iwS0tVWK2hAREAxgL0HF\ 98: fEv/AATl063itvGGpPGrXRligVyOQoUtjPocj8q+8vDu1bYnHuSpr6ymvdsfD1G5TuybWY0l\ 99: VISgYSnaR+tc+8KW7mKNQscZ2qqjAAHAFdBe3aLMH4KQBnLN26Dmuahu1v4UuU+5OokX6EZH\ 100: 86qfYy0PzV8TftD+Kfhr8b/HUK3L6to41++jNjeO7iJBcuMRkn5OB2yPUd67q98E/Dr9pjw9\ 101: dap4bjTSvE6RO32eMxwyGXnBmQbsqTj5h19e1eJftT+Ebvwl8cPFgmRvKv8AUJtQhkAwHWWR\ 102: nwD6gsV/CvPfCXjDVPA+uW+q6RdyWtzEQcxsQrjPKMMjcpx0rPWDLVpo+l/ht8BdY+FurS6j\ 103: qV0sg/tRLGCOPISZPKZi4yoOSQFH+6fQV9WeD9AjtGFxFIGZsFg4wM+1eGaZ8ftB+IvwiuNY\ 104: 1OVNO1XTHQyQrgZuMELsBblXBYDoevU1N4U/ae0O2KWmoSyaZc7QfLukCOAcY43YBrycbRc5\ 105: qcV0PosuxEKdJwk9T6Y1bVZEtJIwiyErjHPH5cViaf4u8iEo0ihx3DZ7/X6/pXkd7+0VpV0m\ 106: 22eWdmBG5Isj884ri9R+LXmxzlHJK/M0cGDIAD1wDwB3/pXnqjKOh6DxMZbntvi/xotnbtLJ\ 107: OFJGOT1zjpzWd4Ht7vxFdtMIg28jLy/6uJeOD36duvpXz1e/FDw1p17Fc+K9Yl1RVCtFpuhS\ 108: LPtJOf30hOwduFJ+orjviT+1v4k8U6ZJo3hqCPwpopYH/QWdLmUYx88gb8wOfUmuunhKkjlq\ 109: 4qnF6s+s/Hnxl8D/AA3s7g3et2015FkfY4JUmuXfgEsinI44HQY46V8bfE79ot/E+qzvo1ky\ 110: W7goJb1cvz1ICtgH8TXjVzcPNK0krs7sSWdycsfU8nmq5YueOgr0KWBUHzS1Z5VfHyqR5Y6I\ 111: +j/2JviHqHhr4t2ugtct/ZutI6SQseBKqblYds4Uj8a/TnQ52FgCQQQMjJr8b/gprDaB8WvC\ 112: d/kqkOoRb2z0Vm2tn2wa/YPS7xPsaKCCCv3wcjpXdBcsrHlzbepm+LtbktdLuiNxkuXEMYHd\ 113: jgD9TmtC3tFsLeO2T7kKiMfQDH9K5nWpUv8AxZotguXijm+0SBOmQMKD+J/SutuP9fJ/vHp9\ 114: aczNO58t/tQ/BhPizpFw9kFTxBYSytaOxA8wFvmiJwTgjoOx+pr4U0LwVFa6k58UQajZWUbG\ 115: N7WzQC7kfkDCOBhQere49Tj7A+I/jzxV4w8Y+J/DWlxX9pLYXdzFIllHHHNJEJWCOC06vgrg\ 116: 5GAcjswry608MXGk6qbuXUtC0ScOzTS6/qvkXEhA5DpDI0hJ7YcZzz0qvefQ7YYemo80p/Jb\ 117: nm58R2XhuwitF0u5S0sYGNra3kATzL1h888wzglckKD2Ue9cp4bubW48V2dzrdy725uUlupJ\ 118: MuWAcFs8HJIz/nmu9+J1zp3iWym1DQbHUdQgt3H27W5bYQWqPyAsKKCFVsgkuzOSAT3z5NLN\ 119: 5xOByPWtFTUk3cylPkaUVoe6eNPjt4bgvJU8GeErEW0o+ebV7RHbdxzGqNhR35LD2FeM6r4o\ 120: 1HUvNWW5dYpG3mCEeXGW9dg4FZjRtIwYg49TUq22CDke4/rUU8NCGwTxE5vsQYZxk9DxgmpD\ 121: GMYLfe61bht/NDZ4Rf4iMA//AF67DRPCkupyLPpOi319BGEZ5ms3utjqMtkKAu09wc4Fb8ij\ 122: rYxs5dTirPTLjVHEcMbyM3GQOAfc8gfjXT2fwh1swJdXEDLZk7SYXV3YnoFx1J656e9aFxFq\ 123: XhOGLVLSe1vtMvAUkNsCiITn924AUxvxnHtwSM56/RfHdpbMk9hepC00qq9lc8AoAOHjHBJI\ 124: YYUMD1CpwK5qs5WvHU7qFKlJ8tRtP8DhbNNOtrOe3jtWtruFSSZRiViSMN1+YY4wAMZB55I+\ 125: uf2Mfi3rGreCtV0vV76XUH0+YLby3Ehd9jLwCSxPBGB7V8teOIra61GyvbSJIJpgySopygYD\ 126: BAx1HQjk9eter/saauLXX9btX0+6kR0RsxQllyrEd/YmslPmtJoVak4e4mfa+g3Srq7aldsA\ 127: 5AHXoB0ruY51ukWZOVkAcH2PNeST6vG5KizvdmOn2c8/pXp+iMr6LYFQyqbeMhXGGA2jqPWr\ 128: lOMvhOLklDdH5o/GP4ia5L8SviDplvpenS2w1i+t2lTTYzNtE7oCZQu7dxwc8da850rUPC1n\ 129: o7Sana6xf68rkLbiREtcZ43HG8+65Xpwea/Vyf4Y+Drqa5mm8J6HNLdTNcTySabCzSyscs7E\ 130: r8zEnJJ5NVl+D/gNb5bweCfDgvFYOtwNJt/MDDoQ2zOfehezXwqxq6snvqfmD4g1HXfEunst\ 131: 7GukadbZCaHYRNDFCQuQ7xk4Gc9WO88YzXALDvZyGyg7sQMV+v5+EfgUxGL/AIQvw95ZYvs/\ 132: sqDG49TjZ1NVx8Evh2pOPAXhgZ640a2/+IrSNRR0SJk+azv6n5I6Vpl5rd9FY6ba3GoXkp2x\ 133: wW8ZkdjjPyqBk8Z7e9d9Z/Dux0qaWHXb3z7xY9ws9NmVkgkzjbM5yAw4+VNx9SvJr9PdI+F3\


134: gzw/cvcaX4R0LTbh0aNpbPTYYmZDwVJVQcHuKiX4ReBUj2L4K8OhOm0aVBj8tlEqzt7u5VH2\ 135: Sleqm12XU/PGz8Q2VhaMka+H7AQY4i0qKedyccAsjtnBPVl+prS0pJNWSPUdI8QW97qULhYb\ 136: e2nkj1CMNkZjiYAsB6Rsx9hX6B23wx8HWcTRW/hPQ4I24ZI9NhUH6gLVUfBzwCsyyjwP4bEq\ 137: ncHGk2+4H1zs61zWurSbZ6CxypzvRppLtufn+7afczz3N8lzY3+9YrlLS2jmtboIOWmhdlBl\ 138: BySQcE84z81c14u8LW99bwPbfYEtJJSLbUo4BatDKCCYboAlUJAJVskH1IyF/TO7+HPhPULg\ 139: T3XhfRrmcdJZtPhZh+JXNQr8LvBi29xAPCOhCC4CiaIabDtlCnKhhtwcHkZ6URvF/wBXM6le\ 140: jNXjFxfrofmACmqWn9n3I+x6pAysEmXaS20DpzlTx05P0II7P4QfF6z+BWpXTa3aXcolixGb\ 141: OJJdzbgQcuyjGCRnOfav0Fl+D3gKaSN5PBHhx3jUIjNpNuSqjoAdnA9qLv4PeAtQQJdeCPDl\ 142: yo6LNpNu4H5pTMZVlK11qj5LH7e2kSTLHaeHpJgcqrzyhHzx6BvfvX2T4K1k+IvBug6q0Jtm\ 143: v7CC6MJOfLLxq238M4rBT4GfDeNw6/D7wqrA5DDRbYEH/vj2rs7e3is7eKCCJIYIlCRxRqFV\ 144: FAwAAOAAO1P5nNKXMf/Z" style="opacity: 0.8"/> 145: 146: <text x="150" y="250">embedded GIF image (base64 encoded)</text> 147: 148: <image x="40" y="230" width="88" height="31" xlink:href="data:image/gif;base64, 149: R0lGODdhWAAfAPcAAI7Q/KTZ+zpmhMPn/4m31kuQveDy/9mEo9Vaf7DBy1ij1So7RtfG3Gma\ 150: uV+//twAL+IT979nAQAAckL3v6TzAQCk8wEASCr3vwAAAAD4AR4AhQBcDVwNhQABAAAA4BBH\ 151: FzIHAAAE+G8AxCb3v6wh9b8AcG8AckL3v6TzOrcDAIKHAwD3BdD3bwBAiAAAHPhvAOj3oocA\ 152: ADyOCAEuBwAAOrf3BQAAKQAAANkDAAAAAAAAAAAAAAAAAAAX+G8A0PdvABI/978lAAAA90H3\ 153: v5CU/L/5zfe/kJT8v5gg9b//928AAQAAAKz3bwAAAAAAAfhvAJgg9b/iE/e/ZwEAAMUS979O\ 154: cW8AFgAAAFxB978c+W8AAAAAAAEAAAAE+W8AxWP3v//3bwAWAAAAHPlvAJgg9b8AAAAAAQAA\ 155: AAAAAACoc0gAZgj2QzpcRm94U2Vydlx3d3dcaXByb3ZvdGVcYWRvYmVfc3ZnLmdpZgBB97+k\ 156: 8wEAAAAAAKTzAQAmGPe/AAAAAJN5RQAMRPm/uBn3v4KIAAAo/m8AbRj3v2dUYogAAAAAYog/\ 157: ejAAAAAAAEYCAADciAAAwPhvAGcWAAA3J1cBAAA/ejcnVwHiiHY9hxYEAAAA6RADCQAAZxbi\ 158: iKY9pPhvAAAAAABHAIwPjA8AAHAFAAD8////AAAAAAAAAAAAAAAAwHNIAGD6bwASP/e/JQAA\ 159: APdB97+QlPy/+c33v5CU/L+YIPW/AAAAAAEAAADiE/e/ZwEAAMUS97+hcQAAAAAAANxk978A\ 160: AAAAAQAAAAAAAADcTUMAuQNvAJgg9b8AAAAAIAAAAMCvMGNUo8EBANhMWs+iwQFw+W8A8PEM\ 161: APgMUAAcAQAAoKP3vwAATQAUDlAA8PEMAAAAAAAMAE0AAABNAPgMUABAAAAAAAAAANAFAAAB\ 162: BQAAmPlvAFCl978AAE0AZ6X3vwAATQBBAAAAAAAAAAAAAAAAAAAAAAAAAMTARAAeDVAABKJO\ 163: ACINUADOc0gA//////wMUAAuwUQAHg1QACH5BAAAAAAALAAAAABYAB8AQAj/AA0IHEiwoMGD\ 164: CAkOMLBwgMOHECNKjBjAYcWLAwJc1BgAQAOBD0I+QECQwUKGDESOlFjxIccGAjQKWEBAAEyY\ 165: AmoC2ClAgIKcCxQEFVBAaAMHAIQq9emgqVOnBQSAZIBQpEmGA1Y6nBkgwYIEMxNoBAt0AQAC\ 166: NQXsXMu2LVIASJvCfUr36c8CUQcuWPBx7wIDDfh6XSBgQODCAwb3/HpxL8cEgQnPVAtg78wG\ 167: BCznFOpAqQO/Mwn/BO2XsIO8BlSGpKoQgWoEEyFynE0bQMeObd3C3R23d93fqEWWFAkb64GQ\ 168: sClatEi7eUcCuQm83YlUety5TRUo+P0UdcKTAh1i/5UNdq9YrzG/XtaYNqfHvZF71rScWcDn\ 169: AkNJL4hKOP9pqQYIQNJX/TEw2WALGMhXbBll5Nxstp0FXW67rSWXU7xxR1dwqj3AmkCuvTYT\ 170: Sy45+OBOuFFYIW/UZaghVACqdkBBDb02UUsNNhCYjjCtFUADKlZIgGdzYbfdizCChNxwJDWU\ 171: EnLKyZYRY5XtRJNZOUW1Fk1REUWUUj/F5WVRC7zI4YepqTRjQ64l59KDzeWWYpAWFnkhkk2h\ 172: NiNCT3o43gEPmdfgYGMBFZNGEdL51oXYYYckfgp4x8Bf4SEmkFcNRURAAw6VV9FkDQSQmVkR\ 173: ErZTYDztBd1M+BFFGKRO7f/3mX1ClTnrf5f6BdOkXk0a2KSTLUBiS3DaxtFZfKl43Z141hVV\ 174: AgfYJC1O1PZk7bXYZqvtttx26y23CSGUaWwbwRnnnBQu2+xvNSmpEkkDDdAncTWVWK6J5yaq\ 175: bIsZOuoodxyqpJBAx707rEYZ4SRfAccWQCdcBUingJ1xFdVswCEdtFCIUEppooNeibUYTTqO\ 176: CuROJjuwWE6T9eZTyxpijOYDazLEsZuyceSgTRp9VVlmaKm61qgERBXVqHsVkKd9MAMcY0h7\ 177: grgaQwb0ibO9sy3AntaZoRrahACEtuNMKicdq3aWmfl01AYUnLGTHZfYoM4nopsui+r+qzZI\ 178: 8Ar/NK9WDqXkZgCh8WWZRvERXlqoivbrm94xA4gAmgQVjPMByQVAWEYJEKD5oZqXZ6yoDO9b\ 179: IaMYMluXUF6GO9ABsJv0kOyJHY44TYTrSBiic9bUpcQ94aRdAz+97JPRTBPV2WJ4Aej6Q+Ox\ 180: JOrumtMU06gc1bclkPglW6tPe9Xan1+jFb4d2d4FlkCu4RmA6Y2Mfe6gebfHhCxlgSlQX1Aq\ 181: r1zrrWhTmmhGgzb7eEdAAvCK+gx3GAZKxSKbEgu+moOWkpXKJmzRn4WgcyHtZMcpkcrOdjyI\ 182: mh0tAAEECtkCDnAl9dFuOfcqFm6+phsW4W1dS6ua66jWvoNtZILHslsNB+1EMRz+JyAAOw==\ 183: "/> 184: 185: </svg>

entities.svg

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: <!ENTITY radius "40">


7: <!ENTITY rot "#F00"> 8: 9: ]> 10: 11:  12:  13: 14: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 15: 16: <title>SVG - Learning By Coding</title> 17: <desc>SVG-Spezifikation in Beispielen</desc> 18: <text x="20" y="30" style="fill: #000; font-size: 24px">Entity-Definitionen</text> 19: 20: <circle cx="100" cy="110" r="&radius;" style="fill: &rot;"/> 21: 22: </svg>

event-handler.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <style type="text/css"> 18: <![CDATA[ 19: 20: text.haupt 21: { 22: fill: #F00; 23: font-size: 18px; 24: }


25: 26: text.unter 27: { 28: fill: #00C; 29: font-size: 14px; 30: } 31: 32: ]]> 33: </style> 34: 35: </defs> 36: 37: <text x="20" y="30" style="fill: #000; font-size: 24px"> 38: Event-Handler für die Reaktion auf Ereignisse</text> 39: 40: <text x="30" y="70" class="haupt">Grafik- und Containerelemente</text> 41: <text y="70" class="unter"> 42: <tspan x="30" dy="20">› onactivate</tspan> 43: <tspan x="30" dy="20">› onclick</tspan> 44: <tspan x="30" dy="20">› onfocusin</tspan> 45: <tspan x="30" dy="20">› onfocusout</tspan> 46: <tspan x="30" dy="20">› onload</tspan> 47: <tspan x="30" dy="20">› onmousedown</tspan> 48: <tspan x="30" dy="20">› onmouseup</tspan> 49: <tspan x="30" dy="20">› onmouseover</tspan> 50: <tspan x="30" dy="20">› onmouseout</tspan> 51: <tspan x="30" dy="20">› onmousemove</tspan> 52: </text> 53: 54: <text x="30" y="310" class="haupt">Dokument-Element</text> 55: <text y="310" class="unter"> 56: <tspan x="30" dy="20">› onabort</tspan> 57: <tspan x="30" dy="20">› onerror</tspan> 58: <tspan x="30" dy="20">› onresize</tspan> 59: <tspan x="30" dy="20">› onscroll</tspan> 60: <tspan x="30" dy="20">› onunload</tspan> 61: <tspan x="30" dy="20">› onzoom</tspan> 62: </text> 63: 64: <text x="250" y="310" class="haupt">Animationselemente</text> 65: <text y="310" class="unter"> 66: <tspan x="250" dy="20">› onbegin</tspan> 67: <tspan x="250" dy="20">› onend</tspan> 68: <tspan x="250" dy="20">› onrepeat</tspan> 69: </text> 70: 71: </svg>

farben.svg

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:  8: 


9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px">Farben in SVG definieren</text> 15: 16: <rect x="20" y="50" width="50" height="20" style="fill: #FFFF00"/> 17: <text x="80" y="65">Farbwert: #FFFF00 [Hexwert, sechsstellig)</text> 18: <rect x="20" y="80" width="50" height="20" style="fill: #F00"/> 19: <text x="80" y="95">Farbwert: #F00 [Hexwert in Kurzform, #F00 = #FF0000]</text> 20: <rect x="20" y="110" width="50" height="20" style="fill: rgb(0,128,0)"/> 21: <text x="80" y="125">Farbwert: rgb(0,128,0) [RGB 0-255]</text> 22: <rect x="20" y="140" width="50" height="20" style="fill: rgb(0%,0%,100%)"/> 23: <text x="80" y="155">Farbwert: rgb(0%,0%,100%) [RGB 0%-100%]</text> 24: <rect x="20" y="170" width="50" height="20" style="fill: black"/> 25: <text x="80" y="185">Farbwert: black [Farbname, siehe </text> 26: <a xlink:href="../?doc=farbnamen" target="_top"> 27: <text x="265" y="185">farbnamen.svg]</text> 28: </a> 29: 30: </svg>

farbnamen.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: onload="getSVGDoc(evt)" onzoom="ZoomControl()">


12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: <defs><script xlink:href="tooltip.js" type="text/javascript"/></defs> 16: <text x="20" y="25" style="fill: #000; font-size: 24px">Farbnamen in SVG</text> 17: 18: <rect x="10" y="40" height="10" width="10" style="fill: aliceblue" 19: onmouseover="ShowTooltip(evt,'rgb(240,248,255)')" onmouseout="HideTooltip()"/> 20: <text x="25" y="50">aliceblue</text> 21: <rect x="10" y="60" height="10" width="10" style="fill: antiquewhite" 22: onmouseover="ShowTooltip(evt,'rgb(250,235,215)')" onmouseout="HideTooltip()"/> 23: <text x="25" y="70">antiquewhite</text> 24: <rect x="10" y="80" height="10" width="10" style="fill: aqua" 25: onmouseover="ShowTooltip(evt,'rgb(0,255,255)')" onmouseout="HideTooltip()"/> 26: <text x="25" y="90">aqua</text> 27: <rect x="10" y="100" height="10" width="10" style="fill: aquamarine" 28: onmouseover="ShowTooltip(evt,'rgb(127,255,212)')" onmouseout="HideTooltip()"/> 29: <text x="25" y="110">aquamarine</text> 30: <rect x="10" y="120" height="10" width="10" style="fill: azure" 31: onmouseover="ShowTooltip(evt,'rgb(240,255,255)')" onmouseout="HideTooltip()"/> 32: <text x="25" y="130">azure</text> 33: <rect x="10" y="140" height="10" width="10" style="fill: beige" 34: onmouseover="ShowTooltip(evt,'rgb(245,245,220)')" onmouseout="HideTooltip()"/> 35: <text x="25" y="150">beige</text> 36: <rect x="10" y="160" height="10" width="10" style="fill: bisque" 37: onmouseover="ShowTooltip(evt,'rgb(255,228,196)')" onmouseout="HideTooltip()"/> 38: <text x="25" y="170">bisque</text> 39: <rect x="10" y="180" height="10" width="10" style="fill: black" 40: onmouseover="ShowTooltip(evt,'rgb(0,0,0)')" onmouseout="HideTooltip()"/> 41: <text x="25" y="190">black</text> 42: <rect x="10" y="200" height="10" width="10" style="fill: blanchedalmond" 43: onmouseover="ShowTooltip(evt,'rgb(255,235,205)')" onmouseout="HideTooltip()"/> 44: <text x="25" y="210">blanchedalmond</text> 45: <rect x="10" y="220" height="10" width="10" style="fill: blue" 46: onmouseover="ShowTooltip(evt,'rgb(0,0,255)')" onmouseout="HideTooltip()"/> 47: <text x="25" y="230">blue</text> 48: <rect x="10" y="240" height="10" width="10" style="fill: blueviolet" 49: onmouseover="ShowTooltip(evt,'rgb(138,43,226)')" onmouseout="HideTooltip()"/> 50: <text x="25" y="250">blueviolet</text> 51: <rect x="10" y="260" height="10" width="10" style="fill: brown" 52: onmouseover="ShowTooltip(evt,'rgb(165,42,42)')" onmouseout="HideTooltip()"/> 53: <text x="25" y="270">brown</text> 54: <rect x="10" y="280" height="10" width="10" style="fill: burlywood" 55: onmouseover="ShowTooltip(evt,'rgb(222,184,135)')" onmouseout="HideTooltip()"/> 56: <text x="25" y="290">burlywood</text> 57: <rect x="10" y="300" height="10" width="10" style="fill: cadetblue" 58: onmouseover="ShowTooltip(evt,'rgb(95,158,160)')" onmouseout="HideTooltip()"/> 59: <text x="25" y="310">cadetblue</text> 60: <rect x="10" y="320" height="10" width="10" style="fill: chartreuse" 61: onmouseover="ShowTooltip(evt,'rgb(127,255,0)')" onmouseout="HideTooltip()"/> 62: <text x="25" y="330">chartreuse</text> 63: <rect x="10" y="340" height="10" width="10" style="fill: chocolate" 64: onmouseover="ShowTooltip(evt,'rgb(210,105,30)')" onmouseout="HideTooltip()"/> 65: <text x="25" y="350">chocolate</text> 66: <rect x="10" y="360" height="10" width="10" style="fill: coral" 67: onmouseover="ShowTooltip(evt,'rgb(255,127,80)')" onmouseout="HideTooltip()"/> 68: <text x="25" y="370">coral</text> 69: <rect x="10" y="380" height="10" width="10" style="fill: cornflowerblue" 70: onmouseover="ShowTooltip(evt,'rgb(100,149,237)')" onmouseout="HideTooltip()"/> 71: <text x="25" y="390">cornflowerblue</text> 72: <rect x="10" y="400" height="10" width="10" style="fill: cornsilk" 73: onmouseover="ShowTooltip(evt,'rgb(255,248,220)')" onmouseout="HideTooltip()"/> 74: <text x="25" y="410">cornsilk</text> 75: <rect x="10" y="420" height="10" width="10" style="fill: crimson" 76: onmouseover="ShowTooltip(evt,'rgb(220,20,60)')" onmouseout="HideTooltip()"/> 77: <text x="25" y="430">crimson</text> 78: <rect x="10" y="440" height="10" width="10" style="fill: cyan" 79: onmouseover="ShowTooltip(evt,'rgb(0,255,255)')" onmouseout="HideTooltip()"/> 80: <text x="25" y="450">cyan</text> 81: <rect x="10" y="460" height="10" width="10" style="fill: darkblue" 82: onmouseover="ShowTooltip(evt,'rgb(0,0,139)')" onmouseout="HideTooltip()"/> 83: <text x="25" y="470">darkblue</text> 84: <rect x="10" y="480" height="10" width="10" style="fill: darkcyan" 85: onmouseover="ShowTooltip(evt,'rgb(0,139,139)')" onmouseout="HideTooltip()"/> 86: <text x="25" y="490">darkcyan</text> 87: <rect x="10" y="500" height="10" width="10" style="fill: darkgoldenrod" 88: onmouseover="ShowTooltip(evt,'rgb(184,134,11)')" onmouseout="HideTooltip()"/> 89: <text x="25" y="510">darkgoldenrod</text>


90: <rect x="10" y="520" height="10" width="10" style="fill: darkgray" 91: onmouseover="ShowTooltip(evt,'rgb(169,169,169)')" onmouseout="HideTooltip()"/> 92: <text x="25" y="530">darkgray</text> 93: <rect x="135" y="40" height="10" width="10" style="fill: darkgreen" 94: onmouseover="ShowTooltip(evt,'rgb(0,100,0)')" onmouseout="HideTooltip()"/> 95: <text x="150" y="50">darkgreen</text> 96: <rect x="135" y="60" height="10" width="10" style="fill: darkgrey" 97: onmouseover="ShowTooltip(evt,'rgb(169,169,169)')" onmouseout="HideTooltip()"/> 98: <text x="150" y="70">darkgrey</text> 99: <rect x="135" y="80" height="10" width="10" style="fill: darkkhaki" 100: onmouseover="ShowTooltip(evt,'rgb(189,183,107)')" onmouseout="HideTooltip()"/> 101: <text x="150" y="90">darkkhaki</text> 102: <rect x="135" y="100" height="10" width="10" style="fill: darkmagenta" 103: onmouseover="ShowTooltip(evt,'rgb(139,0,139)')" onmouseout="HideTooltip()"/> 104: <text x="150" y="110">darkmagenta</text> 105: <rect x="135" y="120" height="10" width="10" style="fill: darkolivegreen" 106: onmouseover="ShowTooltip(evt,'rgb(85,107,47)')" onmouseout="HideTooltip()"/> 107: <text x="150" y="130">darkolivegreen</text> 108: <rect x="135" y="140" height="10" width="10" style="fill: darkorange" 109: onmouseover="ShowTooltip(evt,'rgb(255,140,0)')" onmouseout="HideTooltip()"/> 110: <text x="150" y="150">darkorange</text> 111: <rect x="135" y="160" height="10" width="10" style="fill: darkorchid" 112: onmouseover="ShowTooltip(evt,'rgb(153,50,204)')" onmouseout="HideTooltip()"/> 113: <text x="150" y="170">darkorchid</text> 114: <rect x="135" y="180" height="10" width="10" style="fill: darkred" 115: onmouseover="ShowTooltip(evt,'rgb(139,0,0)')" onmouseout="HideTooltip()"/> 116: <text x="150" y="190">darkred</text> 117: <rect x="135" y="200" height="10" width="10" style="fill: darksalmon" 118: onmouseover="ShowTooltip(evt,'rgb(233,150,122)')" onmouseout="HideTooltip()"/> 119: <text x="150" y="210">darksalmon</text> 120: <rect x="135" y="220" height="10" width="10" style="fill: darkseagreen" 121: onmouseover="ShowTooltip(evt,'rgb(143,188,143)')" onmouseout="HideTooltip()"/> 122: <text x="150" y="230">darkseagreen</text> 123: <rect x="135" y="240" height="10" width="10" style="fill: darkslateblue" 124: onmouseover="ShowTooltip(evt,'rgb(72,61,139)')" onmouseout="HideTooltip()"/> 125: <text x="150" y="250">darkslateblue</text> 126: <rect x="135" y="260" height="10" width="10" style="fill: darkslategray" 127: onmouseover="ShowTooltip(evt,'rgb(47,79,79)')" onmouseout="HideTooltip()"/> 128: <text x="150" y="270">darkslategray</text> 129: <rect x="135" y="280" height="10" width="10" style="fill: darkslategrey" 130: onmouseover="ShowTooltip(evt,'rgb(47,79,79)')" onmouseout="HideTooltip()"/> 131: <text x="150" y="290">darkslategrey</text> 132: <rect x="135" y="300" height="10" width="10" style="fill: darkturquoise" 133: onmouseover="ShowTooltip(evt,'rgb(0,206,209)')" onmouseout="HideTooltip()"/> 134: <text x="150" y="310">darkturquoise</text> 135: <rect x="135" y="320" height="10" width="10" style="fill: darkviolet" 136: onmouseover="ShowTooltip(evt,'rgb(148,0,211)')" onmouseout="HideTooltip()"/> 137: <text x="150" y="330">darkviolet</text> 138: <rect x="135" y="340" height="10" width="10" style="fill: deeppink" 139: onmouseover="ShowTooltip(evt,'rgb(255,20,147)')" onmouseout="HideTooltip()"/> 140: <text x="150" y="350">deeppink</text> 141: <rect x="135" y="360" height="10" width="10" style="fill: deepskyblue" 142: onmouseover="ShowTooltip(evt,'rgb(0,191,255)')" onmouseout="HideTooltip()"/> 143: <text x="150" y="370">deepskyblue</text> 144: <rect x="135" y="380" height="10" width="10" style="fill: dimgray" 145: onmouseover="ShowTooltip(evt,'rgb(105,105,105)')" onmouseout="HideTooltip()"/> 146: <text x="150" y="390">dimgray</text> 147: <rect x="135" y="400" height="10" width="10" style="fill: dimgrey" 148: onmouseover="ShowTooltip(evt,'rgb(105,105,105)')" onmouseout="HideTooltip()"/> 149: <text x="150" y="410">dimgrey</text> 150: <rect x="135" y="420" height="10" width="10" style="fill: dodgerblue" 151: onmouseover="ShowTooltip(evt,'rgb(30,144,255)')" onmouseout="HideTooltip()"/> 152: <text x="150" y="430">dodgerblue</text> 153: <rect x="135" y="440" height="10" width="10" style="fill: firebrick" 154: onmouseover="ShowTooltip(evt,'rgb(178,34,34)')" onmouseout="HideTooltip()"/> 155: <text x="150" y="450">firebrick</text> 156: <rect x="135" y="460" height="10" width="10" style="fill: floralwhite" 157: onmouseover="ShowTooltip(evt,'rgb(255,250,240)')" onmouseout="HideTooltip()"/> 158: <text x="150" y="470">floralwhite</text> 159: <rect x="135" y="480" height="10" width="10" style="fill: forestgreen" 160: onmouseover="ShowTooltip(evt,'rgb(34,139,34)')" onmouseout="HideTooltip()"/> 161: <text x="150" y="490">forestgreen</text> 162: <rect x="135" y="500" height="10" width="10" style="fill: fuchsia" 163: onmouseover="ShowTooltip(evt,'rgb(255,0,255)')" onmouseout="HideTooltip()"/> 164: <text x="150" y="510">fuchsia</text> 165: <rect x="135" y="520" height="10" width="10" style="fill: gainsboro" 166: onmouseover="ShowTooltip(evt,'rgb(220,220,220)')" onmouseout="HideTooltip()"/> 167: <text x="150" y="530">gainsboro</text>


168: <rect x="260" y="40" height="10" width="10" style="fill: ghostwhite" 169: onmouseover="ShowTooltip(evt,'rgb(248,248,255)')" onmouseout="HideTooltip()"/> 170: <text x="275" y="50">ghostwhite</text> 171: <rect x="260" y="60" height="10" width="10" style="fill: gold" 172: onmouseover="ShowTooltip(evt,'rgb(255,215,0)')" onmouseout="HideTooltip()"/> 173: <text x="275" y="70">gold</text> 174: <rect x="260" y="80" height="10" width="10" style="fill: goldenrod" 175: onmouseover="ShowTooltip(evt,'rgb(218,165,32)')" onmouseout="HideTooltip()"/> 176: <text x="275" y="90">goldenrod</text> 177: <rect x="260" y="100" height="10" width="10" style="fill: gray" 178: onmouseover="ShowTooltip(evt,'rgb(128,128,128)')" onmouseout="HideTooltip()"/> 179: <text x="275" y="110">gray</text> 180: <rect x="260" y="120" height="10" width="10" style="fill: grey" 181: onmouseover="ShowTooltip(evt,'rgb(128,128,128)')" onmouseout="HideTooltip()"/> 182: <text x="275" y="130">grey</text> 183: <rect x="260" y="140" height="10" width="10" style="fill: green" 184: onmouseover="ShowTooltip(evt,'rgb(0,128,0)')" onmouseout="HideTooltip()"/> 185: <text x="275" y="150">green</text> 186: <rect x="260" y="160" height="10" width="10" style="fill: greenyellow" 187: onmouseover="ShowTooltip(evt,'rgb(173,255,47)')" onmouseout="HideTooltip()"/> 188: <text x="275" y="170">greenyellow</text> 189: <rect x="260" y="180" height="10" width="10" style="fill: honeydew" 190: onmouseover="ShowTooltip(evt,'rgb(240,255,240)')" onmouseout="HideTooltip()"/> 191: <text x="275" y="190">honeydew</text> 192: <rect x="260" y="200" height="10" width="10" style="fill: hotpink" 193: onmouseover="ShowTooltip(evt,'rgb(255,105,180)')" onmouseout="HideTooltip()"/> 194: <text x="275" y="210">hotpink</text> 195: <rect x="260" y="220" height="10" width="10" style="fill: indianred" 196: onmouseover="ShowTooltip(evt,'rgb(205,92,92)')" onmouseout="HideTooltip()"/> 197: <text x="275" y="230">indianred</text> 198: <rect x="260" y="240" height="10" width="10" style="fill: indigo" 199: onmouseover="ShowTooltip(evt,'rgb(75,0,130)')" onmouseout="HideTooltip()"/> 200: <text x="275" y="250">indigo</text> 201: <rect x="260" y="260" height="10" width="10" style="fill: ivory" 202: onmouseover="ShowTooltip(evt,'rgb(255,255,240)')" onmouseout="HideTooltip()"/> 203: <text x="275" y="270">ivory</text> 204: <rect x="260" y="280" height="10" width="10" style="fill: khaki" 205: onmouseover="ShowTooltip(evt,'rgb(240,230,140)')" onmouseout="HideTooltip()"/> 206: <text x="275" y="290">khaki</text> 207: <rect x="260" y="300" height="10" width="10" style="fill: lavender" 208: onmouseover="ShowTooltip(evt,'rgb(230,230,250)')" onmouseout="HideTooltip()"/> 209: <text x="275" y="310">lavender</text> 210: <rect x="260" y="320" height="10" width="10" style="fill: lavenderblush" 211: onmouseover="ShowTooltip(evt,'rgb(255,240,245)')" onmouseout="HideTooltip()"/> 212: <text x="275" y="330">lavenderblush</text> 213: <rect x="260" y="340" height="10" width="10" style="fill: lawngreen" 214: onmouseover="ShowTooltip(evt,'rgb(124,252,0)')" onmouseout="HideTooltip()"/> 215: <text x="275" y="350">lawngreen</text> 216: <rect x="260" y="360" height="10" width="10" style="fill: lemonchiffon" 217: onmouseover="ShowTooltip(evt,'rgb(255,250,205)')" onmouseout="HideTooltip()"/> 218: <text x="275" y="370">lemonchiffon</text> 219: <rect x="260" y="380" height="10" width="10" style="fill: lightblue" 220: onmouseover="ShowTooltip(evt,'rgb(173,216,230)')" onmouseout="HideTooltip()"/> 221: <text x="275" y="390">lightblue</text> 222: <rect x="260" y="400" height="10" width="10" style="fill: lightcoral" 223: onmouseover="ShowTooltip(evt,'rgb(240,128,128)')" onmouseout="HideTooltip()"/> 224: <text x="275" y="410">lightcoral</text> 225: <rect x="260" y="420" height="10" width="10" style="fill: lightcyan" 226: onmouseover="ShowTooltip(evt,'rgb(224,255,255)')" onmouseout="HideTooltip()"/> 227: <text x="275" y="430">lightcyan</text> 228: <rect x="260" y="440" height="10" width="10" style="fill: lightgoldenrodyellow" 229: onmouseover="ShowTooltip(evt,'rgb(250,250,210)')" onmouseout="HideTooltip()"/> 230: <text x="275" y="450">lightgoldenrodyellow</text> 231: <rect x="260" y="460" height="10" width="10" style="fill: lightgray" 232: onmouseover="ShowTooltip(evt,'rgb(211,211,211)')" onmouseout="HideTooltip()"/> 233: <text x="275" y="470">lightgray</text> 234: <rect x="260" y="480" height="10" width="10" style="fill: lightgreen" 235: onmouseover="ShowTooltip(evt,'rgb(144,238,144)')" onmouseout="HideTooltip()"/> 236: <text x="275" y="490">lightgreen</text> 237: <rect x="260" y="500" height="10" width="10" style="fill: lightgrey" 238: onmouseover="ShowTooltip(evt,'rgb(211,211,211)')" onmouseout="HideTooltip()"/> 239: <text x="275" y="510">lightgrey</text> 240: <rect x="260" y="520" height="10" width="10" style="fill: lightpink" 241: onmouseover="ShowTooltip(evt,'rgb(255,182,193)')" onmouseout="HideTooltip()"/> 242: <text x="275" y="530">lightpink</text> 243: <rect x="385" y="40" height="10" width="10" style="fill: lightsalmon" 244: onmouseover="ShowTooltip(evt,'rgb(255,160,122)')" onmouseout="HideTooltip()"/> 245: <text x="400" y="50">lightsalmon</text>


246: <rect x="385" y="60" height="10" width="10" style="fill: lightseagreen" 247: onmouseover="ShowTooltip(evt,'rgb(32,178,170)')" onmouseout="HideTooltip()"/> 248: <text x="400" y="70">lightseagreen</text> 249: <rect x="385" y="80" height="10" width="10" style="fill: lightskyblue" 250: onmouseover="ShowTooltip(evt,'rgb(135,206,250)')" onmouseout="HideTooltip()"/> 251: <text x="400" y="90">lightskyblue</text> 252: <rect x="385" y="100" height="10" width="10" style="fill: lightslategray" 253: onmouseover="ShowTooltip(evt,'rgb(119,136,153)')" onmouseout="HideTooltip()"/> 254: <text x="400" y="110">lightslategray</text> 255: <rect x="385" y="120" height="10" width="10" style="fill: lightslategrey" 256: onmouseover="ShowTooltip(evt,'rgb(119,136,153)')" onmouseout="HideTooltip()"/> 257: <text x="400" y="130">lightslategrey</text> 258: <rect x="385" y="140" height="10" width="10" style="fill: lightsteelblue" 259: onmouseover="ShowTooltip(evt,'rgb(176,196,222)')" onmouseout="HideTooltip()"/> 260: <text x="400" y="150">lightsteelblue</text> 261: <rect x="385" y="160" height="10" width="10" style="fill: lightyellow" 262: onmouseover="ShowTooltip(evt,'rgb(255,255,224)')" onmouseout="HideTooltip()"/> 263: <text x="400" y="170">lightyellow</text> 264: <rect x="385" y="180" height="10" width="10" style="fill: lime" 265: onmouseover="ShowTooltip(evt,'rgb(0,255,0)')" onmouseout="HideTooltip()"/> 266: <text x="400" y="190">lime</text> 267: <rect x="385" y="200" height="10" width="10" style="fill: limegreen" 268: onmouseover="ShowTooltip(evt,'rgb(50,205,50)')" onmouseout="HideTooltip()"/> 269: <text x="400" y="210">limegreen</text> 270: <rect x="385" y="220" height="10" width="10" style="fill: linen" 271: onmouseover="ShowTooltip(evt,'rgb(250,240,230)')" onmouseout="HideTooltip()"/> 272: <text x="400" y="230">linen</text> 273: <rect x="385" y="240" height="10" width="10" style="fill: magenta" 274: onmouseover="ShowTooltip(evt,'rgb(255,0,255)')" onmouseout="HideTooltip()"/> 275: <text x="400" y="250">magenta</text> 276: <rect x="385" y="260" height="10" width="10" style="fill: maroon" 277: onmouseover="ShowTooltip(evt,'rgb(128,0,0)')" onmouseout="HideTooltip()"/> 278: <text x="400" y="270">maroon</text> 279: <rect x="385" y="280" height="10" width="10" style="fill: mediumaquamarine" 280: onmouseover="ShowTooltip(evt,'rgb(102,205,170)')" onmouseout="HideTooltip()"/> 281: <text x="400" y="290">mediumaquamarine</text> 282: <rect x="385" y="300" height="10" width="10" style="fill: mediumblue" 283: onmouseover="ShowTooltip(evt,'rgb(0,0,205)')" onmouseout="HideTooltip()"/> 284: <text x="400" y="310">mediumblue</text> 285: <rect x="385" y="320" height="10" width="10" style="fill: mediumorchid" 286: onmouseover="ShowTooltip(evt,'rgb(186,85,211)')" onmouseout="HideTooltip()"/> 287: <text x="400" y="330">mediumorchid</text> 288: <rect x="385" y="340" height="10" width="10" style="fill: mediumpurple" 289: onmouseover="ShowTooltip(evt,'rgb(147,112,219)')" onmouseout="HideTooltip()"/> 290: <text x="400" y="350">mediumpurple</text> 291: <rect x="385" y="360" height="10" width="10" style="fill: mediumseagreen" 292: onmouseover="ShowTooltip(evt,'rgb(60,179,113)')" onmouseout="HideTooltip()"/> 293: <text x="400" y="370">mediumseagreen</text> 294: <rect x="385" y="380" height="10" width="10" style="fill: mediumslateblue" 295: onmouseover="ShowTooltip(evt,'rgb(123,104,238)')" onmouseout="HideTooltip()"/> 296: <text x="400" y="390">mediumslateblue</text> 297: <rect x="385" y="400" height="10" width="10" style="fill: mediumspringgreen" 298: onmouseover="ShowTooltip(evt,'rgb(0,250,154)')" onmouseout="HideTooltip()"/> 299: <text x="400" y="410">mediumspringgreen</text> 300: <rect x="385" y="420" height="10" width="10" style="fill: mediumturquoise" 301: onmouseover="ShowTooltip(evt,'rgb(72,209,204)')" onmouseout="HideTooltip()"/> 302: <text x="400" y="430">mediumturquoise</text> 303: <rect x="385" y="440" height="10" width="10" style="fill: mediumvioletred" 304: onmouseover="ShowTooltip(evt,'rgb(199,21,133)')" onmouseout="HideTooltip()"/> 305: <text x="400" y="450">mediumvioletred</text> 306: <rect x="385" y="460" height="10" width="10" style="fill: midnightblue" 307: onmouseover="ShowTooltip(evt,'rgb(25,25,112)')" onmouseout="HideTooltip()"/> 308: <text x="400" y="470">midnightblue</text> 309: <rect x="385" y="480" height="10" width="10" style="fill: mintcream" 310: onmouseover="ShowTooltip(evt,'rgb(245,255,250)')" onmouseout="HideTooltip()"/> 311: <text x="400" y="490">mintcream</text> 312: <rect x="385" y="500" height="10" width="10" style="fill: mistyrose" 313: onmouseover="ShowTooltip(evt,'rgb(255,228,225)')" onmouseout="HideTooltip()"/> 314: <text x="400" y="510">mistyrose</text> 315: <rect x="385" y="520" height="10" width="10" style="fill: moccasin" 316: onmouseover="ShowTooltip(evt,'rgb(255,228,181)')" onmouseout="HideTooltip()"/> 317: <text x="400" y="530">moccasin</text> 318: <rect x="510" y="40" height="10" width="10" style="fill: navajowhite" 319: onmouseover="ShowTooltip(evt,'rgb(255,222,173)')" onmouseout="HideTooltip()"/> 320: <text x="525" y="50">navajowhite</text> 321: <rect x="510" y="60" height="10" width="10" style="fill: navy" 322: onmouseover="ShowTooltip(evt,'rgb(0,0,128)')" onmouseout="HideTooltip()"/> 323: <text x="525" y="70">navy</text>


324: <rect x="510" y="80" height="10" width="10" style="fill: oldlace" 325: onmouseover="ShowTooltip(evt,'rgb(253,245,230)')" onmouseout="HideTooltip()"/> 326: <text x="525" y="90">oldlace</text> 327: <rect x="510" y="100" height="10" width="10" style="fill: olive" 328: onmouseover="ShowTooltip(evt,'rgb(128,128,0)')" onmouseout="HideTooltip()"/> 329: <text x="525" y="110">olive</text> 330: <rect x="510" y="120" height="10" width="10" style="fill: olivedrab" 331: onmouseover="ShowTooltip(evt,'rgb(107,142,35)')" onmouseout="HideTooltip()"/> 332: <text x="525" y="130">olivedrab</text> 333: <rect x="510" y="140" height="10" width="10" style="fill: orange" 334: onmouseover="ShowTooltip(evt,'rgb(255,165,0)')" onmouseout="HideTooltip()"/> 335: <text x="525" y="150">orange</text> 336: <rect x="510" y="160" height="10" width="10" style="fill: orangered" 337: onmouseover="ShowTooltip(evt,'rgb(255,69,0)')" onmouseout="HideTooltip()"/> 338: <text x="525" y="170">orangered</text> 339: <rect x="510" y="180" height="10" width="10" style="fill: orchid" 340: onmouseover="ShowTooltip(evt,'rgb(218,112,214)')" onmouseout="HideTooltip()"/> 341: <text x="525" y="190">orchid</text> 342: <rect x="510" y="200" height="10" width="10" style="fill: palegoldenrod" 343: onmouseover="ShowTooltip(evt,'rgb(238,232,170)')" onmouseout="HideTooltip()"/> 344: <text x="525" y="210">palegoldenrod</text> 345: <rect x="510" y="220" height="10" width="10" style="fill: palegreen" 346: onmouseover="ShowTooltip(evt,'rgb(152,251,152)')" onmouseout="HideTooltip()"/> 347: <text x="525" y="230">palegreen</text> 348: <rect x="510" y="240" height="10" width="10" style="fill: paleturquoise" 349: onmouseover="ShowTooltip(evt,'rgb(175,238,238)')" onmouseout="HideTooltip()"/> 350: <text x="525" y="250">paleturquoise</text> 351: <rect x="510" y="260" height="10" width="10" style="fill: palevioletred" 352: onmouseover="ShowTooltip(evt,'rgb(219,112,147)')" onmouseout="HideTooltip()"/> 353: <text x="525" y="270">palevioletred</text> 354: <rect x="510" y="280" height="10" width="10" style="fill: papayawhip" 355: onmouseover="ShowTooltip(evt,'rgb(255,239,213)')" onmouseout="HideTooltip()"/> 356: <text x="525" y="290">papayawhip</text> 357: <rect x="510" y="300" height="10" width="10" style="fill: peachpuff" 358: onmouseover="ShowTooltip(evt,'rgb(255,218,185)')" onmouseout="HideTooltip()"/> 359: <text x="525" y="310">peachpuff</text> 360: <rect x="510" y="320" height="10" width="10" style="fill: peru" 361: onmouseover="ShowTooltip(evt,'rgb(205,133,63)')" onmouseout="HideTooltip()"/> 362: <text x="525" y="330">peru</text> 363: <rect x="510" y="340" height="10" width="10" style="fill: pink" 364: onmouseover="ShowTooltip(evt,'rgb(255,192,203)')" onmouseout="HideTooltip()"/> 365: <text x="525" y="350">pink</text> 366: <rect x="510" y="360" height="10" width="10" style="fill: plum" 367: onmouseover="ShowTooltip(evt,'rgb(221,160,221)')" onmouseout="HideTooltip()"/> 368: <text x="525" y="370">plum</text> 369: <rect x="510" y="380" height="10" width="10" style="fill: powderblue" 370: onmouseover="ShowTooltip(evt,'rgb(176,224,230)')" onmouseout="HideTooltip()"/> 371: <text x="525" y="390">powderblue</text> 372: <rect x="510" y="400" height="10" width="10" style="fill: purple" 373: onmouseover="ShowTooltip(evt,'rgb(128,0,128)')" onmouseout="HideTooltip()"/> 374: <text x="525" y="410">purple</text> 375: <rect x="510" y="420" height="10" width="10" style="fill: red" 376: onmouseover="ShowTooltip(evt,'rgb(255,0,0)')" onmouseout="HideTooltip()"/> 377: <text x="525" y="430">red</text> 378: <rect x="510" y="440" height="10" width="10" style="fill: rosybrown" 379: onmouseover="ShowTooltip(evt,'rgb(188,143,143)')" onmouseout="HideTooltip()"/> 380: <text x="525" y="450">rosybrown</text> 381: <rect x="510" y="460" height="10" width="10" style="fill: royalblue" 382: onmouseover="ShowTooltip(evt,'rgb(65,105,225)')" onmouseout="HideTooltip()"/> 383: <text x="525" y="470">royalblue</text> 384: <rect x="510" y="480" height="10" width="10" style="fill: saddlebrown" 385: onmouseover="ShowTooltip(evt,'rgb(139,69,19)')" onmouseout="HideTooltip()"/> 386: <text x="525" y="490">saddlebrown</text> 387: <rect x="510" y="500" height="10" width="10" style="fill: salmon" 388: onmouseover="ShowTooltip(evt,'rgb(250,128,114)')" onmouseout="HideTooltip()"/> 389: <text x="525" y="510">salmon</text> 390: <rect x="510" y="520" height="10" width="10" style="fill: sandybrown" 391: onmouseover="ShowTooltip(evt,'rgb(244,164,96)')" onmouseout="HideTooltip()"/> 392: <text x="525" y="530">sandybrown</text> 393: <rect x="635" y="40" height="10" width="10" style="fill: seagreen" 394: onmouseover="ShowTooltip(evt,'rgb(46,139,87)')" onmouseout="HideTooltip()"/> 395: <text x="650" y="50">seagreen</text> 396: <rect x="635" y="60" height="10" width="10" style="fill: seashell" 397: onmouseover="ShowTooltip(evt,'rgb(255,245,238)')" onmouseout="HideTooltip()"/> 398: <text x="650" y="70">seashell</text> 399: <rect x="635" y="80" height="10" width="10" style="fill: sienna" 400: onmouseover="ShowTooltip(evt,'rgb(160,82,45)')" onmouseout="HideTooltip()"/> 401: <text x="650" y="90">sienna</text>


402: <rect x="635" y="100" height="10" width="10" style="fill: silver" 403: onmouseover="ShowTooltip(evt,'rgb(192,192,192)')" onmouseout="HideTooltip()"/> 404: <text x="650" y="110">silver</text> 405: <rect x="635" y="120" height="10" width="10" style="fill: skyblue" 406: onmouseover="ShowTooltip(evt,'rgb(135,206,235)')" onmouseout="HideTooltip()"/> 407: <text x="650" y="130">skyblue</text> 408: <rect x="635" y="140" height="10" width="10" style="fill: slateblue" 409: onmouseover="ShowTooltip(evt,'rgb(106,90,205)')" onmouseout="HideTooltip()"/> 410: <text x="650" y="150">slateblue</text> 411: <rect x="635" y="160" height="10" width="10" style="fill: slategray" 412: onmouseover="ShowTooltip(evt,'rgb(112,128,144)')" onmouseout="HideTooltip()"/> 413: <text x="650" y="170">slategray</text> 414: <rect x="635" y="180" height="10" width="10" style="fill: slategrey" 415: onmouseover="ShowTooltip(evt,'rgb(112,128,144)')" onmouseout="HideTooltip()"/> 416: <text x="650" y="190">slategrey</text> 417: <rect x="635" y="200" height="10" width="10" style="fill: snow" 418: onmouseover="ShowTooltip(evt,'rgb(255,250,250)')" onmouseout="HideTooltip()"/> 419: <text x="650" y="210">snow</text> 420: <rect x="635" y="220" height="10" width="10" style="fill: springgreen" 421: onmouseover="ShowTooltip(evt,'rgb(0,255,127)')" onmouseout="HideTooltip()"/> 422: <text x="650" y="230">springgreen</text> 423: <rect x="635" y="240" height="10" width="10" style="fill: steelblue" 424: onmouseover="ShowTooltip(evt,'rgb(70,130,180)')" onmouseout="HideTooltip()"/> 425: <text x="650" y="250">steelblue</text> 426: <rect x="635" y="260" height="10" width="10" style="fill: tan" 427: onmouseover="ShowTooltip(evt,'rgb(210,180,140)')" onmouseout="HideTooltip()"/> 428: <text x="650" y="270">tan</text> 429: <rect x="635" y="280" height="10" width="10" style="fill: teal" 430: onmouseover="ShowTooltip(evt,'rgb(0,128,128)')" onmouseout="HideTooltip()"/> 431: <text x="650" y="290">teal</text> 432: <rect x="635" y="300" height="10" width="10" style="fill: thistle" 433: onmouseover="ShowTooltip(evt,'rgb(216,191,216)')" onmouseout="HideTooltip()"/> 434: <text x="650" y="310">thistle</text> 435: <rect x="635" y="320" height="10" width="10" style="fill: tomato" 436: onmouseover="ShowTooltip(evt,'rgb(255,99,71)')" onmouseout="HideTooltip()"/> 437: <text x="650" y="330">tomato</text> 438: <rect x="635" y="340" height="10" width="10" style="fill: turquoise" 439: onmouseover="ShowTooltip(evt,'rgb(64,224,208)')" onmouseout="HideTooltip()"/> 440: <text x="650" y="350">turquoise</text> 441: <rect x="635" y="360" height="10" width="10" style="fill: violet" 442: onmouseover="ShowTooltip(evt,'rgb(238,130,238)')" onmouseout="HideTooltip()"/> 443: <text x="650" y="370">violet</text> 444: <rect x="635" y="380" height="10" width="10" style="fill: wheat" 445: onmouseover="ShowTooltip(evt,'rgb(245,222,179)')" onmouseout="HideTooltip()"/> 446: <text x="650" y="390">wheat</text> 447: <rect x="635" y="400" height="10" width="10" style="fill: white" 448: onmouseover="ShowTooltip(evt,'rgb(255,255,255)')" onmouseout="HideTooltip()"/> 449: <text x="650" y="410">white</text> 450: <rect x="635" y="420" height="10" width="10" style="fill: whitesmoke" 451: onmouseover="ShowTooltip(evt,'rgb(245,245,245)')" onmouseout="HideTooltip()"/> 452: <text x="650" y="430">whitesmoke</text> 453: <rect x="635" y="440" height="10" width="10" style="fill: yellow" 454: onmouseover="ShowTooltip(evt,'rgb(255,255,0)')" onmouseout="HideTooltip()"/> 455: <text x="650" y="450">yellow</text> 456: <rect x="635" y="460" height="10" width="10" style="fill: yellowgreen" 457: onmouseover="ShowTooltip(evt,'rgb(154,205,50)')" onmouseout="HideTooltip()"/> 458: <text x="650" y="470">yellowgreen</text> 459: 460: <g id="tooltip"> 461: <rect id="ttr" x="0" y="0" rx="5" ry="5" width="100" height="16" 462: style="visibility: hidden"/> 463: <text id="ttt" x="0" y="0" style="visibility: hidden">dyn. Text</text> 464: </g> 465: 466: </svg>


fill-rule.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px"> 15: Eigenschaft fill-rule</text> 16: 17: <polygon points="122,59,72,205,194,114,49,114,171,205" 18: style="fill-rule: nonzero; fill: #CFC; stroke: #000"/> 19: 20: <polygon points="321,60,271,206,393,115,248,115,370,206" 21: style="fill-rule: evenodd; fill: #CFC; stroke: #000"/> 22: 23: <text x="90" y="240" style="fill: #090; font-size: 16px"> 24: nonzero</text> 25: 26: <text x="290" y="240" style="fill: #090; font-size: 16px"> 27: evenodd</text> 28: 29: </svg>

filter_feFilterName.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <defs> 13: 14: <filter id="einfilter"> 15: <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="out1"/> 16: <feSpecularLighting in="out1" specularExponent="10" surfaceScale="3" result="out2"> 17: <fePointLight x="150" y="300" z="300"/> 18: </feSpecularLighting> 19: <feComposite in="SourceGraphic" in2="out2" operator="arithmetic" 20: k1="0" k2="1" k3="1" k4="0"/> 21: </filter> 22: 23: </defs> 24: 25: <title>SVG - Learning By Coding</title> 26: <desc>SVG-Spezifikation in Beispielen</desc> 27: <text x="20" y="30" style="fill: #000; font-size: 24px">Elemente filter | feFilterName</text> 28: 29: <circle cx="100" cy="100" r="50" style="fill: #090; filter: url(#einfilter)"/> 30: 31: <a xlink:href="../?doc=barchart" target="_top"> 32: <text x="30" y="180" style="fill: #090; font-size: 18px"> 33: Weitere Filter werden im Beispiel barchart.svg verwendet. 34: </text> 35: </a> 36: 37: </svg>

filter_animation.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <filter id="filtermix" x="-30%" y="-30%" width="160%" height="160%"> 18: 19: <feFlood result="out1" style="flood-color: #FFF; flood-opacity: 0.5"> 20: <animate attributeName="flood-color" attributeType="CSS" from="#FFF" to="#00C" 21: dur="30s" repeatCount="indefinite"/> 22: <animate attributeName="flood-opacity" attributeType="CSS" from="0.5" to="1.0"


23: dur="30s" repeatCount="indefinite"/> 24: </feFlood> 25: 26: <feMorphology radius="30" in="SourceAlpha" result="out2" operator="dilate"/> 27: 28: <feGaussianBlur in="out2" result="out3" stdDeviation="5"> 29: <animate attributeName="stdDeviation" attributeType="XML" from="5" to="25" 30: dur="30s" repeatCount="indefinite"/> 31: </feGaussianBlur> 32: 33: <feComposite operator="in" in="out1" in2="out3" result="out4"/> 34: 35: <feComposite in="SourceGraphic" in2="out4" operator="over"/> 36: 37: </filter> 38: 39: </defs> 40: 41: <text x="20" y="30" style="fill: #000; font-size: 24px"> 42: Animierte Filterkomposition</text> 43: 44: <circle cx="165" cy="130" r="40" style="fill: #FFF; filter: url(#filtermix)"> 45: <animate attributeName="fill" attributeType="CSS" from="#FFF" to="#FF0" 46: dur="30s" repeatCount="indefinite"/> 47: </circle> 48: 49: </svg>

filter_ColorMatrix.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <defs>


13: 14: <filter id="cm-unf" filterUnits="objectBoundingBox" x="0" y="0" width="370" height="220"> 15: <feColorMatrix type="unfiltered"/> 16: </filter> 17: 18: <filter id="cm-mat" filterUnits="objectBoundingBox" x="0" y="0" width="370" height="220"> 19: <feColorMatrix type="matrix" values="0 1 0 0 0 0 0 1 0 0 0 0 0 0 1 0 0 0 1 0"/> 20: </filter> 21: 22: <filter id="cm-hue" filterUnits="objectBoundingBox" x="0" y="0" width="370" height="220"> 23: <feColorMatrix type="hueRotate" values="90"/> 24: </filter> 25: 26: <filter id="cm-sat" filterUnits="objectBoundingBox" x="0" y="0" width="370" height="220"> 27: <feColorMatrix type="saturate" values="0.5"/> 28: </filter> 29: 30: <filter id="cm-lum" filterUnits="objectBoundingBox" x="0" y="0" width="370" height="220"> 31: <feColorMatrix type="luminanceToAlpha"/> 32: </filter> 33: 34: </defs> 35: 36: <title>SVG - Learning By Coding</title> 37: <desc>SVG-Spezifikation in Beispielen</desc> 38: <text x="20" y="30" style="fill: #000; font-size: 24px"> 39: Filter-Element feColorMatrix</text> 40: 41: <g transform="scale(0.6)"> 42: <image xlink:href="bilder/bild1.jpg" x="20" y="70" width="375" height="220" style="filter: url(#cm-unf)"/> 43: <image xlink:href="bilder/bild1.jpg" x="395" y="70" width="375" height="220" style="filter: url(#cm-mat)"/> 44: <image xlink:href="bilder/bild1.jpg" x="20" y="290" width="375" height="220" style="filter: url(#cm-hue)"/> 45: <image xlink:href="bilder/bild1.jpg" x="395" y="290" width="375" height="220" style="filter: url(#cm-sat)"/> 46: <image xlink:href="bilder/bild1.jpg" x="20" y="510" width="375" height="220" style="filter: url(#cm-lum)"/> 47: 48: </g> 49: 50: <text x="270" y="340"><tspan style="fill: #000"><feColorMatrix ... </tspan> 51: <tspan style="fill: #F00">type="..."</tspan><tspan style="fill: #000"> /></tspan> 52: </text> 53: <rect x="280" y="360" width="70" height="20" style="fill: #EEE"/> 54: <text x="285" y="375" style="fill: #F00">unfiltered</text> 55: <rect x="350" y="360" width="70" height="20" style="fill: #EEE"/> 56: <text x="355" y="375" style="fill: #F00">matrix</text> 57: <rect x="280" y="380" width="70" height="20" style="fill: #EEE"/> 58: <text x="285" y="395" style="fill: #F00">hueRotate</text> 59: <rect x="350" y="380" width="70" height="20" style="fill: #EEE"/> 60: <text x="355" y="395" style="fill: #F00">saturate</text> 61: <rect x="280" y="400" width="140" height="20" style="fill: #EEE"/> 62: <text x="285" y="415" style="fill: #F00">luminanceToAlpha</text> 63: 64: </svg>


filter_Composite.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <defs> 13: 14: <filter id="compo" filterUnits="userSpaceOnUse" x="20" y="70" width="375" height="220"> 15: <feImage xlink:href="bilder/bild1.jpg" result="b1"/> 16: <feImage xlink:href="bilder/bild2.jpg" result="b2"/> 17: <feComposite in="b1" in2="b2" operator="arithmetic" k1="0.9" k2="0.6" k3="0.9" k4="0"/> 18:  19: </filter> 20: 21: </defs> 22: 23: <title>SVG - Learning By Coding</title> 24: <desc>SVG-Spezifikation in Beispielen</desc> 25: <text x="20" y="30" style="fill: #000; font-size: 24px"> 26: Filter-Element feComposite</text> 27: 28: <rect x="20" y="70" width="375" height="220" style="filter: url(#compo)"/> 29: 30: </svg>


filter_Displacement.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <defs> 13: 14: <filter id="dismap" filterUnits="userSpaceOnUse" x="20" y="70" width="375" height="220"> 15: <feImage xlink:href="bilder/bild1.jpg" result="b1"/> 16: <feImage xlink:href="bilder/bild2.jpg" result="b2"/> 17: <feDisplacementMap in="b2" in2="b1" scale="80" xChannelSelector="R" yChannelSelector="B"/> 18: </filter> 19: 20: </defs> 21: 22: <title>SVG - Learning By Coding</title> 23: <desc>SVG-Spezifikation in Beispielen</desc> 24: <text x="20" y="30" style="fill: #000; font-size: 24px"> 25: Filter-Element feDisplacementMap</text> 26: 27: <rect x="20" y="70" width="375" height="220" style="filter: url(#dismap)"/> 28: 29: </svg>


filter_Flood.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <defs> 13: 14: <filter id="flood" filterUnits="userSpaceOnUse" x="20" y="70" width="375" height="220"> 15: <feImage xlink:href="bilder/bild1.jpg" result="b1"/> 16: <feFlood flood-color="#FF0" flood-opacity="0.6" result="b2"/> 17: <feComposite in="b1" in2="b2" operator="arithmetic" k1="0.4" k2="0.6" k3="1" k4="0"/> 18: </filter> 19: 20: </defs> 21: 22: <title>SVG - Learning By Coding</title> 23: <desc>SVG-Spezifikation in Beispielen</desc> 24: <text x="20" y="30" style="fill: #000; font-size: 24px"> 25: Filter-Element feFlood</text> 26: 27: <rect x="20" y="70" width="375" height="220" style="filter: url(#flood)"/> 28: 29: </svg>


filter_ImageBlend.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <defs> 13: 14: <filter id="blend-normal" filterUnits="userSpaceOnUse" 15: x="20" y="70" width="375" height="220"> 16: <feImage xlink:href="bilder/bild1.jpg" result="b1"/> 17: <feImage xlink:href="bilder/bild2.jpg" result="b2"/> 18: <feBlend in="b1" in2="b2" mode="normal"/> 19: </filter> 20: 21: <filter id="blend-darken" filterUnits="userSpaceOnUse" 22: x="395" y="70" width="375" height="220"> 23: <feImage xlink:href="bilder/bild1.jpg" result="b1"/> 24: <feImage xlink:href="bilder/bild2.jpg" result="b2"/> 25: <feBlend in="b1" in2="b2" mode="darken"/> 26: </filter> 27: 28: <filter id="blend-lighten" filterUnits="userSpaceOnUse" 29: x="20" y="290" width="375" height="220"> 30: <feImage xlink:href="bilder/bild1.jpg" result="b1"/> 31: <feImage xlink:href="bilder/bild2.jpg" result="b2"/> 32: <feBlend in="b1" in2="b2" mode="lighten"/> 33: </filter> 34: 35: <filter id="blend-multiply" filterUnits="userSpaceOnUse" 36: x="395" y="290" width="375" height="220"> 37: <feImage xlink:href="bilder/bild1.jpg" result="b1"/> 38: <feImage xlink:href="bilder/bild2.jpg" result="b2"/> 39: <feBlend in="b1" in2="b2" mode="multiply"/> 40: </filter> 41: 42: <filter id="blend-screen" filterUnits="userSpaceOnUse" 43: x="20" y="510" width="375" height="220">


44: <feImage xlink:href="bilder/bild1.jpg" result="b1"/> 45: <feImage xlink:href="bilder/bild2.jpg" result="b2"/> 46: <feBlend in="b1" in2="b2" mode="screen"/> 47: </filter> 48: 49: </defs> 50: 51: <title>SVG - Learning By Coding</title> 52: <desc>SVG-Spezifikation in Beispielen</desc> 53: <text x="20" y="30" style="fill: #000; font-size: 24px"> 54: Filter-Elemente feImage und feBlend</text> 55: 56: <g transform="scale(0.6)"> 57: <rect x="20" y="70" width="375" height="220" style="filter: url(#blend-normal)"/> 58: <rect x="395" y="70" width="375" height="220" style="filter: url(#blend-darken)"/> 59: <rect x="20" y="290" width="375" height="220" style="filter: url(#blend-lighten)"/> 60: <rect x="395" y="290" width="375" height="220" style="filter: url(#blend-multiply)"/> 61: <rect x="20" y="510" width="375" height="220" style="filter: url(#blend-screen)"/> 62: </g> 63: 64: <text x="285" y="340"><tspan style="fill: #000"><feBlend ... </tspan> 65: <tspan style="fill: #F00">mode="..."</tspan><tspan style="fill: #000"> /></tspan> 66: </text> 67: <rect x="300" y="360" width="50" height="20" style="fill: #EEE"/> 68: <text x="305" y="375" style="fill: #F00">normal</text> 69: <rect x="350" y="360" width="50" height="20" style="fill: #EEE"/> 70: <text x="355" y="375" style="fill: #F00">darken</text> 71: <rect x="300" y="380" width="50" height="20" style="fill: #EEE"/> 72: <text x="305" y="395" style="fill: #F00">lighten</text> 73: <rect x="350" y="380" width="50" height="20" style="fill: #EEE"/> 74: <text x="355" y="395" style="fill: #F00">multiply</text> 75: <rect x="300" y="400" width="50" height="20" style="fill: #EEE"/> 76: <text x="305" y="415" style="fill: #F00">screen</text> 77: 78: </svg>

filter_Merge.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <defs> 13:


14: <filter id="merge" filterUnits="userSpaceOnUse" x="20" y="70" width="375" height="220"> 15: <feImage xlink:href="#bild1" result="b1"/> 16: <feImage xlink:href="#bild2" result="b2"/> 17: <feMerge> 18: <feMergeNode in="b1"/> 19: <feMergeNode in="b2"/> 20: </feMerge> 21: </filter> 22: 23: <image id="bild1" xlink:href="bilder/bild1.jpg" x="20" y="70" 24: width="375" height="220" opacity="0.6"/> 25: <image id="bild2" xlink:href="bilder/bild2.jpg" x="20" y="70" 26: width="375" height="220" opacity="0.4"/> 27: 28: </defs> 29: 30: <title>SVG - Learning By Coding</title> 31: <desc>SVG-Spezifikation in Beispielen</desc> 32: <text x="20" y="30" style="fill: #000; font-size: 24px"> 33: Filter-Elemente feMerge und feMergeNode</text> 34: 35: <rect x="20" y="70" width="375" height="220" style="filter: url(#merge)"/> 36: 37: </svg>

filter_Morphology.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <defs> 13: 14: <filter id="morph-dil" filterUnits="userSpaceOnUse" x="20" y="290" width="375" height="220"> 15: <feMorphology in="SourceGraphic" radius="5,5" operator="dilate"/> 16: </filter> 17:


18: <filter id="morph-ero" filterUnits="userSpaceOnUse" x="395" y="290" width="375" height="220"> 19: <feMorphology in="SourceGraphic" radius="3,3" operator="erode"/> 20: </filter> 21: 22: </defs> 23: 24: <title>SVG - Learning By Coding</title> 25: <desc>SVG-Spezifikation in Beispielen</desc> 26: <text x="20" y="30" style="fill: #000; font-size: 24px"> 27: Filter-Element feMorphology</text> 28: 29: <g transform="scale(0.6)"> 30: <image xlink:href="bilder/bild1.jpg" x="20" y="70" width="375" height="220"/> 31: <image xlink:href="bilder/bild1.jpg" x="20" y="290" width="375" height="220" style="filter: url(#morph-dil)"/> 32: <image xlink:href="bilder/bild1.jpg" x="395" y="290" width="375" height="220" style="filter: url(#morph-ero)"/> 33: </g> 34: 35: <text x="150" y="340"><tspan style="fill: #000"><feMorphology ... </tspan> 36: <tspan style="fill: #F00">operator="..."</tspan><tspan style="fill: #000"> /></tspan> 37: </text> 38: <rect x="170" y="360" width="70" height="20" style="fill: #EEE"/> 39: <text x="185" y="375" style="fill: #F00">dilate</text> 40: <rect x="240" y="360" width="70" height="20" style="fill: #EEE"/> 41: <text x="255" y="375" style="fill: #F00">erode</text> 42: 43: </svg>

filter_PointLight.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <defs> 13: 14: <filter id="point" filterUnits="userSpaceOnUse" x="20" y="70" width="250" height="150"> 15: <feSpecularLighting in="SourceGraphic" surfaceScale="3" specularConstant="4" 16: specularExponent="10" lighting-color="#FFF"> 17: <fePointLight x="145" y="145" z="10"/> 18: </feSpecularLighting> 19: </filter> 20: 21: </defs> 22:


23: <title>SVG - Learning By Coding</title> 24: <desc>SVG-Spezifikation in Beispielen</desc> 25: <text x="20" y="30" style="fill: #000; font-size: 24px"> 26: Filter-Element fePointLight</text> 27: 28: <rect x="20" y="70" width="250" height="150" style="fill: #F00"/> 29: <rect x="20" y="70" width="250" height="150" style="filter: url(#point)"/> 30: 31: </svg>

filter_SpotLight.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <defs> 13: 14: <filter id="spot" filterUnits="userSpaceOnUse" x="20" y="70" width="250" height="150"> 15: <feSpecularLighting in="SourceGraphic" surfaceScale="2" specularConstant="1.3" 16: specularExponent="10" lighting-color="#FFF"> 17: <feSpotLight x="110" y="120" z="130" pointsAtX="150" pointsAtY="150" pointsAtZ="0" 18: specularExponent="10" limitingConeAngle="90"/> 19: </feSpecularLighting> 20: </filter> 21: 22: </defs> 23: 24: <title>SVG - Learning By Coding</title> 25: <desc>SVG-Spezifikation in Beispielen</desc> 26: <text x="20" y="30" style="fill: #000; font-size: 24px"> 27: Filter-Element feSpotLight</text> 28: 29: <rect x="20" y="70" width="250" height="150" style="fill: #F00"/> 30: <rect x="20" y="70" width="250" height="150" style="filter: url(#spot)"/> 31: 32: </svg>


filter_Tile.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <defs> 13: 14: <filter id="tile" filterUnits="userSpaceOnUse"> 15: <feImage xlink:href="bilder/bild1.jpg" 16: x="19" y="69" width="50" height="30" result="img"/> 17: <feTile x="20" y="70" width="350" height="210" in="img"/> 18: </filter> 19: 20: </defs> 21: 22: <title>SVG - Learning By Coding</title> 23: <desc>SVG-Spezifikation in Beispielen</desc> 24: <text x="20" y="30" style="fill: #000; font-size: 24px"> 25: Filter-Element feTile</text> 26: 27: <rect x="20" y="70" width="350" height="210" 28: style="opacity: 0.8; filter: url(#tile)"/> 29: 30: </svg>


filter_Turbulence.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <defs> 13: 14: <filter id="turb1" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> 15: <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="5" seed="0" 16: stitchTiles="stitch"/> 17: </filter> 18: 19: <filter id="turb2" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> 20: <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="5" seed="0" 21: stitchTiles="noStitch"/> 22: </filter> 23: 24: <filter id="turb3" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> 25: <feTurbulence type="turbulence" baseFrequency="0.1" numOctaves="8" seed="0" 26: stitchTiles="stitch"/> 27: </filter> 28: 29: <filter id="turb4" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> 30: <feTurbulence type="turbulence" baseFrequency="0.1" numOctaves="8" seed="0" 31: stitchTiles="noStitch"/> 32: </filter> 33: 34: </defs> 35: 36: <title>SVG - Learning By Coding</title> 37: <desc>SVG-Spezifikation in Beispielen</desc> 38: <text x="20" y="30" style="fill: #000; font-size: 24px"> 39: Filter-Element feTurbulence</text> 40: 41: <rect x="20" y="60" width="150" height="80" style="filter: url(#turb1)"/> 42: <rect x="190" y="60" width="150" height="80" style="filter: url(#turb2)"/> 43: <rect x="20" y="160" width="150" height="80" style="filter: url(#turb3)"/> 44: <rect x="190" y="160" width="150" height="80" style="filter: url(#turb4)"/> 45: 46: </svg>


flowtext.svg

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: <!ELEMENT flow (flowRegion,flowDiv)> 6: <!ELEMENT flowRegion (region)> 7: <!ELEMENT flowDiv (flowPara*)> 8: <!ELEMENT flowPara (#PCDATA)> 9: <!ELEMENT region EMPTY> 10: <!ATTLIST region xlink:href CDATA #REQUIRED> 11: ]> 12: 13:  14:  15: 16: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 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: /* Absatzformatierung */ 27: 28: flow 29: { 30: fill: #00C; 31: font-size: 14px; 32: text-align: left; 33: } 34: 35: ]]> 36: </style> 37: 38:  39: <rect id="textbox" x="25" y="65" width="400" height="220"/> 40: 41: </defs> 42: 43: <text x="20" y="30" style="fill: #000; font-size: 24px"> 44: Fließtext (ASV 6.0 wird benötigt) 45: </text> 46: <text x="20" y="50">[sonst bleibt das Rechteck leer]</text> 47: <a xlink:href="bilder/flowtext.gif" target="svgbox"> 48: <text x="215" y="50" style="fill: #F00">Ergebnis als Rastergrafik ... 49: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseover"/> 50: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseout"/> 51: </text> 52: </a> 53:


54:  55: <rect x="20" y="70" width="410" height="225" style="fill: #FFC; stroke: #F00"/> 56: 57:  58: <flow> 59: 60: <flowRegion> 61: <region xlink:href="#textbox"/> 62: </flowRegion> 63: 64: <flowDiv> 65: 66: <flowPara> </flowPara> 67: 68: <flowPara> 69: Der Adobe SVG Viewer 6.0 (Preview 1) ermöglicht als Vorgriff auf die 70: SVG-Spezifikation 1.2 den Umgang mit Fließtext. 71: </flowPara> 72: 73: <flowPara> </flowPara> 74: 75: <flowPara> 76: Zum Einsatz kommen die Elemente flow, flowRegion, region, flowDiv und flowPara. 77: flow umschließt den gesamten Textblock, während flowRegion die Zuweisung einer 78: Region (Kindelement region) zulässt, d. h. der Text kann über eine SVG-Grundform 79: (hier ein Rechteck) verteilt werden. 80: </flowPara> 81: 82: <flowPara> </flowPara> 83: 84: <flowPara> 85: Der eigentliche Text wird unterhalb von flowDiv auf Absätze aufgeteilt. 86: Das Analogon zum (X)HTML-Element p bildet das SVG-Element flowPara. 87: </flowPara> 88: 89: </flowDiv> 90: 91: </flow> 92: 93: </svg>

font-related.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px"> 15: Elemente font | font-face | glyph | missing-glyph</text> 16: 17:  21: 22: <defs> 23: 24:  36: 37: <font id="zeichen" horiz-adv-x="512"> 38: <font-face 39: font-family="TSC FMing S TT" 40: units-per-em="1024" 41: panose-1="2 1 6 9 3 1 1 1 1 1" 42: ascent="819" 43: descent="-204" 44: alphabetic="0"/> 45: 46:  47: <missing-glyph horiz-adv-x="1024" 48: d="M5 -204H1019V819H5V-204ZM10 -199V814H1014V-199H10Z"/> 49: 50:  51: <glyph unicode="日" glyph-name="sonne" horiz-adv-x="1024" 52: d="M236 344H744V676H236V344V344ZM236 -28H744V320H236V-28V-28ZM792 -88L780 -104L760 53: -108L744 -104V-52H236V-104L204 -124L188 -120V736L216 724L252 700H728L760 744L772 54: 740L828 704V696V684L800 636L792 580V-88V-88V-88Z"/> 55: 56:  57: <glyph unicode="雨" glyph-name="regen" horiz-adv-x="1024" 58: d="M224 436H228H248L320 396L380 352L392 328L396 308V296L380 284L360 300L344 59: 324L320 356L280 388L232 428L224 436V436ZM232 212L220 224L252 216L336 168L396 60: 120L400 88L396 68L388 60L368 80L344 108L316 144L276 176L232 212V212V212ZM588 61: 424H592H612L704 380L768 340L784 312L788 288L784 276L772 272L760 280L744 300L680 62: 356L596 416L588 424V424ZM604 212L592 224H596L620 220L712 172L780 120L792 88L788 63: 72L772 64L760 72L748 92L728 116L696 144L656 176L604 212V212V212ZM852 568H872L920 64: 532L924 524L920 516L908 492L904 468V-40L896 -76L880 -104L852 -128L820 -152L796 65: -132V-128L780 -120L748 -108L712 -96L664 -80L648 -76L652 -72L672 -68L820 -88L848 66: -72L860 -40V520H520V-112L488 -124L476 -112V520H140V-120L116 -136L100 -128V576L120 67: 564L140 540H472V708H56L40 716L48 720L72 728H856L900 768H904H916L980 720V712L968 68: 704H516V540H832L852 568V568Z"/> 69: 70:  71: <glyph unicode="風" glyph-name="wind" horiz-adv-x="1024" 72: d="M484 184V4L648 24L628 52L612 76L584 104H588L604 100L620 92L668 52L720 4L732 73: -28L740 -52L732 -76H728L704 -64L680 -20L660 8L580 -8L508 -24L448 -32L392 74: -44L348 -52L312 -60L284 -68L264 -72L252 -100L236 -108L224 -100L204 -28L444 75: -4V184H324V144L308 124L292 116L280 124V444H288H292L340 420H444V564L268 76: 548H256L232 552L236 556L256 560L344 576L424 592L504 612L572 636L592 644L628 77: 632L672 608L652 592L624 600L600 592L572 588L532 580L484 572V420H592L624 78: 448L628 452L644 448L680 416L684 400L680 388L664 364L660 336V300V152L632


79: 140L616 152V184H484V184ZM444 396H324V208H444V396V396ZM612 80: 396H484V208H612V396V396ZM780 760L792 764L804 760L844 724L848 716L840 81: 708L824 684L816 636L808 568L804 476L808 372L816 268L836 168L860 76L892 -8L912 82: -32L924 -28L936 -8L964 100L980 136V124V108L968 24L960 -40L964 -76L968 -100L972 83: -120L956 -140H944L908 -108L876 -64L848 -12L824 48L796 132L780 224L764 332L756 84: 448V704H180V360L164 204L140 68L104 -40L60 -128L40 -148L36 -144L40 -136L48 85: -120L64 -80L80 -36L92 16L104 76L112 144L120 220L128 300L136 392V748L148 86: 756H152L192 728H756L780 760V760Z"/> 87: 88: </font> 89: 90: </defs> 91: 92: <text x="30" y="70" style="font-size: 18px"> 93: Zeichen und Bedeutung im Japanischen</text> 94:  95: 96: <g style="font-family: 'TSC FMing S TT'; font-size: 36px; fill: #F00"> 97:  98: <text x="30" y="120">日</text> 99: <text x="30" y="170">雨</text> 100: <text x="30" y="220">風</text> 101:  102: <text x="30" y="270">願</text> 103: </g> 104: 105: <g style="font-family: sans-serif; font-size: 22px; fill: #000"> 106: <text x="75" y="120">Sonne (日)</text> 107: <text x="75" y="170">Regen (雨)</text> 108: <text x="75" y="220">Wind (風)</text> 109: <text x="75" y="270">missing glyph (願)</text> 110: </g> 111: 112: <text x="30" y="320"><tspan>Hinweis: Die Zeichen wurden mit dem </tspan> 113: <a xlink:href="http://xml.apache.org/batik/ttf2svg.html" target="_top"> 114: <tspan style="fill: #00C">Batik Font Converter Utility ttf2svg 115: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 116: <set attributeName="text-decoration" attributeType="CSS" to="underline" 117: begin="mouseover"/> 118: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 119: <set attributeName="text-decoration" attributeType="CSS" to="none" 120: begin="mouseout"/> 121: </tspan></a><tspan> 122: aus der </tspan> 123: <a xlink:href="http://www.twinbridge.com/" target="_top"> 124: <tspan style="fill: #00C">Fontdatei CFMINGEB.TTF 125: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 126: <set attributeName="text-decoration" attributeType="CSS" to="underline" 127: begin="mouseover"/> 128: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 129: <set attributeName="text-decoration" attributeType="CSS" to="none" 130: begin="mouseout"/> 131: </tspan></a> 132: <tspan x="80" dy="20">in SVG-Pfadbeschreibungen umgewandelt. Das vierte Zeichen 133: existiert nicht und es wird somit das </tspan><tspan x="80" dy="20">als 134: missing-glyph definierte Ersatzzeichen verwendet.</tspan> 135: </text> 136: 137: </svg>


font-stretch.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <style type="text/css"> 18: <![CDATA[ 19: 20: text 21: { 22: font-family: Verdana, Arial, Helvetica, sans-serif; 23: font-size: 16px; 24: fill: #000000; 25: } 26: 27: tspan 28: { 29: font-family: Verdana, Arial, Helvetica, sans-serif; 30: font-size: 16px; 31: fill: #FF0000; 32: } 33: 34: text.fs0 {font-stretch: normal;} 35: text.fs1 {font-stretch: narrower;} 36: text.fs2 {font-stretch: wider;} 37: text.fs3 {font-stretch: condensed;} 38: text.fs4 {font-stretch: semi-condensed;} 39: text.fs5 {font-stretch: extra-condensed;} 40: text.fs6 {font-stretch: ultra-condensed;} 41: text.fs7 {font-stretch: expanded;} 42: text.fs8 {font-stretch: semi-expanded;} 43: text.fs9 {font-stretch: extra-expanded;} 44: text.fs10 {font-stretch: ultra-expanded;} 45: 46: ]]> 47: </style> 48:


49: </defs> 50: 51: <text x="20" y="30" style="fill: #000; font-size: 24px">Die CSS-Eigenschaft font-stretch</text> 52: 53: <text x="20" y="70" class="fs0">Testtext mit font-stretch: <tspan>normal</tspan>.</text> 54: <text x="20" y="100" class="fs1">Testtext mit font-stretch: <tspan>narrower</tspan>.</text> 55: <text x="20" y="130" class="fs2">Testtext mit font-stretch: <tspan>wider</tspan>.</text> 56: <text x="20" y="160" class="fs3">Testtext mit font-stretch: <tspan>condensed</tspan>.</text> 57: <text x="20" y="190" class="fs4">Testtext mit font-stretch: <tspan> semi-condensed</tspan>.</text> 58: <text x="20" y="220" class="fs5">Testtext mit font-stretch: <tspan> extra-condensed</tspan>.</text> 59: <text x="20" y="250" class="fs6">Testtext mit font-stretch: <tspan> ultra-condensed</tspan>.</text> 60: <text x="20" y="280" class="fs7">Testtext mit font-stretch: <tspan>expanded</tspan>.</text> 61: <text x="20" y="310" class="fs8">Testtext mit font-stretch: <tspan> semi-expanded</tspan>.</text> 62: <text x="20" y="340" class="fs9">Testtext mit font-stretch: <tspan> extra-expanded</tspan>.</text> 63: <text x="20" y="370" class="fs10">Testtext mit font-stretch: <tspan> ultra-expanded</tspan>.</text> 64: 65: </svg>

foreignObject.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px"> 15: Element foreignObject (ASV 6.0) 16: </text> 17: <text x="20" y="50">[sonst bleibt das Rechteck leer]</text> 18: <a xlink:href="bilder/foreignObject.gif" target="svgbox"> 19: <text x="220" y="50" style="fill: #F00">Ergebnis als Rastergrafik ... 20: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseover"/> 21: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseout"/> 22: </text> 23: </a> 24: 25: <foreignObject x="20" y="70" width="300" height="150"> 26: <body xmlns="http://www.w3.org/1999/xhtml"> 27: <h2 style="fill: #00C">Text mit h2-Element ausgezeichnet</h2>


28: <hr/> 29: <p style="fill: #090; font-size: 12px"> 30: Das ist ein Absatz,<br/>der neben einem Zeilenumbruch aus viel Text besteht ... 31: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 32: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 33: </p> 34: </body> 35: </foreignObject> 36: 37: </svg>

funktionsplotter.svg

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:  8:  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: line 22: { 23: stroke: #000; 24: stroke-width: 1px 25: } 26: 27: g text 28: { 29: font-family: Arial,Helvetica,sans-serif; 30: font-size: 10px; 31: } 32: 33: ]]> 34: </style> 35: 36:


37: <script type="text/javascript"> 38: <![CDATA[ 39: 40: var svgdoc,svgroot; 41: 42: 43: function getSVGDoc(load_evt) 44: { 45: svgdoc=load_evt.target.ownerDocument; 46: svgroot=svgdoc.documentElement; 47: } 48: 49: 50: function FunktionenZeichnen() 51: { 52: var startx=50,starty=200,faktor=50,x,y,wertepaar="",punkte="",elemobj; 53: 54: // Sinus-Funktion zeichnen 55: 56: // Wertepaare berechnen 57: for(x=0;x<=10;x+=0.01) 58: { 59: y=Math.sin(x); 60: 61: wertepaar=(startx+x*faktor).toString()+","+(starty-y*faktor).toString()+" "; 62: punkte+=wertepaar; 63: } 64: 65: // Sinus-Funktionsgraph mittels polyline erzeugen 66: elemobj=svgdoc.createElement("polyline"); 67: elemobj.setAttribute("points",punkte); 68: elemobj.setAttribute("stroke","#090"); 69: elemobj.setAttribute("stroke-width","1.5px"); 70: elemobj.setAttribute("fill","none"); 71: svgroot.appendChild(elemobj); 72: 73: 74: // Cosinus-Funktion zeichnen 75: 76: // Wertepaare berechnen und 77: // Cosinus-Funktionsgraph punktweise mittels circle erzeugen 78: for(x=0;x<=10;x+=0.01) 79: { 80: y=Math.cos(x); 81: 82: elemobj=svgdoc.createElement("circle"); 83: elemobj.setAttribute("cx",(startx+x*faktor).toString()); 84: elemobj.setAttribute("cy",(starty-y*faktor).toString()); 85: elemobj.setAttribute("r","0.75"); 86: elemobj.setAttribute("fill","#F00"); 87: svgroot.appendChild(elemobj); 88: } 89: 90: 91: // versteckte Hinweistexte einblenden 92: svgdoc.getElementById("sin").style.setProperty("visibility","visible"); 93: svgdoc.getElementById("cos").style.setProperty("visibility","visible"); 94: svgdoc.getElementById("info").style.setProperty("visibility","visible"); 95: svgdoc.getElementById("aktion").style.setProperty("visibility","hidden"); 96: } 97: 98: ]]> 99: </script> 100: 101: </defs> 102: 103: <text x="20" y="30" style="fill: #000; font-size: 24px"> 104: Funktions-Plotter</text> 105: 106:  107: <line x1="50" y1="200" x2="600" y2="200"/> 108: <line x1="50" y1="100" x2="50" y2="300"/> 109: <line x1="590" y1="195" x2="600" y2="200"/> 110: <line x1="590" y1="205" x2="600" y2="200"/> 111: <line x1="45" y1="110" x2="50" y2="100"/> 112: <line x1="50" y1="100" x2="55" y2="110"/> 113: 114: 


115: <g> 116: <line x1="100" y1="200" x2="100" y2="205"/> 117: <line x1="150" y1="200" x2="150" y2="205"/> 118: <line x1="200" y1="200" x2="200" y2="205"/> 119: <line x1="250" y1="200" x2="250" y2="205"/> 120: <line x1="300" y1="200" x2="300" y2="205"/> 121: <line x1="350" y1="200" x2="350" y2="205"/> 122: <line x1="400" y1="200" x2="400" y2="205"/> 123: <line x1="450" y1="200" x2="450" y2="205"/> 124: <line x1="500" y1="200" x2="500" y2="205"/> 125: <line x1="550" y1="200" x2="550" y2="205"/> 126: 127: <text x="97" y="215">1</text> 128: <text x="147" y="215">2</text> 129: <text x="197" y="215">3</text> 130: <text x="247" y="215">4</text> 131: <text x="297" y="215">5</text> 132: <text x="347" y="215">6</text> 133: <text x="397" y="215">7</text> 134: <text x="447" y="215">8</text> 135: <text x="497" y="215">9</text> 136: <text x="544" y="215">10</text> 137: <text x="605" y="203">x</text> 138: </g> 139: 140:  141: <g> 142: <line x1="45" y1="150" x2="50" y2="150"/> 143: <line x1="45" y1="200" x2="50" y2="200"/> 144: <line x1="45" y1="250" x2="50" y2="250"/> 145: 146: <text x="47" y="90">y</text> 147: <text x="37" y="153">1</text> 148: <text x="37" y="203">0</text> 149: <text x="34" y="253">-1</text> 150: </g> 151: 152: <g id="aktion"> 153: <a xlink:href="" onclick="FunktionenZeichnen()"> 154: <text x="100" y="300" style="fill: #00C; font-size: 16px">Funktionen zeichnen 155: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 156: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 157: </text> 158: </a> 159: </g> 160: 161: <text id="sin" x="270" y="300" style="fill: #090; font-size: 16px; 162: visibility: hidden">sin(x)</text> 163: <text id="cos" x="330" y="300" style="fill: #F00; font-size: 16px; 164: visibility: hidden">cos(x)</text> 165: <text id="info" x="120" y="330" style="fill: #000; font-size: 12px; 166: visibility: hidden">[Hinweis: sin(x) als polyline erzeugt – cos(x) 167: punktweise mittels circle erzeugt.]</text> 168: 169: </svg>

g.svg


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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px">Element g</text> 15: 16: <g style="opacity: 0.5"> 17: 18: <rect x="50" y="60" width="100" height="50" style="fill: #F00"/> 19: <circle cx="70" cy="120" r="40" style="fill: #00C"/> 20: 21: </g> 22: 23: </svg>

g_animation.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <text x="20" y="30" style="fill: #000; font-size: 24px"> 16: Animation einer Gruppe von Objekten</text> 17: 18: <g style="fill: #FFC; stroke: #00C; stroke-width: 2px"> 19: 20: <rect x="70" y="60" width="100" height="80"/> 21: <circle cx="250" cy="100" r="30"/> 22: <polygon points="350,80,380,120,320,120"/> 23: 24: <set attributeName="stroke" attributeType="CSS" to="#F00" begin="mouseover"/> 25: <set attributeName="stroke-width" attributeType="CSS" to="5" begin="mouseover"/> 26: <set attributeName="stroke" attributeType="CSS" to="#00C" begin="mouseout"/> 27: <set attributeName="stroke-width" attributeType="CSS" to="2" begin="mouseout"/> 28: 29: </g> 30: 31: <text x="20" y="180">Der Rahmen der gruppierten Objekte 32: (Rechteck, Kreis und Dreieck)</text>


33: <text x="20" y="200">wird bei den Ereignissen mouseover bzw. mouseout 34: gemeinsam animiert.</text> 35: 36: </svg>

g_animateMotion.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <text x="20" y="30" style="fill: #000; font-size: 24px"> 16: Animation einer Gruppe von Objekten</text> 17: 18: <path d="M 100,150 L 300,80 A 100,130 0 0,1 300,230 Z" 19: style="fill: none; stroke: #CCC; stroke-width: 1px"/> 20: 21: <g> 22: <rect x="0" y="0" width="30" height="20" style="fill: #00C"/> 23: <circle cx="0" cy="0" r="10" style="fill: #F00"/> 24: <animateMotion begin="0s" dur="10s" repeatDur="indefinite" 25: path="M 100,150 L 300,80 A 100,130 0 0,1 300,230 Z"/> 26: </g> 27: 28: <text x="60" y="280">Die aus Kreis und Rechteck gebildete Objektgruppe wird</text> 29: <text x="60" y="300">gemeinsam animiert (animateMotion ist Kindelement von g).</text> 30: 31: </svg>


get_setId.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <script type="text/javascript"> 18: <![CDATA[ 19: 20: function get_setId(click_evt) 21: { 22: var obj,id,r,g,b,rgb; 23: 24: // aktuelles Objekt finden 25: obj=click_evt.target; 26: 27: // aktuelle ID auslesen 28: id=obj.getId(); 29: alert("Aktuelle ID: "+id); 30: 31: // neue ID setzen und ueber diese ID die Fuellfarbe aendern 32: obj.setId("test"+Math.round(Math.random()*100)); 33: id=obj.getId(); 34: alert("Neue ID: "+id); 35: 36: r=Math.round(Math.random()*255); 37: g=Math.round(Math.random()*255); 38: b=Math.round(Math.random()*255); 39: rgb="rgb("+r+","+g+","+b+")"; 40: obj.ownerDocument.getElementById(id).style.setProperty("fill",rgb); 41: } 42: 43: ]]> 44: </script> 45: 46: </defs> 47: 48: <text x="20" y="30" style="fill: #000; font-size: 24px"> 49: Die Methoden getId() bzw. setId()</text> 50: 51: <circle id="kreis" cx="200" cy="100" r="30" 52: style="fill: #090" onclick="get_setId(evt)"/> 53: 54: <text x="160" y="150">Kreis anklicken!</text> 55: 56: </svg>


get_setSrc.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <script type="text/javascript"> 18: <![CDATA[ 19: 20: var src,doc; 21: 22: 23: function getSource() 24: { 25: src=window.getSrc(); 26: doc=src.substring(src.lastIndexOf("/")+1,src.length); 27: alert("Aktuelles Dokument: \n"+doc); 28: } 29: 30: 31: function setSource(src) 32: { 33: window.setSrc(src); 34: } 35: 36: ]]> 37: </script> 38: 39: </defs> 40: 41: <text x="20" y="30" style="fill: #000; font-size: 24px"> 42: Die Methoden getSrc() bzw. setSrc() [1]</text> 43: 44: <a xlink:href="" onclick="getSource()"> 45: <text x="40" y="70" style="fill: #F00; font-size: 18px"> 46: Aktuelles Dokument</text> 47: </a> 48: 49: <a xlink:href="" onclick="setSource('get_setSrc_2.svg')"> 50: <text x="230" y="70" style="fill: #00C; font-size: 18px"> 51: get_setSrc_2.svg laden</text> 52: </a> 53: 54: </svg>


getbbox.svg

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:  8:  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: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc,svgroot; 22: 23: 24: function getSVGDoc(load_evt) 25: { 26: svgdoc=load_evt.target.ownerDocument; 27: svgroot=svgdoc.documentElement; 28: } 29: 30: 31: function getBB() 32: { 33: var svgbox,b,h,x,y; 34: 35: svgbox=svgroot.getBBox(); 36: b=svgbox.width; 37: h=svgbox.height; 38: x=svgbox.x; 39: y=svgbox.y; 40: 41: alert("Breite: "+b+"\nHoehe: "+h+"\nBox_x: "+x+"\nBox_y: "+y); 42: } 43: 44: ]]> 45: </script> 46: 47: </defs> 48: 49: <text x="20" y="30" style="fill: #000; font-size: 24px"> 50: DOM-Methode getBBox()</text> 51: 52: <a xlink:href="" onclick="getBB()"> 53: <text x="30" y="60" style="fill: #F00; font-size: 14px"> 54: Grafikparameter abfragen 55: </text>


56: </a> 57: 58: </svg>

getProperty.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <script type="text/javascript"> 18: <![CDATA[ 19: 20: function StyleInfos(click_evt) 21: { 22: // style-Objekt des Kreise 23: var obj=click_evt.target.ownerDocument.getElementById("kreis").style; 24: var ausgabe=""; 25: 26: ausgabe="Anzahl CSS-Eigenschaften: "+obj.length+"\n"; 27: for(i=0;i<obj.length;i++) 28: { 29: prop=obj.item(i); 30: propval=obj.getPropertyValue(prop); 31: // oder 32: // propval=obj.getPropertyCSSValue(prop).cssText; 33: ausgabe+="\n"+prop+": "+propval; 34: } 35: alert(ausgabe); 36: } 37: 38: ]]> 39: </script> 40: 41: </defs> 42:


43: <text x="20" y="30" style="fill: #000; font-size: 24px"> 44: getPropertyValue() / getPropertyCSSValue()</text> 45: 46: <circle id="kreis" r="30" cx="250" cy="100" style="fill: #F00; 47: stroke: #00C; stroke-width: 2px; opacity: 0.5" onclick="StyleInfos(evt)"/> 48: 49: <text x="210" y="160">Kreis anklicken!</text> 50: 51: </svg>

geturl.svg

1: <?xml version="1.0" encoding="UTF-8" 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:  8:  9: 10: 11: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 12: 13: <title>ASV-Funktion getURL()</title> 14: <desc>SVG-Datenbankzugriff mittels ASV-Funktion getURL() und PHP</desc> 15: 16: <defs> 17: <script type="text/javascript"> 18: <![CDATA[ 19: 20: var svgdoc; 21: svgdoc=document.documentElement; 22: 23: // Version des SVG Viewers ausgeben 24: svgdoc.getElementById("version").firstChild.nodeValue+=getSVGViewerVersion(); 25: 26: function TextHover(obj,color,decor) 27: { 28: obj.target.style.setProperty("fill",color); 29: obj.target.style.setProperty("text-decoration",decor); 30: } 31: 32: function HoleDaten(suchtext) 33: { 34: getURL("geturl.php?eingabe="+suchtext,callback); 35: } 36:


37: function callback(urlRequestStatus) 38: { 39: /* 40: Rueckgabewerte des Objektes urlRequestStatus: 41: - urlRequestStatus.success; 42: - urlRequestStatus.contentType; 43: - urlRequestStatus.content; 44: */ 45: 46: var ausgabe; 47: 48: if(urlRequestStatus.success) 49: { 50: ausgabe=urlRequestStatus.content.split("|"); 51: 52: svgdoc.getElementById("ausgabe0").childNodes.item(0).nodeValue=ausgabe[0]; 53: svgdoc.getElementById("ausgabe1").childNodes.item(0).nodeValue=ausgabe[1]; 54: svgdoc.getElementById("url").setAttribute("xlink:href",ausgabe[1]); 55: 56: if(ausgabe[2]) 57: { 58: svgdoc.getElementById("bild").setAttribute("xlink:href", "bilder/"+ausgabe[2].toLowerCase()+".jpg"); 59: } 60: else 61: { 62: svgdoc.getElementById("bild").setAttribute("xlink:href",""); 63: } 64: } 65: } 66: 67: ]]> 68: </script> 69: </defs> 70: 71: <text x="30" y="30" style="fill: #000; font-size: 24px">SVG-Datenbankzugriff mittels ASV- Funktion getURL() und PHP</text> 72: <text x="30" y="60" style="fill: #00C; font-size: 14px">Magazine vom Software & Support-Verlag:</text> 73: 74:  75: <a xlink:href="" onclick="HoleDaten('entwickler')"><text x="30" y="80" style="fill: #00C" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#00C','none')">Der Entwickler</text></a> 76: <a xlink:href="" onclick="HoleDaten('dotnet')"><text x="30" y="100" style="fill: #00C" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#00C','none')">dot.net Magazin</text></a> 77: <a xlink:href="" onclick="HoleDaten('javamag')"><text x="30" y="120" style="fill: #00C" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#00C','none')">Java Magazin</text></a> 78: <a xlink:href="" onclick="HoleDaten('linuxent')"><text x="30" y="140" style="fill: #00C" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#00C','none')">Linux Enterprise</text></a> 79: <a xlink:href="" onclick="HoleDaten('phpmag')"><text x="30" y="160" style="fill: #00C" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#00C','none')">PHP Magazin</text></a> 80: <a xlink:href="" onclick="HoleDaten('xmlmag')"><text x="30" y="180" style="fill: #00C" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#00C','none')">XML & Web Services Magazin</text></a> 81: <a xlink:href="" onclick="HoleDaten('NoName')"><text x="30" y="200" style="fill: #00C" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#00C','none')">[NoName]</text></a> 82: 83: <line x1="30" y1="220" x2="730" y2="220" style="stroke: #CCC; stroke-width: 1px"/> 84: 85:  86: <text x="30" y="250" style="fill: #090; font-size: 18px">Thema: </text> 87: <text x="30" y="280" style="fill: #090; font-size: 18px">Website: </text> 88: 89:  90: <text id="ausgabe0" x="125" y="250" style="fill: #F00; font-size: 18px"> </text> 91: <a id="url" xlink:href="" target="magsite"><text id="ausgabe1" x="125" y="280" style="fill: #F00; font-size: 18px" onmouseover="TextHover(evt,'#00C','underline')" onmouseout="TextHover(evt,'#F00','none')"> </text></a> 92: 93: <line x1="30" y1="300" x2="730" y2="300" style="stroke: #CCC; stroke-width: 1px"/> 94: 95: <text x="30" y="330" style="fill: #000; font-size: 14px">Ein PHP-Script holt die Daten


aus einer MySQL-DB und übergibt diese via JavaScript an das SVG-Dokument.</text> 96: 97:  98: <image id="bild" x="630" y="160" xlink:href="" width="99" height="140"/> 99: 100: <a xlink:href="http://www.et.fh-merseburg.de/person/meinike/"><text x="565" y="360" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#000','none')">© by Dr. Thomas Meinike 2002</text></a> 101: 102: <text id="version" x="30" y="360">SVGViewerVersion: </text> 103: 104: </svg>

grad_animation.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <linearGradient id="animlingra1" x1="0" y1="0" x2="1" y2="1" 18: spreadMethod="reflect"> 19: <stop offset="0%" style="stop-color: #000"/> 20: <stop offset="50%" style="stop-color: #00F"/> 21: <stop offset="100%" style="stop-color: #FFF"/> 22: 23: <animate attributeName="x1" attributeType="XML" begin="0s" dur="5s" 24: from="0" to="1" repeatCount="indefinite"/> 25: <animate attributeName="y1" attributeType="XML" begin="0s" dur="5s" 26: from="0" to="1" repeatCount="indefinite"/> 27: 28: <animate attributeName="x2" attributeType="XML" begin="0s" dur="5s" 29: from="1" to="0" repeatCount="indefinite"/> 30: <animate attributeName="y2" attributeType="XML" begin="0s" dur="5s" 31: from="1" to="0" repeatCount="indefinite"/> 32: </linearGradient> 33: 34: 35: <linearGradient id="animlingra2"> 36: <stop offset="0%" style="stop-color: #000">


37: <animate attributeName="stop-color" attributeType="CSS" begin="2s" dur="20s" 38: from="#000" to="#00F" repeatCount="indefinite"/> 39: </stop> 40: <stop offset="50%" style="stop-color: #00F"> 41: <animate attributeName="stop-color" attributeType="CSS" begin="2s" dur="20s" 42: from="#00F" to="#F00" repeatCount="indefinite"/> 43: </stop> 44: <stop offset="100%" style="stop-color: #FFF"/> 45: </linearGradient> 46: 47: 48: <radialGradient id="animradgra1" cx="0" cy="0" fx="1" fy="1"> 49: <stop offset="0%" style="stop-color: #FFF"/> 50: <stop offset="60%" style="stop-color: #FF9"/> 51: <stop offset="100%" style="stop-color: #F00"/> 52: 53: <animate attributeName="cx" attributeType="XML" begin="0s" dur="10s" 54: from="0" to="1" repeatCount="indefinite"/> 55: <animate attributeName="cy" attributeType="XML" begin="0s" dur="10s" 56: from="0" to="1" repeatCount="indefinite"/> 57: 58: <animate attributeName="fx" attributeType="XML" begin="0s" dur="10s" 59: from="1" to="0" repeatCount="indefinite"/> 60: <animate attributeName="fy" attributeType="XML" begin="0s" dur="10s" 61: from="1" to="0" repeatCount="indefinite"/> 62: </radialGradient> 63: 64: 65: <radialGradient id="animradgra2" cx="0.5" cy="0.5" fx="0.5" fy="0.5"> 66: <stop offset="0%" style="stop-color: #FFF"/> 67: <stop offset="60%" style="stop-color: #FF9"> 68: <animate attributeName="stop-color" attributeType="CSS" begin="2s" dur="20s" 69: from="#FF9" to="#000" repeatCount="indefinite"/> 70: <animate attributeName="offset" attributeType="XML" begin="2s" dur="20s" 71: from="60%" to="100%" repeatCount="indefinite"/> 72: </stop> 73: <stop offset="100%" style="stop-color: #F00"/> 74: </radialGradient> 75: 76: </defs> 77: 78: <text x="20" y="30" style="fill: #000; font-size: 24px"> 79: Animation von Gradienten</text> 80: 81: <rect x="20" y="60" width="400" height="40" style="fill: url(#animlingra1)"/> 82: <rect x="20" y="130" width="400" height="40" style="fill: url(#animlingra2)"/> 83: 84: <circle cx="120" cy="260" r="50" style="fill: url(#animradgra1)"/> 85: <circle cx="320" cy="260" r="50" style="fill: url(#animradgra2)"/> 86: 87: </svg>

handleClicks.svg



6: 7:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <script type="text/javascript"> 18: <![CDATA[ 19: 20: var klick=true,zeit1=0,zeit2=0,verzoegerung=300; 21: // verzoegerung = Testzeit in ms 22: 23: 24: function handleClicks() 25: { 26: zeit2=zeit1; 27: zeit1=new Date().getTime(); 28: if(klick) 29: { 30: klick=false; 31: setTimeout("checkClickDiff()",verzoegerung); 32: } 33: } 34: 35: 36: function checkClickDiff() 37: { 38: if(zeit1-zeit2<verzoegerung)alert("Doppelklick"); 39: else alert("Einfachklick"); 40: klick=true; 41: } 42: 43: ]]> 44: </script> 45: 46: </defs> 47: 48: <text x="20" y="30" style="fill: #000; font-size: 24px"> 49: Doppelklick von Einfachklick unterscheiden</text> 50: 51: <circle cx="250" cy="80" r="20" style="fill: #F00" onclick="handleClicks()"/> 52: <text x="200" y="130">[Kreis anklicken!]</text> 53: 54: </svg>

image.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc>


14: <text x="20" y="30" style="fill: #000; font-size: 24px">Element image</text> 15: 16: <image xlink:href="bilder/adobesvg.gif" x="20" y="60" width="88" height="31"/> 17: 18: </svg>

ip_in_motion.svg

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:  8:  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: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc,start=0,ende=360,drehpunkt_x,drehpunkt_y,txtobj,aniobj,krobj; 22: 23: 24: function Init(load_evt) 25: { 26: svgdoc=load_evt.target.ownerDocument; 27: 28: txtobj=svgdoc.getElementById("iptext"); 29: aniobj=svgdoc.getElementById("animat"); 30: krobj=svgdoc.getElementById("kreis"); 31: 32: getIP(); 33: } 34: 35: 36: function getIP() 37: { 38: // IP-Adresse wird mit PHP-Skript auslesen: $_SERVER["REMOTE_ADDR"] 39: // und via DOM dem bereits vorhandenen Textknoten zugewiesen 40: getURL("getip.php",setIP) 41: } 42: 43: 44: function setIP(urlRequestStatus) 45: { 46: if(urlRequestStatus.success && urlRequestStatus.content.indexOf("php")==-1) 47: txtobj.firstChild.nodeValue=urlRequestStatus.content; 48: else txtobj.firstChild.nodeValue="127.0.0.1"; 49: 50: drehpunkt_x=txtobj.getComputedTextLength()/2; 51: drehpunkt_y=drehpunkt_x;


52: 53: txtobj.setAttribute("x","0"); 54: txtobj.setAttribute("y",drehpunkt_y+5); 55: 56: aniobj.setAttribute("from",start+","+drehpunkt_x+","+drehpunkt_y); 57: aniobj.setAttribute("to",ende+","+drehpunkt_x+","+drehpunkt_y); 58: 59: krobj.setAttribute("cx",drehpunkt_x); 60: krobj.setAttribute("cy",drehpunkt_y); 61: krobj.setAttribute("r",drehpunkt_x); 62: } 63: 64: ]]> 65: </script> 66: 67: </defs> 68: 69: <text x="20" y="30" style="fill: #000; font-size: 24px">Ihre aktuelle IP ...</text> 70: 71: <g transform="translate(50,50)"> 72: 73:  77: 78: <circle id="kreis" cx="38" cy="38" r="38" style="fill: #FFE; stroke: #F00"/> 79: 80: <text id="iptext" x="0" y="43" style="fill: #00C; font-family: sans-serif; 81: font-size: 18px">127.0.0.1 82: 83: <animateTransform id="animat" attributeName="transform" attributeType="XML" 84: type="rotate" from="0,38,38" to="360,38,38" begin="0s" dur="10s" 85: repeatCount="indefinite"/> 86: 87: </text> 88: 89: </g> 90: 91: </svg>

js_extern.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="Hallo()"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16:


17: <script xlink:href="extern.js" type="text/javascript"/> 18: 19: </defs> 20: 21: <text x="20" y="30" style="fill: #000; font-size: 24px">Element script mit externer JS-Datei</text> 22: 23: <a xlink:href="../?doc=script" target="_top"> 24: <text x="30" y="80" style="fill: #000; font-size: 18px"> 25: Der Inhalt von extern.js entspricht dem im Beispiel script.svg verwendeten Code. 26: </text> 27: </a> 28: 29: </svg>

extern.js zu js_extern.svg 1: /* externe JavaScript-Datei fuer SVG */ 2: 3: function Hallo() 4: { 5: alert("Der Zugriff auf die externe\nJavaScript-Datei funktioniert."); 6: }

kerning.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <style type="text/css"> 18: <![CDATA[ 19: 20: text 21: { 22: font-size: 18px; 23: } 24: 25: text.t1 26: { 27: kerning: auto; 28: fill: #666; 29: } 30: 31: text.t2 32: {


33: kerning: 5px; 34: fill: #090; 35: } 36: 37: ]]> 38: </style> 39: 40: </defs> 41: 42: <text x="20" y="30" style="fill: #000; font-size: 24px"> 43: Eigenschaft kerning 44: </text> 45: 46: <text x="30" y="80" class="t1"> 47: Text mit kerning="auto" 48: </text> 49: 50: <text x="30" y="120" class="t2"> 51: Text mit kerning="5px" 52: </text> 53: 54: </svg>

keySplines.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <style type="text/css"> 18: <![CDATA[ 19:


20: .gelb 21: { 22: fill: #FF0; 23: } 24: 25: .rot 26: { 27: fill: #F00; 28: } 29: 30: .gruen 31: { 32: fill: #090; 33: } 34: 35: .blau 36: { 37: fill: #00C; 38: } 39: 40: line 41: { 42: stroke: #000; 43: stroke-width: 2px; 44: } 45: 46: ]]> 47: </style> 48: 49: </defs> 50: 51: <text x="20" y="30" style="fill: #000; font-size: 24px"> 52: Animationen mit Key-Splines</text> 53: 54: <circle class="gelb" cx="100" cy="350" r="20"> 55: <animate attributeName="cy" attributeType="XML" begin="0s" dur="10s" 56: calcMode="spline" values="350;80" keyTimes="0s;10s" keySplines="0.9 0.1 0.1 0.9" 57: repeatCount="5" fill="freeze"/> 58: </circle> 59: 60: <circle class="rot" cx="150" cy="350" r="20"> 61: <animate attributeName="cy" attributeType="XML" begin="0s" dur="10s" 62: calcMode="spline" values="350;80" keyTimes="0s;10s" keySplines="0.1 0.6 0.5 0.8" 63: repeatCount="5" fill="freeze"/> 64: </circle> 65: 66: <circle class="gruen" cx="200" cy="350" r="20"> 67: <animate attributeName="cy" attributeType="XML" begin="0s" dur="10s" 68: calcMode="spline" values="350;80" keyTimes="0s;10s" keySplines="0.0 1.0 1.0 0.0" 69: repeatCount="5" fill="freeze"/> 70: </circle> 71: 72: <circle class="blau" cx="250" cy="350" r="20"> 73: <animate attributeName="cy" attributeType="XML" begin="0s" dur="10s" 74: calcMode="spline" values="350;80" keyTimes="0s;10s" keySplines="0.0 0.5 0.0 1.0" 75: repeatCount="5" fill="freeze"/> 76: </circle> 77: 78: <line x1="70" y1="60" x2="280" y2="60"/> 79: <line x1="70" y1="370" x2="280" y2="370"/> 80: 81: <a xlink:href="http://www.averagejackal.net/keysplinetool.html" target="_top"> 82: <text x="20" y="410"> 83: "Key Splines graph tool" – Hilfsmittel zur Berechnung der Parameter 84: </text> 85: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 86: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 87: </a> 88: 89: </svg>


klassen_tauschen.svg

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:  8:  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: .gelb 22: { 23: fill: #FF0; 24: } 25: 26: .rot 27: { 28: fill: #F00; 29: } 30: 31: .gruen 32: { 33: fill: #090; 34: } 35: 36: .blau 37: { 38: fill: #00C; 39: } 40: 41: ]]> 42: </style> 43: 44: <script type="text/javascript"> 45: <![CDATA[ 46: 47: var svgdoc,svgroot; 48: 49: 50: function getSVGDoc(load_evt) 51: { 52: svgdoc=load_evt.target.ownerDocument; 53: svgroot=svgdoc.documentElement; 54: }


55: 56: 57: function KlassenTauschen(klasse_alt,klasse_neu) 58: { 59: var obj=getElementsByClassName(klasse_alt); 60: 61: for(i=0;i<obj.length;i++) 62: { 63: obj[i].setAttribute("class",klasse_neu); 64: } 65: } 66: 67: 68: function getElementsByClassName(class_name) 69: { 70: var inp_obj,ret_obj=new Array(),j=0; 71: 72: inp_obj=svgroot.getElementsByTagName("*"); 73: for(i=0;i<inp_obj.length;i++) 74: { 75: if(inp_obj.item(i).getAttribute("class")==class_name) 76: { 77: ret_obj[j]=inp_obj.item(i); 78: j++; 79: } 80: } 81: return ret_obj; 82: } 83: 84: ]]> 85: </script> 86: 87: </defs> 88: 89: <text x="20" y="30" style="fill: #000; font-size: 24px"> 90: CSS-Klassen tauschen</text> 91: 92: <circle class="rot" cx="80" cy="80" r="20"/> 93: <circle class="blau" cx="140" cy="80" r="20"/> 94: <circle class="rot" cx="200" cy="80" r="20"/> 95: 96: <circle class="blau" cx="80" cy="140" r="20"/> 97: <circle class="blau" cx="140" cy="140" r="20"/> 98: <circle class="blau" cx="200" cy="140" r="20"/> 99: 100: <circle class="rot" cx="80" cy="200" r="20"/> 101: <circle class="blau" cx="140" cy="200" r="20"/> 102: <circle class="rot" cx="200" cy="200" r="20"/> 103: 104: <a xlink:href="" onclick= "KlassenTauschen('rot','gruen');KlassenTauschen('blau','gelb')"> 105: <text x="70" y="260">rot –› grün + blau –› gelb</text> 106: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 107: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 108: </a> 109: 110: <a xlink:href="" onclick= "KlassenTauschen('gruen','rot');KlassenTauschen('gelb','blau')"> 111: <text x="70" y="280">grün –› rot + gelb –› blau</text> 112: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 113: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 114: </a> 115: 116: </svg>


lauftext.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: onload="Ticker()"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: 16: <defs> 17: 18: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc,element,ltxt,i,l; 22: svgdoc=document.documentElement; 23: // oder svgdoc=getDocument().documentElement; 24: element=svgdoc.getElementById("lauftext"); 25: ltxt="Das ist ein Lauftext und der läuft und läuft ... "; 26: i=0; 27: l=ltxt.length; 28: 29: function Ticker() 30: { 31: txt=ltxt.substring(i,l)+ltxt.substring(0,i-1); 32: element.childNodes.item(0).data=txt; 33: // oder element.firstChild.data=txt; 34: if (i<l)i++; 35: else i=0; 36: setTimeout("Ticker()",150); 37: } 38: 39: ]]> 40: </script> 41: 42: </defs> 43: 44: <text x="20" y="30" style="fill: #000; font-size: 24px">Lauftext mit JavaScript</text> 45: 46: <text id="lauftext" x="20" y="80" style="fill: #F00; font-size: 20px">Lauftext</text> 47: 48: </svg>


leerraum.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <style type="text/css"> 18: <![CDATA[ 19: 20: text 21: { 22: font-size: 18px; 23: } 24: 25: text.t1 26: { 27: fill: #666; 28: } 29: 30: text.t2 31: { 32: fill: #090; 33: } 34: 35: ]]> 36: </style> 37: 38: </defs> 39: 40: <text x="20" y="30" style="fill: #000; font-size: 24px"> 41: Leerraum steuern (mehrere Leerzeichen zulassen oder nicht) 42: </text> 43: 44: <text x="30" y="80" class="t1" 45: xml:space="default">Text mit xml:space="default"</text> 46: 47: <text x="30" y="120" class="t2" 48: xml:space="preserve">Text mit xml:space="preserve"</text> 49: 50: </svg>


letter-spacing.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <style type="text/css"> 18: <![CDATA[ 19: 20: text 21: { 22: font-size: 18px; 23: } 24: 25: text.t1 26: { 27: letter-spacing: 10px; 28: fill: #666; 29: } 30: 31: text.t2 32: { 33: word-spacing: 10px; 34: fill: #090; 35: } 36: 37: ]]> 38: </style> 39: 40: </defs> 41: 42: <text x="20" y="30" style="fill: #000; font-size: 24px"> 43: Eigenschaften letter-spacing und word-spacing 44: </text> 45: 46: <text x="30" y="80" class="t1"> 47: Text mit letter-spacing: 10px 48: </text> 49: 50: <text x="30" y="120" class="t2"> 51: Text mit word-spacing 10px 52: </text> 53: 54: </svg>


line.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px">Element line</text> 15: 16: <line x1="50" y1="50" x2="300" y2="50" style="stroke: #F00; stroke-width: 2px"/> 17: <line x1="70" y1="80" x2="400" y2="350" style="stroke: #00C; stroke-width: 1.5px"/> 18: 19: </svg>


linearGradient.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <defs> 13: 14:  15: <linearGradient id="lingra1"> 16: <stop offset="0%" style="stop-color: #000"/> 17: <stop offset="50%" style="stop-color: #00F"/> 18: <stop offset="100%" style="stop-color: #FFF"/> 19: </linearGradient> 20: 21:  22: <linearGradient id="lingra2" x1="0" y1="0" x2="0.6" y2="0.6"> 23: <stop offset="0%" style="stop-color: #000"/> 24: <stop offset="50%" style="stop-color: #00F"/> 25: <stop offset="100%" style="stop-color: #FFF"/> 26: </linearGradient> 27: 28:  29: <linearGradient id="lingra3" x1="0.2" y1="0.2" x2="1" y2="1"> 30: <stop offset="0%" style="stop-color: #000"/> 31: <stop offset="50%" style="stop-color: #00F"/> 32: <stop offset="100%" style="stop-color: #FFF"/> 33: </linearGradient> 34: 35:  36: <linearGradient id="lingra4" x1="-0.5" y1="-0.5" x2="1.2" y2="1.2"> 37: <stop offset="0%" style="stop-color: #000"/> 38: <stop offset="50%" style="stop-color: #00F"/> 39: <stop offset="100%" style="stop-color: #FFF"/> 40: </linearGradient> 41: 42:  43: <linearGradient id="lingra5" x1="0" y1="0" x2="0.6" y2="0.6"


44: spreadMethod="reflect"> 45: <stop offset="0%" style="stop-color: #000"/> 46: <stop offset="50%" style="stop-color: #00F"/> 47: <stop offset="100%" style="stop-color: #FFF"/> 48: </linearGradient> 49: 50:  51: <linearGradient id="lingra6" gradientTransform="rotate(90)"> 52: <stop offset="0%" style="stop-color: #000"/> 53: <stop offset="50%" style="stop-color: #00F"/> 54: <stop offset="100%" style="stop-color: #FFF"/> 55: </linearGradient> 56: 57: </defs> 58: 59: <title>SVG - Learning By Coding</title> 60: <desc>SVG-Spezifikation in Beispielen</desc> 61: <text x="20" y="30" style="fill: #000; font-size: 24px"> 62: Elemente linearGradient | stop</text> 63: 64: <rect x="20" y="60" width="400" height="40" style="fill: url(#lingra1)"/> 65: <rect x="20" y="130" width="400" height="40" style="fill: url(#lingra2)"/> 66: <rect x="20" y="200" width="400" height="40" style="fill: url(#lingra3)"/> 67: <rect x="20" y="270" width="400" height="40" style="fill: url(#lingra4)"/> 68: <rect x="20" y="340" width="400" height="40" style="fill: url(#lingra5)"/> 69: <rect x="20" y="410" width="400" height="40" style="fill: url(#lingra6)"/> 70: 71: </svg>

marker.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <defs> 13: <marker id="einmarker" markerWidth="10" markerHeight="10" 14: refX="0" refY="5" orient="auto"> 15: <polygon points="0,0,10,5,0,10" style="fill: none; stroke: #F00"/> 16: </marker> 17: </defs> 18: 19: <title>SVG - Learning By Coding</title> 20: <desc>SVG-Spezifikation in Beispielen</desc> 21: <text x="20" y="30" style="fill: #000; font-size: 24px">Element marker</text> 22: 23: <line x1="30" y1="55" x2="150" y2="55" style="fill: none; stroke: #00C; 24: marker-end: url(#einmarker)"/> 25: <line x1="30" y1="75" x2="150" y2="75" style="fill: none; stroke: #00C; 26: marker-end: url(#einmarker)"/> 27: <line x1="30" y1="95" x2="150" y2="95" style="fill: none; stroke: #00C; 28: marker-end: url(#einmarker)"/> 29: 30: </svg>


mask.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <defs> 13: <linearGradient id="lingra"> 14: <stop offset="0%" stop-color="#FFF" stop-opacity="0"/> 15: <stop offset="100%" stop-color="#FFF" stop-opacity="1"/> 16: </linearGradient> 17: 18: <mask id="einemaske" maskUnits="userSpaceOnUse"> 19: <rect x="30" y="60" width="300" height="100" fill="url(#lingra)"/> 20: </mask> 21: </defs> 22: 23: <title>SVG - Learning By Coding</title> 24: <desc>SVG-Spezifikation in Beispielen</desc> 25: <text x="20" y="30" style="fill: #000; font-size: 24px">Element mask</text> 26: 27: <rect x="30" y="60" width="300" height="100" fill="#FFC" /> 28: 29: <text id="masktext" x="60" y="120" style="fill: #00C; mask: url(#einemaske); 30: font-size: 36px"> 31: Maskierter Text 32: </text> 33: 34: </svg>


massenspektrum.svg

1: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?> 2: <?xml-stylesheet href="mspecsvg.css" type="text/css"?> 3: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 4: "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [ 5: <!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink"> 6: ]> 7: 8:  9:  10: 11: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onzoom="ZoomControl()"> 12:  13: 14:  15: 16:  17: <title>Massenspektrum in SVG</title> 18: <desc>Darstellung der Spektrallinien auf der Basis von XML-Daten</desc> 19:  20: <defs> 21: <script xlink:href="mspecsvg.js" type="text/javascript"/> 22: </defs> 23:  24: <g transform="scale(0.83) translate(0,15)"> 25:  26: <polyline points="100,50 100,550 850,550"/> 27:  28: <line x1="100" y1="550" x2="100" y2="560"/> 29: <line x1="150" y1="550" x2="150" y2="560"/> 30: <line x1="200" y1="550" x2="200" y2="560"/> 31: <line x1="250" y1="550" x2="250" y2="560"/> 32: <line x1="300" y1="550" x2="300" y2="560"/> 33: <line x1="350" y1="550" x2="350" y2="560"/> 34: <line x1="400" y1="550" x2="400" y2="560"/> 35: <line x1="450" y1="550" x2="450" y2="560"/> 36: <line x1="500" y1="550" x2="500" y2="560"/> 37: <line x1="550" y1="550" x2="550" y2="560"/>


38: <line x1="600" y1="550" x2="600" y2="560"/> 39: <line x1="650" y1="550" x2="650" y2="560"/> 40: <line x1="700" y1="550" x2="700" y2="560"/> 41: <line x1="750" y1="550" x2="750" y2="560"/> 42: <line x1="800" y1="550" x2="800" y2="560"/> 43: <line x1="850" y1="550" x2="850" y2="560"/> 44:  45: <text x="420" y="600" class="achsen">Massenzahl [m/z]</text> 46: <text x="97" y="575">0</text> 47: <text x="143" y="575">10</text> 48: <text x="193" y="575">20</text> 49: <text x="243" y="575">30</text> 50: <text x="293" y="575">40</text> 51: <text x="343" y="575">50</text> 52: <text x="393" y="575">60</text> 53: <text x="443" y="575">70</text> 54: <text x="493" y="575">80</text> 55: <text x="543" y="575">90</text> 56: <text x="590" y="575">100</text> 57: <text x="640" y="575">110</text> 58: <text x="690" y="575">120</text> 59: <text x="740" y="575">130</text> 60: <text x="790" y="575">140</text> 61: <text x="840" y="575">150</text> 62:  63: <line x1="90" y1="550" x2="100" y2="550"/> 64: <line x1="90" y1="500" x2="100" y2="500"/> 65: <line x1="90" y1="450" x2="100" y2="450"/> 66: <line x1="90" y1="400" x2="100" y2="400"/> 67: <line x1="90" y1="350" x2="100" y2="350"/> 68: <line x1="90" y1="300" x2="100" y2="300"/> 69: <line x1="90" y1="250" x2="100" y2="250"/> 70: <line x1="90" y1="200" x2="100" y2="200"/> 71: <line x1="90" y1="150" x2="100" y2="150"/> 72: <line x1="90" y1="100" x2="100" y2="100"/> 73: <line x1="90" y1="50" x2="100" y2="50"/> 74:  75: <text x="70" y="300" class="achsen" transform="translate(-250, 410) rotate(-90)">Intensität [%]</text> 76: <text x="77" y="555">0</text> 77: <text x="70" y="505">10</text> 78: <text x="70" y="455">20</text> 79: <text x="70" y="405">30</text> 80: <text x="70" y="355">40</text> 81: <text x="70" y="305">50</text> 82: <text x="70" y="255">60</text> 83: <text x="70" y="205">70</text> 84: <text x="70" y="155">80</text> 85: <text x="70" y="105">90</text> 86: <text x="64" y="55">100</text> 87:  88: <text x="100" y="30" class="titel"> 89: Massenspektrum von PHENOL, 3-CHLORO- (C6H5CLO)</text> 90:  91: <g onmouseout="HideTooltip()"> 92: <line y1="550" x1="190" x2="190" y2="548" class="normal" onmouseover="ShowTooltip(evt,'m/z=18, I=0.4%')"/> 93: <line y1="550" x1="230" x2="230" y2="546" class="normal" onmouseover="ShowTooltip(evt,'m/z=26, I=0.8%')"/> 94: <line y1="550" x1="235" x2="235" y2="544" class="normal" onmouseover="ShowTooltip(evt,'m/z=27, I=1.2%')"/> 95: <line y1="550" x1="240" x2="240" y2="524" class="normal" onmouseover="ShowTooltip(evt,'m/z=28, I=5.2%')"/> 96: <line y1="550" x1="245" x2="245" y2="544" class="normal" onmouseover="ShowTooltip(evt,'m/z=29, I=1.2%')"/> 97: <line y1="550" x1="255" x2="255" y2="542" class="normal" onmouseover="ShowTooltip(evt,'m/z=31, I=1.6%')"/> 98: <line y1="550" x1="260" x2="260" y2="548" class="normal" onmouseover="ShowTooltip(evt,'m/z=32, I=0.4%')"/> 99: <line y1="550" x1="275" x2="275" y2="548" class="normal" onmouseover="ShowTooltip(evt,'m/z=35, I=0.4%')"/> 100: <line y1="550" x1="280" x2="280" y2="540" class="normal" onmouseover="ShowTooltip(evt,'m/z=36, I=2%')"/> 101: <line y1="550" x1="285" x2="285" y2="528" class="normal" onmouseover="ShowTooltip(evt,'m/z=37, I=4.4%')"/> 102: <line y1="550" x1="290" x2="290" y2="502" class="normal" onmouseover="ShowTooltip(evt,'m/z=38, I=9.6%')"/> 103: <line y1="550" x1="295" x2="295" y2="450" class="normal"


onmouseover="ShowTooltip(evt,'m/z=39, I=20%')"/> 104: <line y1="550" x1="300" x2="300" y2="546" class="normal" onmouseover="ShowTooltip(evt,'m/z=40, I=0.8%')"/> 105: <line y1="550" x1="310" x2="310" y2="548" class="normal" onmouseover="ShowTooltip(evt,'m/z=42, I=0.4%')"/> 106: <line y1="550" x1="315" x2="315" y2="548" class="normal" onmouseover="ShowTooltip(evt,'m/z=43, I=0.4%')"/> 107: <line y1="550" x1="320" x2="320" y2="548" class="normal" onmouseover="ShowTooltip(evt,'m/z=44, I=0.4%')"/> 108: <line y1="550" x1="330" x2="330" y2="540" class="normal" onmouseover="ShowTooltip(evt,'m/z=46, I=2%')"/> 109: <line y1="550" x1="345" x2="345" y2="542" class="normal" onmouseover="ShowTooltip(evt,'m/z=49, I=1.6%')"/> 110: <line y1="550" x1="350" x2="350" y2="534" class="normal" onmouseover="ShowTooltip(evt,'m/z=50, I=3.2%')"/> 111: <line y1="550" x1="355" x2="355" y2="542" class="normal" onmouseover="ShowTooltip(evt,'m/z=51, I=1.6%')"/> 112: <line y1="550" x1="365" x2="365" y2="534" class="normal" onmouseover="ShowTooltip(evt,'m/z=53, I=3.2%')"/> 113: <line y1="550" x1="375" x2="375" y2="546" class="normal" onmouseover="ShowTooltip(evt,'m/z=55, I=0.8%')"/> 114: <line y1="550" x1="400" x2="400" y2="546" class="normal" onmouseover="ShowTooltip(evt,'m/z=60, I=0.8%')"/> 115: <line y1="550" x1="405" x2="405" y2="532" class="normal" onmouseover="ShowTooltip(evt,'m/z=61, I=3.6%')"/> 116: <line y1="550" x1="410" x2="410" y2="522" class="normal" onmouseover="ShowTooltip(evt,'m/z=62, I=5.6%')"/> 117: <line y1="550" x1="415" x2="415" y2="474" class="normal" onmouseover="ShowTooltip(evt,'m/z=63, I=15.2%')"/> 118: <line y1="550" x1="420" x2="420" y2="454" class="normal" onmouseover="ShowTooltip(evt,'m/z=64, I=19.2%')"/> 119: <line y1="550" x1="425" x2="425" y2="378" class="normal" onmouseover="ShowTooltip(evt,'m/z=65, I=34.4%')"/> 120: <line y1="550" x1="430" x2="430" y2="534" class="normal" onmouseover="ShowTooltip(evt,'m/z=66, I=3.2%')"/> 121: <line y1="550" x1="435" x2="435" y2="548" class="normal" onmouseover="ShowTooltip(evt,'m/z=67, I=0.4%')"/> 122: <line y1="550" x1="460" x2="460" y2="546" class="normal" onmouseover="ShowTooltip(evt,'m/z=72, I=0.8%')"/> 123: <line y1="550" x1="465" x2="465" y2="518" class="normal" onmouseover="ShowTooltip(evt,'m/z=73, I=6.4%')"/> 124: <line y1="550" x1="470" x2="470" y2="536" class="normal" onmouseover="ShowTooltip(evt,'m/z=74, I=2.8%')"/> 125: <line y1="550" x1="475" x2="475" y2="532" class="normal" onmouseover="ShowTooltip(evt,'m/z=75, I=3.6%')"/> 126: <line y1="550" x1="535" x2="535" y2="540" class="normal" onmouseover="ShowTooltip(evt,'m/z=87, I=2%')"/> 127: <line y1="550" x1="545" x2="545" y2="546" class="normal" onmouseover="ShowTooltip(evt,'m/z=89, I=0.8%')"/> 128: <line y1="550" x1="555" x2="555" y2="522" class="normal" onmouseover="ShowTooltip(evt,'m/z=91, I=5.6%')"/> 129: <line y1="550" x1="560" x2="560" y2="526" class="normal" onmouseover="ShowTooltip(evt,'m/z=92, I=4.8%')"/> 130: <line y1="550" x1="565" x2="565" y2="548" class="normal" onmouseover="ShowTooltip(evt,'m/z=93, I=0.4%')"/> 131: <line y1="550" x1="570" x2="570" y2="508" class="normal" onmouseover="ShowTooltip(evt,'m/z=94, I=8.4%')"/> 132: <line y1="550" x1="595" x2="595" y2="458" class="normal" onmouseover="ShowTooltip(evt,'m/z=99, I=18.4%')"/> 133: <line y1="550" x1="600" x2="600" y2="536" class="normal" onmouseover="ShowTooltip(evt,'m/z=100, I=2.8%')"/> 134: <line y1="550" x1="610" x2="610" y2="522" class="normal" onmouseover="ShowTooltip(evt,'m/z=102, I=5.6%')"/> 135: <line y1="550" x1="735" x2="735" y2="548" class="normal" onmouseover="ShowTooltip(evt,'m/z=127, I=0.4%')"/> 136: <line y1="550" x1="740" x2="740" y2="50" class="rot" onmouseover="ShowTooltip(evt,'m/z=128, I=100%')"/> 137: <line y1="550" x1="745" x2="745" y2="516" class="normal" onmouseover="ShowTooltip(evt,'m/z=129, I=6.8%')"/> 138: <line y1="550" x1="750" x2="750" y2="386" class="normal" onmouseover="ShowTooltip(evt,'m/z=130, I=32.8%')"/> 139: <line y1="550" x1="755" x2="755" y2="540" class="normal" onmouseover="ShowTooltip(evt,'m/z=131, I=2%')"/> 140: <a xlink:href="http://ktd.et.fh-merseburg.de/~tm/mspec/" target="_top"> 141: <text id="textlink" x="100" y="600" class="achsen" style="font-size: 10px; fill: #00C" onmouseover="TextHover('textlink','#FF0000','underline')" onmouseout="TextHover('textlink','#0000CC','none')"> 142: MSpec::SVG


143: </text> 144: </a> 145: <text x="162" y="600" class="achsen" style="font-size: 10px; fill: #00C"> | 17.02.2003 – 08:23:06</text> 146: </g> 147: </g> 148:  149: <g id="tooltip"> 150: <rect id="ttr" x="0" y="0" rx="5" ry="5" width="100" height="18" style="visibility: hidden"/> 151: <text id="ttt" x="0" y="0" style="visibility: hidden">dyn. Text</text> 152: </g> 153:  154: </svg>

matrix.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px"> 15: Transformationen mit matrix(a,b,c,d,e,f) 16: </text> 17: 18: <rect transform="matrix(1,0,0,1,270,100)" x="50" y="80" width="150" height="75" 19: style="fill: #FFC; stroke: #F00; stroke-width: 1.5px"/> 20:  21: 22: <rect transform="matrix(0,1,-1,0,370,230)" x="50" y="80" width="150" height="75" 23: style="fill: #FFC; stroke: #F00; stroke-width: 1.5px"/> 24:  25: 26: <rect transform="matrix(0.75,0,0,0.5,0,0)" x="50" y="80" width="150" height="75"


27: style="fill: #FFC; stroke: #F00; stroke-width: 1.5px"/> 28:  29: 30: <rect transform="matrix(1,0,0.5773502692,1,0,0)" x="50" y="100" width="150" height="75" 31: style="fill: #FFC; stroke: #F00; stroke-width: 1.5px"/> 32:  33: 34: <rect transform="matrix(1,1,0,1,0,0)" x="50" y="80" width="150" height="75" 35: style="fill: #FFC; stroke: #F00; stroke-width: 1.5px"/> 36:  37: 38: <text x="200" y="55">Die Geometrie der Objekte entspricht dem Beispiel</text> 39: <a xlink:href="../?doc=transform" target="_top"> 40: <text x="475" y="55" style="fill: #00C"> 41: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 42: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 43: transform.svg<tspan style="fill: #00C">.</tspan> 44: </text> 45: </a> 46: <a xlink:href="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined" target="_top"> 47: <text x="200" y="75" style="fill: #00C">[<tspan>Details in der SVG-Spezifikation 48: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 49: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/></tspan> 50: </text> 51: </a> 52: <a xlink:href="http://www.datenverdrahten.de/svglbc/matrixcalc.htm" target="_top"> 53: <text x="390" y="75" style="fill: #F00"> 54: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseover"/> 55: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseout"/> 56: Berechnungen mit MatrixCalc<tspan style="fill: #00C">]</tspan> 57: </text> 58: </a> 59: 60: </svg>

matrix_onthefly1.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <script type="text/javascript"> 18: <![CDATA[ 19:


20: function newMatrix(click_evt) 21: { 22: var svgdoc,svgroot,objekt,newmat1,newmat2,produkt,a,b,c,d,e,f,matrix; 23: 24: svgdoc=click_evt.target.ownerDocument; 25: svgroot=svgdoc.documentElement; 26: 27: // translate(100,50) 28: newmat1=svgroot.createSVGMatrix(); 29: newmat1.a=1; 30: newmat1.b=0; 31: newmat1.c=0; 32: newmat1.d=1; 33: newmat1.e=100; 34: newmat1.f=50; 35: 36: // scale(2,2) 37: newmat2=svgroot.createSVGMatrix(); 38: newmat2.a=2; 39: newmat2.b=0; 40: newmat2.c=0; 41: newmat2.d=2; 42: newmat2.e=0; 43: newmat2.f=0; 44: 45: // Matrix-Multiplikation von newmat1 und newmat2 46: produkt=newmat1.multiply(newmat2); 47: 48: // matrix()-Schreibweise erzeugen 49: a=produkt.a; 50: b=produkt.b 51: c=produkt.c 52: d=produkt.d 53: e=produkt.e 54: f=produkt.f; 55: matrix="matrix("+a+","+b+","+c+","+d+","+e+","+f+")"; 56: alert("Produktmatrix: "+matrix); 57: 58: // Transformation auf das Rechteck anwenden 59: objekt=svgroot.getElementById("rechteck"); 60: objekt.setAttribute("transform",matrix); 61: } 62: 63: ]]> 64: </script> 65: 66: </defs> 67: 68: <text x="20" y="30" style="fill: #000; font-size: 24px"> 69: Transformationen über die DOM-Methode createSVGMatrix() 70: </text> 71: 72: <rect id="rechteck" x="50" y="100" width="150" height="75" 73: style="fill: #FFC; stroke: #F00; stroke-width: 1.5px" onclick="newMatrix(evt)"/> 74: 75: <text x="30" y="65">Es werden zwei Matrizen erzeugt [translate(100,50) und scale(2,2)], 76: mit multiply() multipliziert und auf das Rechteck angewendet.</text> 77: <text x="210" y="140">Rechteck anklicken!</text> 78: 79: </svg>


matrix_onthefly2.svg

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:  8:  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: text 22: { 23: fill: #F00; 24: font-size: 12px; 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: 43: 44: function newMatrix(x) 45: { 46: var objekt,basismatrix,ergebnismatrix,a,b,c,d,e,f,matrix; 47: 48: basismatrix=svgroot.createSVGMatrix(); 49: 50: if(x==1)ergebnismatrix=basismatrix.translate(270,100); 51: if(x==2)


52: { 53: // entspricht rotate(90,70,300) 54: ergebnismatrix=basismatrix.translate(70,300); 55: ergebnismatrix=ergebnismatrix.rotate(90); 56: ergebnismatrix=ergebnismatrix.translate(-70,-300); 57: } 58: if(x==3) 59: { 60: // entspricht scale(0.5) und translate(400,0) 61: ergebnismatrix=basismatrix.scale(0.5); 62: ergebnismatrix=ergebnismatrix.translate(400,0); 63: } 64: if(x==4)ergebnismatrix=basismatrix.scaleNonUniform(0.75,0.5); 65: if(x==5)ergebnismatrix=basismatrix.skewX(30); 66: if(x==6)ergebnismatrix=basismatrix.skewY(45); 67: 68: // weitere Matrix-Methoden: 69: // rotateFromVector(), flipX(), flipY(), multiply(), inverse() 70: 71: // matrix()-Schreibweise erzeugen 72: a=ergebnismatrix.a; 73: b=ergebnismatrix.b; 74: c=ergebnismatrix.c; 75: d=ergebnismatrix.d; 76: e=ergebnismatrix.e; 77: f=ergebnismatrix.f; 78: matrix="matrix("+a+","+b+","+c+","+d+","+e+","+f+")"; 79: alert("Ergebnis-Matrix: "+matrix); 80: 81: // Transformation auf das Rechteck anwenden 82: objekt=svgroot.getElementById("rechteck"+x); 83: objekt.setAttribute("transform",matrix); 84: } 85: 86: ]]> 87: </script> 88: 89: </defs> 90: 91: <text x="20" y="30" style="fill: #000; font-size: 24px"> 92: Anwendung weiterer Matrix-Methoden 93: </text> 94: 95: <rect id="rechteck1" x="50" y="100" width="150" height="75" 96: style="fill: #FFC; stroke: #F00; stroke-width: 1.5px"/> 97: 98: <rect id="rechteck2" x="50" y="100" width="150" height="75" 99: style="fill: #FFC; stroke: #F00; stroke-width: 1.5px"/> 100: 101: <rect id="rechteck3" x="50" y="100" width="150" height="75" 102: style="fill: #FFC; stroke: #F00; stroke-width: 1.5px"/> 103: 104: <rect id="rechteck4" x="50" y="100" width="150" height="75" 105: style="fill: #FFC; stroke: #F00; stroke-width: 1.5px"/> 106: 107: <rect id="rechteck5" x="50" y="100" width="150" height="75" 108: style="fill: #FFC; stroke: #F00; stroke-width: 1.5px"/> 109: 110: <rect id="rechteck6" x="50" y="100" width="150" height="75" 111: style="fill: #FFC; stroke: #F00; stroke-width: 1.5px"/> 112: 113: <text x="320" y="65" style="fill: #000"> 114: Es werden Transformationen mit Matrix-Methoden ausgeführt.</text> 115: <a href="" onclick="newMatrix(1)"><text x="320" y="90"> 116: basismatrix.translate(270,100)</text></a> 117: <a href="" onclick="newMatrix(2)"><text x="320" y="110"> 118: basismatrix.rotate(90,70,300)</text></a> 119: <a href="" onclick="newMatrix(3)"><text x="320" y="130"> 120: basismatrix.scale(0.5) + translate(400,0)</text></a> 121: <a href="" onclick="newMatrix(4)"><text x="320" y="150"> 122: basismatrix.scaleNonUniform(0.75,0.5)</text></a> 123: <a href="" onclick="newMatrix(5)"><text x="320" y="170"> 124: basismatrix.skewX(30)</text></a> 125: <a href="" onclick="newMatrix(6)"><text x="320" y="190"> 126: basismatrix.skewY(45)</text></a> 127: 128: </svg>


memoryspiel1.svg

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:  8:  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:  19: 20: <symbol id="zu"> 21: <rect x="0" y="0" width="50" height="50" style="fill: #FFF; stroke: #000"/> 22: <line x1="0" y1="0" x2="50" y2="50" style="stroke: #999"/> 23: <line x1="50" y1="0" x2="0" y2="50" style="stroke: #999"/> 24: </symbol> 25: 26: <symbol id="s1"> 27: <rect x="0" y="0" width="50" height="50" style="fill: #F00; stroke: #000"/> 28: </symbol> 29: 30: <symbol id="s2"> 31: <rect x="0" y="0" width="50" height="50" style="fill: #090; stroke: #000"/> 32: </symbol> 33: 34: <symbol id="s3"> 35: <rect x="0" y="0" width="50" height="50" style="fill: #FF0; stroke: #000"/> 36: </symbol> 37: 38: <symbol id="s4"> 39: <rect x="0" y="0" width="50" height="50" style="fill: #00F; stroke: #000"/> 40: </symbol> 41: 42: <symbol id="s5"> 43: <rect x="0" y="0" width="50" height="50" style="fill: #0FF; stroke: #000"/> 44: </symbol> 45: 46: <symbol id="s6"> 47: <rect x="0" y="0" width="50" height="50" style="fill: #F0F; stroke: #000"/> 48: </symbol> 49: 50: <symbol id="s7"> 51: <rect x="0" y="0" width="50" height="50" style="fill: #CCC; stroke: #000"/>


52: </symbol> 53: 54: <symbol id="s8"> 55: <rect x="0" y="0" width="50" height="50" style="fill: #FC6; stroke: #000"/> 56: </symbol> 57: 58:  59: 60: 61: <script type="text/javascript"> 62: <![CDATA[ 63: 64: var svgdoc,zahlen,click1=false,click2=false,clnr1=0,clnr2=0,clicks=0,versuche=0; 65: var temp,paare=0,feld1,feld2,ns="http://www.w3.org/1999/xlink",attr="xlink:href"; 66: var spielfeld,use_elements; 67: 68: 69: function getSVGDoc(load_evt) 70: { 71: svgdoc=load_evt.target.ownerDocument; 72: spielfeld=svgdoc.getElementById("spielfeld"); 73: use_elements=spielfeld.getElementsByTagName("use"); 74: NeuesSpiel(); 75: } 76: 77: 78: function InitRandom() 79: { 80: var neuezahl,k=0; 81: zahlen=new Array(use_elements.length); 82: 83: for(i=0;i<use_elements.length;i++) 84: { 85: neuezahl=Zufallszahl(1,use_elements.length/2); 86: for(j=0;j<zahlen.length;j++) 87: { 88: if(zahlen[j]==neuezahl)k++; 89: } 90: if(k<2)zahlen[i]=neuezahl; 91: else 92: { 93: k=0; 94: i--; 95: } 96: } 97: } 98: 99: 100: function Zufallszahl(von,bis) 101: { 102: var z; 103: 104: z=Math.round(von+(bis-von)*Math.random()); 105: return z; 106: } 107: 108: 109: function Check(click_evt) 110: { 111: var obj,feldid,feldnr; 112: obj=click_evt.currentTarget; 113: 114: feldid=obj.getAttribute("id"); 115: feldnr=feldid.substring(1); 116: 117: if(obj.getAttribute(attr)=="#zu" && paare<use_elements.length/2) 118: { 119: clicks++; 120: versuche++; 121: } 122: 123: if(clicks==1) 124: { 125: click1=true; 126: feld1=feldnr; 127: obj.setAttributeNS(ns,attr,"#s"+zahlen[feld1-1]); 128: clnr1=zahlen[feld1-1]; 129: }


130: 131: else if(clicks==2 && click1) 132: { 133: click2=true; 134: feld2=feldnr; 135: obj.setAttributeNS(ns,attr,"#s"+zahlen[feld2-1]); 136: clnr2=zahlen[feld2-1]; 137: } 138: 139: if(click1 && click2) 140: { 141: if(clnr1==clnr2)paare++; 142: else 143: { 144: LauscherAus(); 145: setTimeout("Nochmal()",1000); 146: } 147: clicks=0; 148: click1=false; 149: click2=false; 150: } 151: 152: if(versuche%2==0) 153: { 154: svgdoc.getElementById("v").firstChild.nodeValue=versuche/2; 155: svgdoc.getElementById("p").firstChild.nodeValue=paare; 156: } 157: } 158: 159: 160: function Nochmal() 161: { 162: svgdoc.getElementById("f"+feld1).setAttributeNS(ns,attr,"#zu"); 163: svgdoc.getElementById("f"+feld2).setAttributeNS(ns,attr,"#zu"); 164: LauscherAn(); 165: } 166: 167: 168: function NeuesSpiel() 169: { 170: AllesVerstecken(); 171: InitRandom(); 172: paare=0; 173: versuche=0; 174: svgdoc.getElementById("v").firstChild.nodeValue=versuche; 175: svgdoc.getElementById("p").firstChild.nodeValue=paare; 176: LauscherAn(); 177: } 178: 179: 180: function HilfeAn() 181: { 182: temp=new Array(use_elements.length); 183: 184: for(i=0;i<use_elements.length;i++) 185: { 186: if(use_elements.item(i).getAttribute(attr)=="#zu") 187: { 188: temp[i]=true; 189: use_elements.item(i).setAttributeNS(ns,attr,"#s"+zahlen[i]); 190: } 191: else temp[i]=false; 192: } 193: setTimeout("HilfeAus()",3000) 194: } 195: 196: 197: function HilfeAus() 198: { 199: for(i=0;i<use_elements.length;i++) 200: if(temp[i])use_elements.item(i).setAttributeNS(ns,attr,"#zu"); 201: } 202: 203: 204: function AllesVerstecken() 205: { 206: for(i=0;i<use_elements.length;i++) 207: use_elements.item(i).setAttributeNS(ns,attr,"#zu");


208: } 209: 210: 211: function LauscherAn() 212: { 213: for(i=0;i<use_elements.length;i++) 214: use_elements.item(i).addEventListener("click",Check,false); 215: } 216: 217: 218: function LauscherAus() 219: { 220: for(i=0;i<use_elements.length;i++) 221: use_elements.item(i).removeEventListener("click",Check,false); 222: } 223: 224: ]]> 225: </script> 226: 227: </defs> 228: 229: <text x="20" y="30" style="fill: #000; font-size: 24px"> 230: Memoryspiel [16 Felder]</text> 231: 232: <text x="20" y="50" style="fill: #000; font-size: 12px"> 233: Gesucht sind 8 gleichfarbige Paare.</text> 234: 235: <g id="spielfeld"> 236:  237: <use id="f1" xlink:href="#zu" x="20" y="70"/> 238: <use id="f2" xlink:href="#zu" x="70" y="70"/> 239: <use id="f3" xlink:href="#zu" x="120" y="70"/> 240: <use id="f4" xlink:href="#zu" x="170" y="70"/> 241:  242: <use id="f5" xlink:href="#zu" x="20" y="120"/> 243: <use id="f6" xlink:href="#zu" x="70" y="120"/> 244: <use id="f7" xlink:href="#zu" x="120" y="120"/> 245: <use id="f8" xlink:href="#zu" x="170" y="120"/> 246:  247: <use id="f9" xlink:href="#zu" x="20" y="170"/> 248: <use id="f10" xlink:href="#zu" x="70" y="170"/> 249: <use id="f11" xlink:href="#zu" x="120" y="170"/> 250: <use id="f12" xlink:href="#zu" x="170" y="170"/> 251:  252: <use id="f13" xlink:href="#zu" x="20" y="220"/> 253: <use id="f14" xlink:href="#zu" x="70" y="220"/> 254: <use id="f15" xlink:href="#zu" x="120" y="220"/> 255: <use id="f16" xlink:href="#zu" x="170" y="220"/> 256: </g> 257: 258: <g id="infoblock"> 259: <text x="20" y="300"> 260: Gefundene Paare: <tspan id="p" style="fill: #F00">0</tspan> 261: </text> 262: 263: <text x="150" y="300"> 264: Versuche: <tspan id="v" style="fill: #00C">0</tspan> 265: </text> 266: 267: <a xlink:href="" onclick="NeuesSpiel()"> 268: <text x="60" y="320">Neues Spiel</text> 269: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 270: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 271: </a> 272: 273: <a xlink:href="" onclick="HilfeAn()"> 274: <text x="150" y="320">Hilfe</text> 275: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 276: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 277: </a> 278: </g> 279: 280: </svg>


memoryspiel2.svg

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:  8:  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:  19: 20: <symbol id="zu"> 21: <rect x="0" y="0" width="50" height="50" style="fill: #FFF; stroke: #000"/> 22: <line x1="0" y1="0" x2="50" y2="50" style="stroke: #999"/> 23: <line x1="50" y1="0" x2="0" y2="50" style="stroke: #999"/> 24: </symbol> 25: 26: <symbol id="s1"> 27: <rect x="0" y="0" width="50" height="50" style="fill: #F00; stroke: #000"/> 28: </symbol> 29: 30: <symbol id="s2"> 31: <rect x="0" y="0" width="50" height="50" style="fill: #090; stroke: #000"/> 32: </symbol> 33: 34: <symbol id="s3"> 35: <rect x="0" y="0" width="50" height="50" style="fill: #FF0; stroke: #000"/> 36: </symbol> 37: 38: <symbol id="s4"> 39: <rect x="0" y="0" width="50" height="50" style="fill: #00F; stroke: #000"/> 40: </symbol> 41: 42: <symbol id="s5"> 43: <rect x="0" y="0" width="50" height="50" style="fill: #0FF; stroke: #000"/> 44: </symbol> 45:


46: <symbol id="s6"> 47: <rect x="0" y="0" width="50" height="50" style="fill: #F0F; stroke: #000"/> 48: </symbol> 49: 50: <symbol id="s7"> 51: <rect x="0" y="0" width="50" height="50" style="fill: #AAA; stroke: #000"/> 52: </symbol> 53: 54: <symbol id="s8"> 55: <rect x="0" y="0" width="50" height="50" style="fill: #FC6; stroke: #000"/> 56: </symbol> 57: 58: <symbol id="s9"> 59: <rect x="0" y="0" width="50" height="50" style="fill: #FCC; stroke: #000"/> 60: </symbol> 61: 62: <symbol id="s10"> 63: <rect x="0" y="0" width="50" height="50" style="fill: #C03; stroke: #000"/> 64: </symbol> 65: 66: <symbol id="s11"> 67: <rect x="0" y="0" width="50" height="50" style="fill: #CF6; stroke: #000"/> 68: </symbol> 69: 70: <symbol id="s12"> 71: <rect x="0" y="0" width="50" height="50" style="fill: #EEE; stroke: #000"/> 72: </symbol> 73: 74: <symbol id="s13"> 75: <rect x="0" y="0" width="50" height="50" style="fill: #069; stroke: #000"/> 76: </symbol> 77: 78: <symbol id="s14"> 79: <rect x="0" y="0" width="50" height="50" style="fill: #0CC; stroke: #000"/> 80: </symbol> 81: 82: <symbol id="s15"> 83: <rect x="0" y="0" width="50" height="50" style="fill: #FFC; stroke: #000"/> 84: </symbol> 85: 86: <symbol id="s16"> 87: <rect x="0" y="0" width="50" height="50" style="fill: #C69; stroke: #000"/> 88: </symbol> 89: 90: <symbol id="s17"> 91: <rect x="0" y="0" width="50" height="50" style="fill: #FFF; stroke: #000"/> 92: </symbol> 93: 94: <symbol id="s18"> 95: <rect x="0" y="0" width="50" height="50" style="fill: #000; stroke: #000"/> 96: </symbol> 97: 98:  99: 100: 101: <script type="text/javascript"> 102: <![CDATA[ 103: 104: var svgdoc,zahlen,click1=false,click2=false,clnr1=0,clnr2=0,clicks=0,versuche=0; 105: var temp,paare=0,feld1,feld2,ns="http://www.w3.org/1999/xlink",attr="xlink:href"; 106: var spielfeld,use_elements; 107: 108: 109: function getSVGDoc(load_evt) 110: { 111: svgdoc=load_evt.target.ownerDocument; 112: spielfeld=svgdoc.getElementById("spielfeld"); 113: use_elements=spielfeld.getElementsByTagName("use"); 114: NeuesSpiel(); 115: } 116: 117: 118: function InitRandom() 119: { 120: var neuezahl,k=0; 121: zahlen=new Array(use_elements.length); 122: 123: for(i=0;i<use_elements.length;i++)


124: { 125: neuezahl=Zufallszahl(1,use_elements.length/2); 126: for(j=0;j<zahlen.length;j++) 127: { 128: if(zahlen[j]==neuezahl)k++; 129: } 130: if(k<2)zahlen[i]=neuezahl; 131: else 132: { 133: k=0; 134: i--; 135: } 136: } 137: } 138: 139: 140: function Zufallszahl(von,bis) 141: { 142: var z; 143: 144: z=Math.round(von+(bis-von)*Math.random()); 145: return z; 146: } 147: 148: 149: function Check(click_evt) 150: { 151: var obj,feldid,feldnr; 152: obj=click_evt.currentTarget; 153: 154: feldid=obj.getAttribute("id"); 155: feldnr=feldid.substring(1); 156: 157: if(obj.getAttribute(attr)=="#zu" && paare<use_elements.length/2) 158: { 159: clicks++; 160: versuche++; 161: } 162: 163: if(clicks==1) 164: { 165: click1=true; 166: feld1=feldnr; 167: obj.setAttributeNS(ns,attr,"#s"+zahlen[feld1-1]); 168: clnr1=zahlen[feld1-1]; 169: } 170: 171: else if(clicks==2 && click1) 172: { 173: click2=true; 174: feld2=feldnr; 175: obj.setAttributeNS(ns,attr,"#s"+zahlen[feld2-1]); 176: clnr2=zahlen[feld2-1]; 177: } 178: 179: if(click1 && click2) 180: { 181: if(clnr1==clnr2)paare++; 182: else 183: { 184: LauscherAus(); 185: setTimeout("Nochmal()",1000); 186: } 187: clicks=0; 188: click1=false; 189: click2=false; 190: } 191: 192: if(versuche%2==0) 193: { 194: svgdoc.getElementById("v").firstChild.nodeValue=versuche/2; 195: svgdoc.getElementById("p").firstChild.nodeValue=paare; 196: } 197: } 198: 199: 200: function Nochmal() 201: {


202: svgdoc.getElementById("f"+feld1).setAttributeNS(ns,attr,"#zu"); 203: svgdoc.getElementById("f"+feld2).setAttributeNS(ns,attr,"#zu"); 204: LauscherAn(); 205: } 206: 207: 208: function NeuesSpiel() 209: { 210: AllesVerstecken(); 211: InitRandom(); 212: paare=0; 213: versuche=0; 214: svgdoc.getElementById("v").firstChild.nodeValue=versuche; 215: svgdoc.getElementById("p").firstChild.nodeValue=paare; 216: LauscherAn(); 217: } 218: 219: 220: function HilfeAn() 221: { 222: temp=new Array(use_elements.length); 223: 224: for(i=0;i<use_elements.length;i++) 225: { 226: if(use_elements.item(i).getAttribute(attr)=="#zu") 227: { 228: temp[i]=true; 229: use_elements.item(i).setAttributeNS(ns,attr,"#s"+zahlen[i]); 230: } 231: else temp[i]=false; 232: } 233: setTimeout("HilfeAus()",3000) 234: } 235: 236: 237: function HilfeAus() 238: { 239: for(i=0;i<use_elements.length;i++) 240: if(temp[i])use_elements.item(i).setAttributeNS(ns,attr,"#zu"); 241: } 242: 243: 244: function AllesVerstecken() 245: { 246: for(i=0;i<use_elements.length;i++) 247: use_elements.item(i).setAttributeNS(ns,attr,"#zu"); 248: } 249: 250: 251: function LauscherAn() 252: { 253: for(i=0;i<use_elements.length;i++) 254: use_elements.item(i).addEventListener("click",Check,false); 255: } 256: 257: 258: function LauscherAus() 259: { 260: for(i=0;i<use_elements.length;i++) 261: use_elements.item(i).removeEventListener("click",Check,false); 262: } 263: 264: ]]> 265: </script> 266: 267: </defs> 268: 269: <text x="20" y="30" style="fill: #000; font-size: 24px"> 270: Memoryspiel [36 Felder]</text> 271: 272: <text x="20" y="50" style="fill: #000; font-size: 12px"> 273: Gesucht sind 18 gleichfarbige Paare.</text> 274: 275: <g id="spielfeld"> 276:  277: <use id="f1" xlink:href="#zu" x="20" y="70"/> 278: <use id="f2" xlink:href="#zu" x="70" y="70"/> 279: <use id="f3" xlink:href="#zu" x="120" y="70"/>


280: <use id="f4" xlink:href="#zu" x="170" y="70"/> 281: <use id="f5" xlink:href="#zu" x="220" y="70"/> 282: <use id="f6" xlink:href="#zu" x="270" y="70"/> 283:  284: <use id="f7" xlink:href="#zu" x="20" y="120"/> 285: <use id="f8" xlink:href="#zu" x="70" y="120"/> 286: <use id="f9" xlink:href="#zu" x="120" y="120"/> 287: <use id="f10" xlink:href="#zu" x="170" y="120"/> 288: <use id="f11" xlink:href="#zu" x="220" y="120"/> 289: <use id="f12" xlink:href="#zu" x="270" y="120"/> 290:  291: <use id="f13" xlink:href="#zu" x="20" y="170"/> 292: <use id="f14" xlink:href="#zu" x="70" y="170"/> 293: <use id="f15" xlink:href="#zu" x="120" y="170"/> 294: <use id="f16" xlink:href="#zu" x="170" y="170"/> 295: <use id="f17" xlink:href="#zu" x="220" y="170"/> 296: <use id="f18" xlink:href="#zu" x="270" y="170"/> 297:  298: <use id="f19" xlink:href="#zu" x="20" y="220"/> 299: <use id="f20" xlink:href="#zu" x="70" y="220"/> 300: <use id="f21" xlink:href="#zu" x="120" y="220"/> 301: <use id="f22" xlink:href="#zu" x="170" y="220"/> 302: <use id="f23" xlink:href="#zu" x="220" y="220"/> 303: <use id="f24" xlink:href="#zu" x="270" y="220"/> 304:  305: <use id="f25" xlink:href="#zu" x="20" y="270"/> 306: <use id="f26" xlink:href="#zu" x="70" y="270"/> 307: <use id="f27" xlink:href="#zu" x="120" y="270"/> 308: <use id="f28" xlink:href="#zu" x="170" y="270"/> 309: <use id="f29" xlink:href="#zu" x="220" y="270"/> 310: <use id="f30" xlink:href="#zu" x="270" y="270"/> 311:  312: <use id="f31" xlink:href="#zu" x="20" y="320"/> 313: <use id="f32" xlink:href="#zu" x="70" y="320"/> 314: <use id="f33" xlink:href="#zu" x="120" y="320"/> 315: <use id="f34" xlink:href="#zu" x="170" y="320"/> 316: <use id="f35" xlink:href="#zu" x="220" y="320"/> 317: <use id="f36" xlink:href="#zu" x="270" y="320"/> 318: </g> 319: 320: <g id="infoblock"> 321: <text x="70" y="400"> 322: Gefundene Paare: <tspan id="p" style="fill: #F00">0</tspan> 323: </text> 324: 325: <text x="200" y="400"> 326: Versuche: <tspan id="v" style="fill: #00C">0</tspan> 327: </text> 328: 329: <a xlink:href="" onclick="NeuesSpiel()"> 330: <text x="110" y="420">Neues Spiel</text> 331: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 332: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 333: </a> 334: 335: <a xlink:href="" onclick="HilfeAn()"> 336: <text x="200" y="420">Hilfe</text> 337: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 338: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 339: </a> 340: </g> 341: 342: </svg>


metadata.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px">Element metadata</text> 15: 16: <metadata> 17: <rdf:RDF 18: xmlns:rdf = "http://www.w3.org/1999/02/22-rdf-syntax-ns#" 19: xmlns:rdfs = "http://www.w3.org/2000/01/rdf-schema#" 20: xmlns:dc = "http://purl.org/dc/elements/1.1/" > 21: <rdf:Description about="http://www.datenverdrahten.de/svglbc/" 22: dc:title="SVG - Learning By Coding" 23: dc:description="SVG-Spezifikation in Beispielen" 24: dc:publisher="Dr. Thomas Meinike" 25: dc:date="2003-02-28" 26: dc:format="image/svg+xml" 27: dc:language="de"> 28: <dc:creator> 29: <rdf:Bag> 30: <rdf:li>Dr. Thomas Meinike</rdf:li> 31: </rdf:Bag> 32: </dc:creator> 33: </rdf:Description> 34: </rdf:RDF> 35: </metadata> 36: 37: <text x="30" y="80"> 38: Dieses Dokument enthält Metadaten zur Beschreibung (siehe Code). 39: </text> 40: 41: </svg>

mouse-button.svg



4: <!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink"> 5: ]> 6: 7:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <script type="text/javascript"> 18: <![CDATA[ 19: 20: 21: function HideContextMenue(mousedown_evt) 22: { 23: mousedown_evt.preventDefault(); 24: } 25: 26: 27: function Button(click_evt) 28: { 29: var btn,info; 30: 31: btn=click_evt.getButton(); 32: if(btn==0)info="links"; 33: else if(btn==1)info="mitte (Scrollrad)"; 34: else if(btn==2)info="rechts"; 35: 36: alert("Der Klick kam von: "+info+" ("+btn+")."); 37: } 38: 39: ]]> 40: </script> 41: 42: </defs> 43: 44: <text x="20" y="30" style="fill: #000; font-size: 24px"> 45: Maustaste abfragen</text> 46: 47: <circle cx="120" cy="100" r="30" style="fill: #CFC; stroke: #000" 48: onmousedown="HideContextMenue(evt)" onclick="Button(evt)"/> 49: 50: <text x="75" y="160">Kreis anklicken!</text> 51: 52: </svg>

namespace.svg



4: <!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink"> 5: ]> 6: 7:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: xmlns:svglbc="http://www.datenverdrahten.de/svglbc"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: 16: <defs> 17: 18:  19: <svglbc:info> 20: <svglbc:author id="nstest" name="Dr. Thomas Meinike" email="[email protected]"/> 21: </svglbc:info> 22: 23: <script type="text/javascript"> 24: <![CDATA[ 25: 26: function getNSInfo(click_evt) 27: { 28: var svgdoc,info1,info2; 29: 30: svgdoc=click_evt.target.ownerDocument; 31: info1=svgdoc.getElementById("nstest").getAttribute("name"); 32: info2=svgdoc.getElementById("nstest").getAttribute("email"); 33: alert("Author:\n"+info1+"\n"+info2); 34: } 35: 36: ]]> 37: </script> 38: 39: </defs> 40: 41: <text x="20" y="30" style="fill: #000; font-size: 24px"> 42: Eigenen Namespace verwenden</text> 43: 44: <a xlink:href="" onclick="getNSInfo(evt)"> 45: <text x="30" y="60" style="fill: #F00; font-size: 14px"> 46: Informationen aus svglbc:info abfragen 47: </text> 48: </a> 49: 50: </svg>


object_details.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: onload="InitArr();SVGObjectDetails(0,evt)"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: 16: <defs> 17: 18: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var ausgabe=new Array(6),roezahl=new Array(5),anzahl,clipdata,oldnr=0; // global 22: 23: 24: function SVGObjectDetails(nr,evt) 25: { 26: var testobj,testinf,pm,pmarr,objtype,tsanzahl,ts,i,j; // lokal 27: 28: pmarr=new Array(); // pmarr sammelt properties bzw. methods von testobj 29: 30: // zu testendes Objekt zuweisen 31: switch(nr) 32: { 33: case 0: 34: testobj=evt; 35: testinf="evt"; 36: break; 37: case 1: 38: testobj=window; 39: testinf="window"; 40: break; 41: case 2: 42: testobj=window.top; // im CSV nicht verfuegbar 43: testinf="window.top"; 44: break; 45: case 3: 46: testobj=document; // oder svgDocument im ASV


47: testinf="document"; 48: break; 49: case 4: 50: testobj=document.rootElement; 51: testinf="document.rootElement"; 52: break; 53: case 5: 54: testobj=navigator; // im CSV nicht verfuegbar 55: testinf="navigator"; 56: break; 57: case 6: 58: testobj=document.rootElement.style; // im CSV undefined 59: testinf="document.rootElement.style"; 60: break; 61: case 7: 62: testobj=document.rootElement.attributes; 63: testinf="document.rootElement.attributes"; 64: break; 65: case 8: 66: testobj=document.rootElement.childNodes; 67: testinf="document.rootElement.childNodes"; 68: break; 69: case 9: 70: testobj=document.rootElement.currentTranslate; 71: testinf="document.rootElement.currentTranslate"; 72: break; 73: case 10: 74: testobj=document.rootElement.getBBox; 75: testinf="document.rootElement.getBBox"; 76: break; 77: case 11: 78: testobj=document.rootElement.getCTM; 79: testinf="document.rootElement.getCTM"; 80: break; 81: case 12: 82: testobj=document.rootElement.getScreenCTM; // im ASV3 und CSV undefined 83: testinf="document.rootElement.getScreenCTM"; 84: break; 85: case 13: 86: testobj=document.getElementById("testrect"); 87: testinf="rect element"; 88: break; 89: case 14: 90: testobj=document.getElementById("testcircle"); 91: testinf="circle element"; 92: break; 93: case 15: 94: testobj=document.getElementById("testline"); 95: testinf="line element"; 96: break; 97: case 16: 98: testobj=document.getElementById("testpath"); 99: testinf="path element"; 100: break; 101: case 17: 102: testobj=document.getElementById("testtext"); 103: testinf="text element"; 104: break; 105: case 18: 106: testobj=document.getElementById("testtext").firstChild; 107: testinf="text node"; 108: break; 109: case 19: 110: testobj=document.getElementById("testlink"); 111: testinf="a element"; 112: break; 113: case 20: 114: testobj=document.getElementById("testanimation"); 115: testinf="animation element"; 116: break; 117: default: 118: alert("Aufruf der Funktion:\nSVGObjectDetails(nr[,evt])"); 119: return; 120: break; 121: } 122: 123: // aktuelle Testnummer rot, vorherige blau markieren 124: document.getElementById("opt"+oldnr).setAttribute("fill","#00C");


125: document.getElementById("opt"+nr).setAttribute("fill","#F00"); 126: oldnr=nr; 127: 128: // vorherige Textausgabe loeschen 129: for(i=1;i<=5;i++) 130: { 131: if(ausgabe[i].hasChildNodes()) 132: { 133: tsanzahl=ausgabe[i].childNodes.length; 134: for(j=0;j<tsanzahl;j++)ausgabe[i].removeChild(ausgabe[i].lastChild); 135: } 136: } 137: 138: // roemische Zahlen verstecken und blau faerben 139: for(i=1;i<=5;i++) 140: { 141: ausgabe[i].setAttribute("visibility","hidden"); 142: roezahl[i].setAttribute("visibility","hidden"); 143: roezahl[i].setAttribute("fill","#00C"); 144: } 145: 146: // Objektdetails ermitteln 147: for(pm in testobj) 148: { 149: // selbst definierte Bezeichner ausschließen 150: if(pm.indexOf("SVGObjectDetails")==-1 && 151: pm.indexOf("Copy2Clipboard")==-1 && 152: pm.indexOf("InitArr")==-1 && 153: pm.toLowerCase().indexOf("ausgabe")==-1 && 154: pm.indexOf("zahl")==-1 && pm!="oldnr" && 155: pm!="i" && pm!="j" && pm!="clipdata") 156: { 157: objtype=typeof(testobj[pm]); 158: pm+=(objtype!="unknown" && objtype!="undefined") 159: ? " ("+objtype+" "+testobj[pm]+")" : "()"; 160: pmarr.push(pm); 161: } 162: } 163: 164: anzahl=pmarr.length; 165: 166: if(anzahl>0)pmarr=pmarr.sort(); 167: 168: // fuer IE: Ergebnisdaten fuer die Zwischenablage vorbereiten 169: if(window.top && window.top.clipboardData && anzahl>0) 170: clipdata=testinf+" "+testobj+" {"+anzahl+"}\r\n\r\n"+pmarr.join("\r\n"); 171: 172: // Daten direkt ausgeben 173: ausgabe[0].firstChild.nodeValue=testinf+" "+testobj+" {"+anzahl+"}"; 174: 175: if(anzahl>0) 176: { 177: for(i=0;i<anzahl;i++) 178: { 179: ts=document.createElement("tspan"); 180: ts.setAttribute("x","20"); 181: ts.setAttribute("dy","1.1em"); 182: ts.appendChild(document.createTextNode(pmarr[i])); 183: 184: if(i<20)ausgabe[1].appendChild(ts); 185: if(i>=20 && i<40)ausgabe[2].appendChild(ts); 186: if(i>=40 && i<60)ausgabe[3].appendChild(ts); 187: if(i>=60 && i<80)ausgabe[4].appendChild(ts); 188: if(i>=80)ausgabe[5].appendChild(ts); 189: } 190: } 191: 192: if(i<20)ausgabe[1].setAttribute("visibility","visible"); 193: if(i>20) 194: { 195: roezahl[1].setAttribute("visibility","visible"); 196: roezahl[1].setAttribute("fill","#F00"); 197: roezahl[2].setAttribute("visibility","visible"); 198: } 199: if(i>40)roezahl[3].setAttribute("visibility","visible"); 200: if(i>60)roezahl[4].setAttribute("visibility","visible"); 201: if(i>80)roezahl[5].setAttribute("visibility","visible"); 202:


203: Ausgabe(1); 204: } 205: 206: 207: function InitArr() 208: { 209: // Textbloecke zur Ausgabe der Teilergebnisse (0=Ueberschrift) 210: ausgabe[0]=document.getElementById("ausgabe0"); 211: ausgabe[1]=document.getElementById("ausgabe1"); 212: ausgabe[2]=document.getElementById("ausgabe2"); 213: ausgabe[3]=document.getElementById("ausgabe3"); 214: ausgabe[4]=document.getElementById("ausgabe4"); 215: ausgabe[5]=document.getElementById("ausgabe5"); 216: 217: // roemische Zahlen I bis V zur Steuerung der Teilergebnisse 218: roezahl[1]=document.getElementById("roezahl1"); 219: roezahl[2]=document.getElementById("roezahl2"); 220: roezahl[3]=document.getElementById("roezahl3"); 221: roezahl[4]=document.getElementById("roezahl4"); 222: roezahl[5]=document.getElementById("roezahl5"); 223: } 224: 225: 226: function Ausgabe(nr) 227: { 228: for(i=1;i<=5;i++) 229: { 230: if(nr==i) 231: { 232: ausgabe[i].setAttribute("visibility","visible"); 233: roezahl[i].setAttribute("fill","#F00"); 234: } 235: else 236: { 237: ausgabe[i].setAttribute("visibility","hidden"); 238: roezahl[i].setAttribute("fill","#00C"); 239: } 240: } 241: } 242: 243: 244: function Copy2Clipboard() 245: { 246: // fuer IE: Ergebnisdaten in die Zwischenablage schreiben 247: if(window.top && window.top.clipboardData && anzahl>0) 248: { 249: window.top.clipboardData.setData("Text",clipdata); 250: alert("Ergebnisdaten wurden in die\nZwischenablage geschrieben."); 251: } 252: else alert("Kein Clipboard-Objekt vorhanden\noder kein Testergebnis erhalten."); 253: } 254: 255: ]]> 256: </script> 257: 258: </defs> 259: 260: <text x="20" y="30" style="fill: #000; font-size: 24px"> 261: Analyse von SVG-Objekten [ASV/CSV]</text> 262: 263:  267: <g display="none"> 268: <rect id="testrect" x="100" y="100" width="150" height="75"/> 269: <circle id="testcircle" cx="200" cy="100" r="20"/> 270: <line id="testline" x1="20" y1="20" x2="20" y2="200"/> 271: <text id="testtext" x="20" y="20">Text</text> 272: <path id="testpath" d="M 50,50 L 50 100"/> 273: <a id="testlink" xlink:href="http://svglbc.datenverdrahten.de"> 274: <text id="test3" x="20" y="20">Text</text> 275: </a> 276: <ellipse cx="200" cy="100" rx="30" ry="10"> 277: <animate id="testanimation" begin="0s" 278: attributeName="cx" from="200" to="300" dur="3s"/> 279: </ellipse> 280: </g>


281: 282:  283: <a xlink:href=""> 284: <text x="5" y="60" fill="#00C" cursor="pointer"> 285: <tspan dx="1em" y="60" font-size="16px" onclick="SVGObjectDetails()"> 286: SVGObjectDetails:</tspan> 287: <tspan id="opt0" dx="0.5em" onclick="SVGObjectDetails(0,evt)">0</tspan> 288: <tspan id="opt1" dx="0.5em" onclick="SVGObjectDetails(1)">1</tspan> 289: <tspan id="opt2" dx="0.5em" onclick="SVGObjectDetails(2)">2</tspan> 290: <tspan id="opt3" dx="0.5em" onclick="SVGObjectDetails(3)">3</tspan> 291: <tspan id="opt4" dx="0.5em" onclick="SVGObjectDetails(4)">4</tspan> 292: <tspan id="opt5" dx="0.5em" onclick="SVGObjectDetails(5)">5</tspan> 293: <tspan id="opt6" dx="0.5em" onclick="SVGObjectDetails(6)">6</tspan> 294: <tspan id="opt7" dx="0.5em" onclick="SVGObjectDetails(7)">7</tspan> 295: <tspan id="opt8" dx="0.5em" onclick="SVGObjectDetails(8)">8</tspan> 296: <tspan id="opt9" dx="0.5em" onclick="SVGObjectDetails(9)">9</tspan> 297: <tspan id="opt10" dx="0.5em" onclick="SVGObjectDetails(10)">10</tspan> 298: <tspan id="opt11" dx="0.5em" onclick="SVGObjectDetails(11)">11</tspan> 299: <tspan id="opt12" dx="0.5em" onclick="SVGObjectDetails(12)">12</tspan> 300: <tspan id="opt13" dx="0.5em" onclick="SVGObjectDetails(13)">13</tspan> 301: <tspan id="opt14" dx="0.5em" onclick="SVGObjectDetails(14)">14</tspan> 302: <tspan id="opt15" dx="0.5em" onclick="SVGObjectDetails(15)">15</tspan> 303: <tspan id="opt16" dx="0.5em" onclick="SVGObjectDetails(16)">16</tspan> 304: <tspan id="opt17" dx="0.5em" onclick="SVGObjectDetails(17)">17</tspan> 305: <tspan id="opt18" dx="0.5em" onclick="SVGObjectDetails(18)">18</tspan> 306: <tspan id="opt19" dx="0.5em" onclick="SVGObjectDetails(19)">19</tspan> 307: <tspan id="opt20" dx="0.5em" onclick="SVGObjectDetails(20)">20</tspan> 308: </text> 309: </a> 310: 311:  312: <a xlink:href=""> 313: <text x="20" y="390" fill="#00C" cursor="pointer"> 314: <tspan fill="#090" onclick="Copy2Clipboard()">Copy (IE)</tspan> 315: <tspan id="roezahl1" dx="0.5em" visibility="hidden" onclick="Ausgabe(1)">I</tspan> 316: <tspan id="roezahl2" dx="0.5em" visibility="hidden" onclick="Ausgabe(2)">II</tspan> 317: <tspan id="roezahl3" dx="0.5em" visibility="hidden" onclick="Ausgabe(3)">III</tspan> 318: <tspan id="roezahl4" dx="0.5em" visibility="hidden" onclick="Ausgabe(4)">IV</tspan> 319: <tspan id="roezahl5" dx="0.5em" visibility="hidden" onclick="Ausgabe(5)">V</tspan> 320: </text> 321: </a> 322: 323:  324: <text id="ausgabe0" x="20" y="90" visibility="visible" fill="#F00"> </text> 325: <text id="ausgabe1" x="20" y="100" visibility="visible"></text> 326: <text id="ausgabe2" x="20" y="100" visibility="hidden"></text> 327: <text id="ausgabe3" x="20" y="100" visibility="hidden"></text> 328: <text id="ausgabe4" x="20" y="100" visibility="hidden"></text> 329: <text id="ausgabe5" x="20" y="100" visibility="hidden"></text> 330: 331:  335: 336: </svg>


objekte_top.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: onload="getDocRoot(evt)"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: 16: <defs> 17: 18: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc,svgroot; 22: 23: 24: function getDocRoot(load_evt) 25: { 26: svgdoc=load_evt.target.ownerDocument; 27: svgroot=svgdoc.documentElement; 28: } 29: 30: 31: // Variante 1 32: 33: function setTop1(click_evt) 34: { 35: var objekt; 36: 37: objekt=click_evt.target; 38: 39: svgroot.removeChild(objekt); 40: svgroot.appendChild(objekt); 41: } 42: 43: 44: // Variante 2 45: 46: function setTop2(click_evt) 47: { 48: var objekt,tempobj; 49:


50: objekt=click_evt.target; 51: tempobj=parseXML(printNode(objekt),svgdoc); 52: 53: svgroot.removeChild(objekt); 54: svgroot.appendChild(tempobj); 55: } 56: 57: ]]> 58: </script> 59: 60: </defs> 61: 62: <text x="20" y="30" style="fill: #000; font-size: 24px"> 63: Objekte in den Vordergrund bringen</text> 64: 65:  66: 67: <rect x="50" y="125" width="200" height="150" 68: style="fill: #090; stroke: #000" onclick="setTop1(evt)"/> 69: 70: <rect x="150" y="150" width="200" height="150" 71: style="fill: #00C; stroke: #000" onclick="setTop1(evt)"/> 72: 73:  74: 75: <rect x="190" y="110" width="200" height="150" 76: style="fill: #FF0; stroke: #000" onclick="setTop2(evt)"/> 77: 78: <rect x="100" y="70" width="200" height="150" 79: style="fill: #F00; stroke: #000" onclick="setTop2(evt)"/> 80: 81: <text x="150" y="350">Rechtecke anklicken!</text> 82: 83: </svg>

opacity.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px">CSS-Eigenschaft opacity</text> 15: 16: <circle cx="100" cy="120" r="50" style="fill: #00C; fill-opacity: 0.5"/> 17: <circle cx="125" cy="155" r="50" style="fill: #00C; stroke: #00C; 18: fill-opacity: 0.2; stroke-opacity: 0.3"/> 19: 20: </svg>


opacity-rollovers.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <style type="text/css"> 18: <![CDATA[ 19: 20: image 21: { 22: opacity: 0.5; 23: } 24: 25: ]]> 26: </style> 27: 28: </defs> 29: 30: <text x="20" y="30" style="fill: #000; font-size: 24px">Opacity-Rollovers</text> 31: 32: <image xlink:href="bilder/adobesvg.gif" x="20" y="60" width="88" height="31"> 33: <set attributeName="opacity" attributeType="CSS" to="1.0" begin="mouseover"/> 34: <set attributeName="opacity" attributeType="CSS" to="0.5" begin="mouseout"/> 35: </image> 36: 37: <image xlink:href="bilder/valid-xhtml10.png" x="120" y="60" width="88" height="31"> 38: <set attributeName="opacity" attributeType="CSS" to="1.0" begin="mouseover"/> 39: <set attributeName="opacity" attributeType="CSS" to="0.5" begin="mouseout"/> 40: </image> 41: 42: <text x="20" y="120" style="fill: #000; font-size: 12px">onmouseover –› 43: opacity: 1.0, onmouseout –› opacity: 0.5 [set]</text> 44: 45: <image xlink:href="bilder/adobesvg.gif" x="20" y="140" width="88" height="31"> 46: <animate attributeName="opacity" attributeType="CSS" from="0.5" to="1.0" 47: begin="mouseover" dur="1s" fill="freeze"/> 48: <animate attributeName="opacity" attributeType="CSS" from="1.0" to="0.5" 49: begin="mouseout" dur="1s" fill="freeze"/> 50: </image> 51: 52: <image xlink:href="bilder/valid-xhtml10.png" x="120" y="140" width="88" height="31"> 53: <animate attributeName="opacity" attributeType="CSS" from="0.5" to="1.0" 54: begin="mouseover" dur="1s" fill="freeze"/> 55: <animate attributeName="opacity" attributeType="CSS" from="1.0" to="0.5" 56: begin="mouseout" dur="1s" fill="freeze"/> 57: </image> 58: 59: <text x="20" y="200" style="fill: #000; font-size: 12px">onmouseover –› 60: opacity: 1.0, onmouseout –› opacity: 0.5 [animate]</text>


61: 62: </svg>

parsexml.svg

1: <?xml version="1.0" encoding="UTF-8" 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:  8:  9: 10: 11: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 12: 13: <title>ASV-Funktion parseXML()</title> 14: <desc>XML-Inhalte mittels ASV-Funktion parseXML() in SVG einbinden</desc> 15: 16: <defs> 17: <script type="text/javascript"> 18: <![CDATA[ 19: 20: var svgdoc,context,xmldoc,ver; 21: svgdoc=document.documentElement; 22: ver=getSVGViewerVersion(); 23: 24: 25: // Version des SVG Viewers ausgeben 26: svgdoc.getElementById("version").firstChild.nodeValue+=getSVGViewerVersion(); 27: 28: function TextHover(obj,color,decor) 29: { 30: obj.target.style.setProperty("fill",color); 31: obj.target.style.setProperty("text-decoration",decor); 32: } 33: 34: function LadeXML(evt) 35: { 36: if(ver.indexOf("Adobe")!=-1) 37: { 38: context=evt.target.ownerDocument; 39: getURL("objekte.xml",callback); 40: } 41: } 42: 43: function callback(urlRequestStatus) 44: {


45: /* 46: Rueckgabewerte des Objektes urlRequestStatus: 47: - urlRequestStatus.success; 48: - urlRequestStatus.contentType; 49: - urlRequestStatus.content; 50: */ 51: 52: if(urlRequestStatus.success) 53: { 54: if(ver.indexOf("Adobe")!=-1) 55: { 56: if(ver.indexOf("6.0")!=-1)xmldoc=parseXML(urlRequestStatus.content); 57: else xmldoc=parseXML(urlRequestStatus.content,context); 58: // eingelesene XML-Daten ausgeben: 59: // alert("XMLprintNode(xmldoc)); 60: } 61: 62: // Kreis-Informationen aus XML-Struktur lesen 63: kreis_cx=xmldoc.childNodes.item(0).childNodes.item(1).getAttribute("mittelpunkt_x"); 64: kreis_cy=xmldoc.childNodes.item(0).childNodes.item(1).getAttribute("mittelpunkt_y"); 65: kreis_r=xmldoc.childNodes.item(0).childNodes.item(1).getAttribute("radius"); 66: kreis_fill=xmldoc.childNodes.item(0).childNodes.item(1).getAttribute("farbe"); 67: 68: // Kreis im SVG-Dokument erzeugen 69: neuer_knoten=context.createElement("circle"); 70: neuer_knoten.setAttribute("cx",kreis_cx); 71: neuer_knoten.setAttribute("cy",kreis_cy); 72: neuer_knoten.setAttribute("r",kreis_r); 73: neuer_knoten.setAttribute("fill",kreis_fill); 74: svgdoc.appendChild(neuer_knoten); 75: 76: 77: // Rechteck-Informationen aus XML-Struktur lesen 78: rechteck_x=xmldoc.childNodes.item(0).childNodes.item(3).getAttribute("oben_links_x"); 79: rechteck_y=xmldoc.childNodes.item(0).childNodes.item(3).getAttribute("oben_links_y"); 80: rechteck_width=xmldoc.childNodes.item(0).childNodes.item(3).getAttribute("breite"); 81: rechteck_height=xmldoc.childNodes.item(0).childNodes.item(3).getAttribute("hoehe"); 82: rechteck_fill=xmldoc.childNodes.item(0).childNodes.item(3).getAttribute("farbe"); 83: 84: // Rechteck im SVG-Dokument erzeugen 85: neuer_knoten=context.createElement("rect"); 86: neuer_knoten.setAttribute("x",rechteck_x); 87: neuer_knoten.setAttribute("y",rechteck_y); 88: neuer_knoten.setAttribute("width",rechteck_width); 89: neuer_knoten.setAttribute("height",rechteck_height); 90: neuer_knoten.setAttribute("fill",rechteck_fill); 91: svgdoc.appendChild(neuer_knoten); 92: 93: 94: // Infotext aus XML-Struktur lesen und im SVG-Dokument anzeigen 95: infotext=xmldoc.childNodes.item(0).childNodes.item(5).firstChild.nodeValue; 96: svgdoc.getElementById("info").firstChild.nodeValue=infotext; 97: 98: 99: // generierter SVG-Code fuer Kreis und Rechteck mit printNode() ausgeben 100: kreis_svg=printNode(svgdoc.getElementsByTagName("circle").item(0)); 101: rechteck_svg=printNode(svgdoc.getElementsByTagName("rect").item(0)); 102: alert("Ausgabe der generierten Objekte mit printNode()\n\nKreis: "+kreis_svg+"\nRechteck: "+rechteck_svg); 103: } 104: } 105: 106: ]]> 107: </script> 108: </defs> 109: 110: <text x="30" y="30" style="fill: #000; font-size: 24px">XML-Inhalte mittels ASV-Funktion parseXML() in SVG einbinden</text> 111: 112:  113: <a xlink:href="" onclick="LadeXML(evt)"><text x="30" y="80" style="fill: #00C" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#00C','none')">XML-Daten laden und darstellen</text></a> 114: 115: <line x1="30" y1="300" x2="730" y2="300" style="stroke: #CCC; stroke-width: 1px"/> 116: 117: <text id="info" x="30" y="330" style="fill: #000; font-size: 14px"> </text> 118:


119: <a xlink:href="http://www.et.fh-merseburg.de/person/meinike/"><text x="565" y="350" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#000','none')">© by Dr. Thomas Meinike 2002</text></a> 120: 121: <text id="version" x="30" y="350">SVGViewerVersion: </text> 122: 123: 124: </svg>

objekte.xml zu parsexml.svg 1: <?xml version="1.0" encoding="ISO-8859-1"?> 2: 3: <objekte> 4: <kreis mittelpunkt_x="300" mittelpunkt_y="150" radius="30" farbe="#F93"/> 5: <rechteck oben_links_x="200" oben_links_y="200" breite="200" hoehe="80" farbe="#69F"/> 6: <info>Dieser Text sowie die Beschreibungen von Kreis und Rechteck stammen aus einem externen XML-Dokument.</info> 7: </objekte>

path.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px">Element path</text> 15: 16: <path d="M 40,130 L 100,160 L 60,120 Z" style="fill: #EEE; stroke: #00F; 17: stroke-width: 2px"/> 18: <path d="M 190,120 c +0,+0,+30,+30,-60,+30 z" style="fill: #FFC; stroke: #00F; 19: stroke-width: 2px"/> 20: <path d="M 230,130 q -0,+30,+30,+0 q +30,-30,+30,0 q -0,+30,+30,+0 q +30,-20,+30,+0" 21: style="fill: none; stroke: #00F; stroke-width: 2px"/> 22: 23: </svg>


pathinfo.svg

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:  8:  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: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc; 22: 23: 24: function getSVGDoc(load_evt) 25: { 26: svgdoc=load_evt.target.ownerDocument; 27: } 28: 29: 30: function PathInfo() 31: { 32: var pfadobj,punktobj,punkt_x,punkt_y,punktaufpfad; 33: 34: // Pfadinformationen ermitteln 35: pfadobj=svgdoc.getElementById("testpfad"); 36: alert("Pfadlaenge in Pixel:\n"+pfadobj.getTotalLength()); 37: punktobj=pfadobj.getPointAtLength(333); 38: punkt_x=punktobj.x; 39: punkt_y=punktobj.y; 40: 41: // gruenen Punkt auf den Pfad setzen 42: punktaufpfad=svgdoc.getElementById("pkt"); 43: punktaufpfad.setAttribute("cx",punkt_x); 44: punktaufpfad.setAttribute("cy",punkt_y); 45: punktaufpfad.style.setProperty("visibility","visible"); 46: 47: // Informationen ausgegeben 48: alert("Punktkoordinaten bei Pfadlaenge 333 Pixel:\ 49: nx="+punkt_x+"ny="+punkt_y); 50: } 51: 52: ]]>


53: </script> 54: 55: </defs> 56: 57: <text x="20" y="30" style="fill: #000; font-size: 24px"> 58: path-Element: getTotalLength() und getPointAtLength()</text> 59: 60: <a href="" onclick="PathInfo()"> 61: <text x="100" y="205" style="fill: #00C; font-size: 16px">PathInfo() 62: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 63: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 64: </text> 65: </a> 66: 67: <path id="testpfad" d="M 100,100 L 200,100 L 200,200 L 200,300 L 300,300 Z" 68: style="stroke: #F00; stroke-width: 1px; fill: none"/> 69: 70: <circle id="pkt" cx="0" cy="0" r="2" style="fill: #090; visibility: hidden"/> 71: 72: </svg>

pattern.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <defs> 13: 14: <pattern id="einmuster" patternUnits="userSpaceOnUse" x="0" y="0" 15: width="20" height="20"> 16: <rect x="0" y="0" height="10" width="10" style="fill: #00C"/> 17: </pattern> 18: 19: </defs> 20: 21: <title>SVG - Learning By Coding</title> 22: <desc>SVG-Spezifikation in Beispielen</desc> 23: <text x="20" y="30" style="fill: #000; font-size: 24px">Element pattern</text> 24: 25: <rect x="30" y="60" width="150" height="50" style="fill: url(#einmuster)"/> 26: 27: </svg>


periodensystem.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <style type="text/css"> 18: <![CDATA[ 19: 20: rect 21: { 22: stroke: #000; 23: stroke-width: 1.5px; 24: fill: none; 25: } 26: 27: text 28: { 29: pointer-events: none; 30: } 31: 32: /* Nichtmetalle */ 33: .nm 34: { 35: fill: #FCC; 36: } 37:


38: /* Halbmetalle */ 39: .hm 40: { 41: fill: #3C3; 42: } 43: 44: /* Hauptgruppen-Metalle */ 45: .mh 46: { 47: fill: #0CF; 48: } 49: 50: /* Nebengruppen-Metalle */ 51: .mn 52: { 53: fill: #9FF; 54: } 55: 56: .daten1 text 57: { 58: fill: #00C; 59: } 60: 61: .daten2 text 62: { 63: fill: #F00; 64: } 65: 66: .fbox 67: { 68: stroke: #000; 69: stroke-width: 0.8px; 70: } 71: 72: .aktelem 73: { 74: fill: #FF0; 75: } 76: 77: line.la 78: { 79: stroke: #F00; 80: stroke-width: 1.5px; 81: } 82: 83: line.ac 84: { 85: stroke: #00C; 86: stroke-width: 1.5px; 87: } 88: 89: ]]> 90: </style> 91: 92: <script type="text/javascript"> 93: <![CDATA[ 94: 95: var svgdoc=document.documentElement; 96: var objekt,oldobj,oldclass,xmldoc,AN,EN,SY,AW,BP,IP,EY,AR,MP,DE; 97: var ANobj,ENobj,SYobj,AWobj,BPobj,IPobj,EYobj,ARobj,MPobj,DEobj; 98: var A=String.fromCharCode(197); // Angstroem-Zeichen 99: 100: // Ereignisse fuer die Boxen der chemischen Elemente ueberwachen 101: svgdoc.addEventListener("mouseover",ElementOver,false); 102: svgdoc.addEventListener("mouseout",ElementOut,false); 103: svgdoc.addEventListener("click",ElementClick,false); 104: 105: 106: function ElementOver(mouseover_evt) 107: { 108: objekt=mouseover_evt.target; 109: 110: if(objekt.parentNode.tagName=="g" && objekt.parentNode.firstChild.getAttribute("class")!="aktelem") 111: { 112: objekt.style.setProperty("fill-opacity","0.4"); 113: } 114: }


115: 116: 117: function ElementOut(mouseout_evt) 118: { 119: objekt=mouseout_evt.target; 120: 121: if(objekt.parentNode.tagName=="g") 122: { 123: objekt.style.setProperty("fill-opacity","1.0"); 124: } 125: } 126: 127: 128: function ElementClick(mouseclick_evt) 129: { 130: objekt=mouseclick_evt.target; 131: 132: if(objekt.parentNode.tagName=="g") 133: { 134: // Ausgabetexte loeschen 135: svgdoc.getElementById("ANout").firstChild.nodeValue=""; 136: svgdoc.getElementById("ENout").firstChild.nodeValue=""; 137: svgdoc.getElementById("SYout").firstChild.nodeValue=""; 138: svgdoc.getElementById("AWout").firstChild.nodeValue=""; 139: svgdoc.getElementById("BPout").firstChild.nodeValue=""; 140: svgdoc.getElementById("IPout").firstChild.nodeValue=""; 141: svgdoc.getElementById("EYout").firstChild.nodeValue=""; 142: svgdoc.getElementById("ARout").firstChild.nodeValue=""; 143: svgdoc.getElementById("MPout").firstChild.nodeValue=""; 144: svgdoc.getElementById("DEout").firstChild.nodeValue=""; 145: 146: // aktuelles Element gelb markieren - vorheriges Element zurueck setzen 147: if(oldobj)oldobj.parentNode.firstChild.setAttribute("class",oldclass); 148: oldclass=objekt.parentNode.firstChild.getAttribute("class"); 149: objekt.parentNode.firstChild.setAttribute("class","aktelem"); 150: objekt.parentNode.firstChild.style.setProperty("fill-opacity","1.0"); 151: oldobj=objekt; 152: } 153: } 154: 155: 156: function HoleDaten(EName) 157: { 158: // Beispielaufruf von ptable.php: 159: // http://.../ptable.php?EName=Actinium 160: getURL("ptable.php?EName="+EName,callback); 161: } 162: 163: 164: function callback(urlRequestStatus) 165: { 166: if(urlRequestStatus.success && urlRequestStatus.content!="Error!") 167: { 168: xmldoc=parseXML(urlRequestStatus.content).documentElement; 169: if(xmldoc)BearbeiteDaten(); 170: } 171: else 172: { 173: // gelb markiertes Element zurueck setzen 174: if(oldobj)oldobj.parentNode.firstChild.setAttribute("class",oldclass); 175: // Fehlermeldung ausgeben 176: alert("Bei der Abfrage von WebserviceX.NET\nist ein Fehler aufgetreten!"); 177: } 178: } 179: 180: 181: function BearbeiteDaten() 182: { 183: // Wurzelelement: NewDataSet (mit Kindelement Table) 184: // Kindelemente von Table: 185: // AtomicNumber, ElementName, Symbol, AtomicWeight, BoilingPoint, 186: // IonisationPotential, EletroNegativity, AtomicRadius, MeltingPoint, Density 187: 188: // XML-Daten auslesen 189: ANobj=xmldoc.getElementsByTagName("AtomicNumber"); 190: if(ANobj && ANobj.length>0)AN=ANobj.item(0).firstChild.nodeValue; 191: else AN=""; 192:


193: ENobj=xmldoc.getElementsByTagName("ElementName"); 194: if(ENobj && ENobj.length>0)EN=ENobj.item(0).firstChild.nodeValue; 195: else EN=""; 196: 197: SYobj=xmldoc.getElementsByTagName("Symbol"); 198: if(SYobj && SYobj.length>0)SY=SYobj.item(0).firstChild.nodeValue; 199: else SY=""; 200: 201: AWobj=xmldoc.getElementsByTagName("AtomicWeight"); 202: if(AWobj && AWobj.length>0)AW=AWobj.item(0).firstChild.nodeValue; 203: else AW=""; 204: 205: BPobj=xmldoc.getElementsByTagName("BoilingPoint"); 206: if(BPobj && BPobj.length>0)BP=BPobj.item(0).firstChild.nodeValue; 207: else BP=""; 208: 209: IPobj=xmldoc.getElementsByTagName("IonisationPotential"); 210: if(IPobj && IPobj.length>0)IP=IPobj.item(0).firstChild.nodeValue; 211: else IP=""; 212: 213: EYobj=xmldoc.getElementsByTagName("EletroNegativity"); 214: if(EYobj && EYobj.length>0)EY=EYobj.item(0).firstChild.nodeValue; 215: else EY=""; 216: 217: ARobj=xmldoc.getElementsByTagName("AtomicRadius"); 218: if(ARobj && ARobj.length>0)AR=ARobj.item(0).firstChild.nodeValue; 219: else AR=""; 220: 221: MPobj=xmldoc.getElementsByTagName("MeltingPoint"); 222: if(MPobj && MPobj.length>0)MP=MPobj.item(0).firstChild.nodeValue; 223: else MP=""; 224: 225: DEobj=xmldoc.getElementsByTagName("Density"); 226: if(DEobj && DEobj.length>0)DE=DEobj.item(0).firstChild.nodeValue; 227: else DE=""; 228: 229: // auf max. 6 Stellen runden E i n h e i t e n 230: if(AR!="")AR=parseFloat(AR).toFixed(6)+" "+A; // Angstroem (A = Å) 231: if(AW!="")AW=parseFloat(AW).toFixed(6)+" u"; // atomic units 232: if(BP!="")BP=parseFloat(BP).toFixed(6)+" K"; // Kelvin 233: if(MP!="")MP=parseFloat(MP).toFixed(6)+" K"; // Kelvin 234: if(IP!="")IP=parseFloat(IP).toFixed(6)+" eV"; // Elektronenvolt 235: if(EY!="")EY=parseFloat(EY).toFixed(6); 236: if(DE!="")DE+=" kg / m^3"; // Kilogramm pro Kubikmeter 237: 238: // Ergebnisse ausgeben 239: svgdoc.getElementById("ANout").firstChild.nodeValue=AN; 240: svgdoc.getElementById("ENout").firstChild.nodeValue=EN; 241: svgdoc.getElementById("SYout").firstChild.nodeValue=SY; 242: svgdoc.getElementById("AWout").firstChild.nodeValue=AW; 243: svgdoc.getElementById("BPout").firstChild.nodeValue=BP; 244: svgdoc.getElementById("IPout").firstChild.nodeValue=IP; 245: svgdoc.getElementById("EYout").firstChild.nodeValue=EY; 246: svgdoc.getElementById("ARout").firstChild.nodeValue=AR; 247: svgdoc.getElementById("MPout").firstChild.nodeValue=MP; 248: svgdoc.getElementById("DEout").firstChild.nodeValue=DE; 249: } 250: 251: ]]> 252: </script> 253: 254: </defs> 255: 256: <text x="20" y="30" style="fill: #000; font-size: 24px"> 257: Periodensystem der Elemente mit Online-Datenabfrage</text> 258: 259:  260: <text x="45" y="70">Hauptgruppe</text> 261: <text x="58" y="90">I</text> 262: <text x="88" y="90">II</text> 263: 264: <text x="220" y="160">Nebengruppe</text> 265: <text x="118" y="180">III</text> 266: <text x="148" y="180">IV</text> 267: <text x="178" y="180">V</text> 268: <text x="208" y="180">VI</text> 269: <text x="238" y="180">VII</text> 270: <text x="298" y="180">VIII</text>


271: <text x="358" y="180">I</text> 272: <text x="388" y="180">II</text> 273: 274: <text x="470" y="70">Hauptgruppe</text> 275: <text x="418" y="90">III</text> 276: <text x="448" y="90">IV</text> 277: <text x="478" y="90">V</text> 278: <text x="508" y="90">VI</text> 279: <text x="538" y="90">VII</text> 280: <text x="568" y="90">VIII</text> 281: 282:  283: <text x="45" y="70" transform="translate(-45,270) rotate(-90)">Periode</text> 284: <text x="35" y="120">1</text> 285: <text x="35" y="150">2</text> 286: <text x="35" y="180">3</text> 287: <text x="35" y="210">4</text> 288: <text x="35" y="240">5</text> 289: <text x="35" y="270">6</text> 290: <text x="35" y="300">7</text> 291: 292:  293: <text x="35" y="350">Lanthanoide</text> 294: <text x="35" y="390">Actinoide</text> 295: 296:  297: <text x="35" y="430">Zuordung der Farben:</text> 298: <rect class="nm fbox" x="35" y="440" width="10" height="10"/><text x="50" y="450">> Nichtmetalle</text> 299: <rect class="hm fbox" x="35" y="455" width="10" height="10"/><text x="50" y="465">> Halbmetalle</text> 300: <rect class="mh fbox" x="35" y="470" width="10" height="10"/><text x="50" y="480">> Hauptgruppen-Metalle</text> 301: <rect class="mn fbox" x="35" y="485" width="10" height="10"/><text x="50" y="495">> Nebengruppen-Metalle</text> 302: <rect class="aktelem fbox" x="35" y="500" width="10" height="10"/><text x="50" y="510">> Aktuelles Element</text> 303: 304:  305: <g onclick="HoleDaten('Hydrogen')"><rect class="nm" x="50" y="100" width="30" height="30"/><text x="58" y="120">H</text></g> 306: <g onclick="HoleDaten('Lithium')"><rect class="mh" x="50" y="130" width="30" height="30"/><text x="58" y="150">Li</text></g> 307: <g onclick="HoleDaten('Sodium')"><rect class="mh" x="50" y="160" width="30" height="30"/><text x="58" y="180">Na</text></g> 308: <g onclick="HoleDaten('Potassium')"><rect class="mh" x="50" y="190" width="30" height="30"/><text x="58" y="210">K</text></g> 309: <g onclick="HoleDaten('Rubidium')"><rect class="mh" x="50" y="220" width="30" height="30"/><text x="58" y="240">Rb</text></g> 310: <g onclick="HoleDaten('Cesium')"><rect class="mh" x="50" y="250" width="30" height="30"/><text x="58" y="270">Cs</text></g> 311: <g onclick="HoleDaten('Francium')"><rect class="mh" x="50" y="280" width="30" height="30"/><text x="58" y="300">Fr</text></g> 312: 313:  314: <g onclick="HoleDaten('Beryllium')"><rect class="mh" x="80" y="130" width="30" height="30"/><text x="88" y="150">Be</text></g> 315: <g onclick="HoleDaten('Magnesium')"><rect class="mh" x="80" y="160" width="30" height="30"/><text x="88" y="180">Mg</text></g> 316: <g onclick="HoleDaten('Calcium')"><rect class="mh" x="80" y="190" width="30" height="30"/><text x="88" y="210">Ca</text></g> 317: <g onclick="HoleDaten('Strontium')"><rect class="mh" x="80" y="220" width="30" height="30"/><text x="88" y="240">Sr</text></g> 318: <g onclick="HoleDaten('Barium')"><rect class="mh" x="80" y="250" width="30" height="30"/><text x="88" y="270">Ba</text></g> 319: <g onclick="HoleDaten('Radium')"><rect class="mh" x="80" y="280" width="30" height="30"/><text x="88" y="300">Ra</text></g> 320: 321:  322: <g onclick="HoleDaten('Scandium')"><rect class="mn" x="110" y="190" width="30" height="30"/><text x="118" y="210">Sc</text></g> 323: <g onclick="HoleDaten('Yttrium')"><rect class="mn" x="110" y="220" width="30" height="30"/><text x="118" y="240">Y</text></g> 324: <g onclick="HoleDaten('Lanthanum')"><rect class="mn" x="110" y="250" width="30" height="30"/><text x="118" y="270">La</text></g> 325: <g onclick="HoleDaten('Actinium')"><rect class="mn" x="110" y="280" width="30" height="30"/><text x="118" y="300">Ac</text></g> 326:


327:  328: <g onclick="HoleDaten('Titanium')"><rect class="mn" x="140" y="190" width="30" height="30"/><text x="148" y="210">Ti</text></g> 329: <g onclick="HoleDaten('Zirconium')"><rect class="mn" x="140" y="220" width="30" height="30"/><text x="148" y="240">Zr</text></g> 330: <g onclick="HoleDaten('Hafnium')"><rect class="mn" x="140" y="250" width="30" height="30"/><text x="148" y="270">Hf</text></g> 331: <g onclick="HoleDaten('Curcigtonium')"><rect class="mn" x="140" y="280" width="30" height="30"/><text x="148" y="300">Ku</text></g> 332: 333:  334: <g onclick="HoleDaten('Vanadium')"><rect class="mn" x="170" y="190" width="30" height="30"/><text x="178" y="210">V</text></g> 335: <g onclick="HoleDaten('Niobium')"><rect class="mn" x="170" y="220" width="30" height="30"/><text x="178" y="240">Nb</text></g> 336: <g onclick="HoleDaten('Tantalum')"><rect class="mn" x="170" y="250" width="30" height="30"/><text x="178" y="270">Ta</text></g> 337: <g onclick="HoleDaten('Hahnium')"><rect class="mn" x="170" y="280" width="30" height="30"/><text x="178" y="300">Ha</text></g> 338: 339:  340: <g onclick="HoleDaten('Chromium')"><rect class="mn" x="200" y="190" width="30" height="30"/><text x="208" y="210">Cr</text></g> 341: <g onclick="HoleDaten('Molybdenum')"><rect class="mn" x="200" y="220" width="30" height="30"/><text x="208" y="240">Mo</text></g> 342: <g onclick="HoleDaten('Tungsten')"><rect class="mn" x="200" y="250" width="30" height="30"/><text x="208" y="270">W</text></g> 343: <g onclick="HoleDaten('Seaborgium')"><rect class="mn" x="200" y="280" width="30" height="30"/><text x="208" y="300">Sg</text></g> 344: 345:  346: <g onclick="HoleDaten('Manganese')"><rect class="mn" x="230" y="190" width="30" height="30"/><text x="238" y="210">Mn</text></g> 347: <g onclick="HoleDaten('Technetium')"><rect class="mn" x="230" y="220" width="30" height="30"/><text x="238" y="240">Tc</text></g> 348: <g onclick="HoleDaten('Rhenium')"><rect class="mn" x="230" y="250" width="30" height="30"/><text x="238" y="270">Re</text></g> 349: <g onclick="HoleDaten('Bohrium')"><rect class="mn" x="230" y="280" width="30" height="30"/><text x="238" y="300">Bh</text></g> 350: 351:  352: <g onclick="HoleDaten('Iron')"><rect class="mn" x="260" y="190" width="30" height="30"/><text x="268" y="210">Fe</text></g> 353: <g onclick="HoleDaten('Ruthenium')"><rect class="mn" x="260" y="220" width="30" height="30"/><text x="268" y="240">Ru</text></g> 354: <g onclick="HoleDaten('Osmium')"><rect class="mn" x="260" y="250" width="30" height="30"/><text x="268" y="270">Os</text></g> 355: <g onclick="HoleDaten('Hassium')"><rect class="mn" x="260" y="280" width="30" height="30"/><text x="268" y="300">Hs</text></g> 356: <g onclick="HoleDaten('Cobalt')"><rect class="mn" x="290" y="190" width="30" height="30"/><text x="298" y="210">Co</text></g> 357: <g onclick="HoleDaten('Rhodium')"><rect class="mn" x="290" y="220" width="30" height="30"/><text x="298" y="240">Rh</text></g> 358: <g onclick="HoleDaten('Iridium')"><rect class="mn" x="290" y="250" width="30" height="30"/><text x="298" y="270">Ir</text></g> 359: <g onclick="HoleDaten('Meitnerium')"><rect class="mn" x="290" y="280" width="30" height="30"/><text x="298" y="300">Mt</text></g> 360: <g onclick="HoleDaten('Nickel')"><rect class="mn" x="320" y="190" width="30" height="30"/><text x="328" y="210">Ni</text></g> 361: <g onclick="HoleDaten('Palladium')"><rect class="mn" x="320" y="220" width="30" height="30"/><text x="328" y="240">Pd</text></g> 362: <g onclick="HoleDaten('Platinum')"><rect class="mn" x="320" y="250" width="30" height="30"/><text x="328" y="270">Pt</text></g> 363: <g onclick="HoleDaten('Ununnilium')"><rect class="mn" x="320" y="280" width="30" height="30"/><text x="325" y="300">Uun</text></g> 364: 365:  366: <g onclick="HoleDaten('Copper')"><rect class="mn" x="350" y="190" width="30" height="30"/><text x="358" y="210">Cu</text></g> 367: <g onclick="HoleDaten('Silver')"><rect class="mn" x="350" y="220" width="30" height="30"/><text x="358" y="240">Ag</text></g> 368: <g onclick="HoleDaten('Gold')"><rect class="mn" x="350" y="250" width="30" height="30"/><text x="358" y="270">Au</text></g> 369: <g onclick="HoleDaten('Unununium')"><rect class="mn" x="350" y="280" width="30" height="30"/><text x="355" y="300">Uuu</text></g> 370: 371:  372: <g onclick="HoleDaten('Zinc')"><rect class="mn" x="380" y="190" width="30"


height="30"/><text x="388" y="210">Zn</text></g> 373: <g onclick="HoleDaten('Cadmium')"><rect class="mn" x="380" y="220" width="30" height="30"/><text x="388" y="240">Cd</text></g> 374: <g onclick="HoleDaten('Mercury')"><rect class="mn" x="380" y="250" width="30" height="30"/><text x="388" y="270">Hg</text></g> 375: <g onclick="HoleDaten('Ununbium')"><rect class="mn" x="380" y="280" width="30" height="30"/><text x="385" y="300">Uub</text></g> 376: 377:  378: <g onclick="HoleDaten('Boron')"><rect class="hm" x="410" y="130" width="30" height="30"/><text x="418" y="150">B</text></g> 379: <g onclick="HoleDaten('Aluminium')"><rect class="mh" x="410" y="160" width="30" height="30"/><text x="418" y="180">Al</text></g> 380: <g onclick="HoleDaten('Gallium')"><rect class="mh" x="410" y="190" width="30" height="30"/><text x="418" y="210">Ga</text></g> 381: <g onclick="HoleDaten('Indium')"><rect class="mh" x="410" y="220" width="30" height="30"/><text x="418" y="240">In</text></g> 382: <g onclick="HoleDaten('Thallium')"><rect class="mh" x="410" y="250" width="30" height="30"/><text x="418" y="270">Tl</text></g> 383: 384:  385: <g onclick="HoleDaten('Carbon')"><rect class="nm" x="440" y="130" width="30" height="30"/><text x="448" y="150">C</text></g> 386: <g onclick="HoleDaten('Silicon')"><rect class="hm" x="440" y="160" width="30" height="30"/><text x="448" y="180">Si</text></g> 387: <g onclick="HoleDaten('Germanium')"><rect class="hm" x="440" y="190" width="30" height="30"/><text x="448" y="210">Ge</text></g> 388: <g onclick="HoleDaten('Tin')"><rect class="mh" x="440" y="220" width="30" height="30"/><text x="448" y="240">Sn</text></g> 389: <g onclick="HoleDaten('Lead')"><rect class="mh" x="440" y="250" width="30" height="30"/><text x="448" y="270">Pb</text></g> 390: 391:  392: <g onclick="HoleDaten('Nitrogen')"><rect class="nm" x="470" y="130" width="30" height="30"/><text x="478" y="150">N</text></g> 393: <g onclick="HoleDaten('Phosphorous')"><rect class="nm" x="470" y="160" width="30" height="30"/><text x="478" y="180">P</text></g> 394: <g onclick="HoleDaten('Arsenic')"><rect class="hm" x="470" y="190" width="30" height="30"/><text x="478" y="210">As</text></g> 395: <g onclick="HoleDaten('Antimony')"><rect class="hm" x="470" y="220" width="30" height="30"/><text x="478" y="240">Sb</text></g> 396: <g onclick="HoleDaten('Bismuth')"><rect class="mh" x="470" y="250" width="30" height="30"/><text x="478" y="270">Bi</text></g> 397: 398:  399: <g onclick="HoleDaten('Oxygen')"><rect class="nm" x="500" y="130" width="30" height="30"/><text x="508" y="150">O</text></g> 400: <g onclick="HoleDaten('Sulphur')"><rect class="nm" x="500" y="160" width="30" height="30"/><text x="508" y="180">S</text></g> 401: <g onclick="HoleDaten('Selenium')"><rect class="nm" x="500" y="190" width="30" height="30"/><text x="508" y="210">Se</text></g> 402: <g onclick="HoleDaten('Telurium')"><rect class="hm" x="500" y="220" width="30" height="30"/><text x="508" y="240">Te</text></g> 403: <g onclick="HoleDaten('Polonium')"><rect class="hm" x="500" y="250" width="30" height="30"/><text x="508" y="270">Po</text></g> 404: 405:  406: <g onclick="HoleDaten('Flourine')"><rect class="nm" x="530" y="130" width="30" height="30"/><text x="538" y="150">F</text></g> 407: <g onclick="HoleDaten('Chlorine')"><rect class="nm" x="530" y="160" width="30" height="30"/><text x="538" y="180">Cl</text></g> 408: <g onclick="HoleDaten('Bromine')"><rect class="nm" x="530" y="190" width="30" height="30"/><text x="538" y="210">Br</text></g> 409: <g onclick="HoleDaten('Iodine')"><rect class="nm" x="530" y="220" width="30" height="30"/><text x="538" y="240">I</text></g> 410: <g onclick="HoleDaten('Astatine')"><rect class="hm" x="530" y="250" width="30" height="30"/><text x="538" y="270">At</text></g> 411: 412:  413: <g onclick="HoleDaten('Helium')"><rect class="nm" x="560" y="100" width="30" height="30"/><text x="568" y="120">He</text></g> 414: <g onclick="HoleDaten('Neon')"><rect class="nm" x="560" y="130" width="30" height="30"/><text x="568" y="150">Ne</text></g> 415: <g onclick="HoleDaten('Argon')"><rect class="nm" x="560" y="160" width="30" height="30"/><text x="568" y="180">Ar</text></g> 416: <g onclick="HoleDaten('Krypton')"><rect class="nm" x="560" y="190" width="30" height="30"/><text x="568" y="210">Kr</text></g>


417: <g onclick="HoleDaten('Xenon')"><rect class="nm" x="560" y="220" width="30" height="30"/><text x="568" y="240">Xe</text></g> 418: <g onclick="HoleDaten('Radon')"><rect class="nm" x="560" y="250" width="30" height="30"/><text x="568" y="270">Rn</text></g> 419: 420:  421: <g onclick="HoleDaten('Cerium')"><rect class="mn" x="110" y="330" width="30" height="30"/><text x="118" y="350">Ce</text></g> 422: <g onclick="HoleDaten('Praseodymium')"><rect class="mn" x="140" y="330" width="30" height="30"/><text x="148" y="350">Pr</text></g> 423: <g onclick="HoleDaten('Neodymium')"><rect class="mn" x="170" y="330" width="30" height="30"/><text x="178" y="350">Nd</text></g> 424: <g onclick="HoleDaten('Promethium')"><rect class="mn" x="200" y="330" width="30" height="30"/><text x="208" y="350">Pm</text></g> 425: <g onclick="HoleDaten('Samarium')"><rect class="mn" x="230" y="330" width="30" height="30"/><text x="238" y="350">Sm</text></g> 426: <g onclick="HoleDaten('Europium')"><rect class="mn" x="260" y="330" width="30" height="30"/><text x="268" y="350">Eu</text></g> 427: <g onclick="HoleDaten('Gadolinium')"><rect class="mn" x="290" y="330" width="30" height="30"/><text x="298" y="350">Gd</text></g> 428: <g onclick="HoleDaten('Terbium')"><rect class="mn" x="320" y="330" width="30" height="30"/><text x="328" y="350">Tb</text></g> 429: <g onclick="HoleDaten('Dysprosium')"><rect class="mn" x="350" y="330" width="30" height="30"/><text x="358" y="350">Dy</text></g> 430: <g onclick="HoleDaten('Holmium')"><rect class="mn" x="380" y="330" width="30" height="30"/><text x="388" y="350">Ho</text></g> 431: <g onclick="HoleDaten('Erbium')"><rect class="mn" x="410" y="330" width="30" height="30"/><text x="418" y="350">Er</text></g> 432: <g onclick="HoleDaten('Thulium')"><rect class="mn" x="440" y="330" width="30" height="30"/><text x="448" y="350">Tm</text></g> 433: <g onclick="HoleDaten('Ytterbium')"><rect class="mn" x="470" y="330" width="30" height="30"/><text x="478" y="350">Yb</text></g> 434: <g onclick="HoleDaten('Lutetium')"><rect class="mn" x="500" y="330" width="30" height="30"/><text x="508" y="350">Lu</text></g> 435: 436:  437: <line class="la" x1="140" y1="251" x2="140" y2="279"/> 438: <line class="la" x1="110" y1="331" x2="110" y2="359"/> 439: <line class="la" x1="530" y1="331" x2="530" y2="359"/> 440: 441:  442: <g onclick="HoleDaten('Thorium')"><rect class="mn" x="110" y="370" width="30" height="30"/><text x="118" y="390">Th</text></g> 443: <g onclick="HoleDaten('Protactinium')"><rect class="mn" x="140" y="370" width="30" height="30"/><text x="148" y="390">Pa</text></g> 444: <g onclick="HoleDaten('Uranium')"><rect class="mn" x="170" y="370" width="30" height="30"/><text x="178" y="390">U</text></g> 445: <g onclick="HoleDaten('Neptunium')"><rect class="mn" x="200" y="370" width="30" height="30"/><text x="208" y="390">Np</text></g> 446: <g onclick="HoleDaten('Plutonium')"><rect class="mn" x="230" y="370" width="30" height="30"/><text x="238" y="390">Pu</text></g> 447: <g onclick="HoleDaten('Americium')"><rect class="mn" x="260" y="370" width="30" height="30"/><text x="268" y="390">Am</text></g> 448: <g onclick="HoleDaten('Curium')"><rect class="mn" x="290" y="370" width="30" height="30"/><text x="298" y="390">Cm</text></g> 449: <g onclick="HoleDaten('Berkelium')"><rect class="mn" x="320" y="370" width="30" height="30"/><text x="328" y="390">Bk</text></g> 450: <g onclick="HoleDaten('Californium')"><rect class="mn" x="350" y="370" width="30" height="30"/><text x="358" y="390">Cf</text></g> 451: <g onclick="HoleDaten('Einsteinium')"><rect class="mn" x="380" y="370" width="30" height="30"/><text x="388" y="390">Es</text></g> 452: <g onclick="HoleDaten('Fermium')"><rect class="mn" x="410" y="370" width="30" height="30"/><text x="418" y="390">Fm</text></g> 453: <g onclick="HoleDaten('Mendelevium')"><rect class="mn" x="440" y="370" width="30" height="30"/><text x="448" y="390">Md</text></g> 454: <g onclick="HoleDaten('Nobelium')"><rect class="mn" x="470" y="370" width="30" height="30"/><text x="478" y="390">No</text></g> 455: <g onclick="HoleDaten('Lawrencium')"><rect class="mn" x="500" y="370" width="30" height="30"/><text x="508" y="390">Lr</text></g> 456: 457:  458: <line class="ac" x1="140" y1="281" x2="140" y2="309"/> 459: <line class="ac" x1="110" y1="371" x2="110" y2="399"/> 460: <line class="ac" x1="530" y1="371" x2="530" y2="399"/> 461: 462:  463: <rect x="200" y="430" rx="5" width="390" height="100"/> 464:


465: <a xlink:href="http://www.webservicex.net/WS/WSDetails.aspx?WSID=19&CATID=7" target="_top"> 466: <text x="315" y="445" style="fill: #000; font-size: 12px; pointer-events: visible"> 467: Daten von WebserviceX.NET 468: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 469: <set attributeName="text-decoration" attributeType="CSS" to="underline" 470: begin="mouseover"/> 471: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 472: <set attributeName="text-decoration" attributeType="CSS" to="none" 473: begin="mouseout"/> 474: </text> 475: </a> 476: 477:  478: <g class="daten1"> 479: <text x="205" y="465">Symbol:</text> 480: <text x="205" y="480">ElementName:</text> 481: <text x="205" y="495">AtomicNumber:</text> 482: <text x="205" y="510">AtomicWeight:</text> 483: <text x="205" y="525">AtomicRadius:</text> 484: <text x="380" y="465">Density:</text> 485: <text x="380" y="480">MeltingPoint:</text> 486: <text x="380" y="495">BoilingPoint:</text> 487: <text x="380" y="510">ElectroNegativity:</text> 488: <text x="380" y="525">IonisationPotential:</text> 489: </g> 490: 491:  492: <g class="daten2"> 493: <text id="SYout" x="290" y="465"> </text> 494: <text id="ENout" x="290" y="480"> </text> 495: <text id="ANout" x="290" y="495"> </text> 496: <text id="AWout" x="290" y="510"> </text> 497: <text id="ARout" x="290" y="525"> </text> 498: <text id="DEout" x="485" y="465"> </text> 499: <text id="MPout" x="485" y="480"> </text> 500: <text id="BPout" x="485" y="495"> </text> 501: <text id="EYout" x="485" y="510"> </text> 502: <text id="IPout" x="485" y="525"> </text> 503: </g> 504: 505: <a xlink:href="ptable_php.txt" target="_top"> 506: <text x="35" y="530" style="fill: #000; font-size: 11px; pointer-events: visible"> 507: PHP-Script zur Datenabfrage 508: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 509: <set attributeName="text-decoration" attributeType="CSS" to="underline" 510: begin="mouseover"/> 511: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 512: <set attributeName="text-decoration" attributeType="CSS" to="none" 513: begin="mouseout"/> 514: </text> 515: </a> 516: 517: </svg>

ptable.php zu periodensystem.svg 1: <?php 2: 3: // -------------------------------------------------------- 4: // ptable.php holt Periodic Table-Daten von WebserviceX.NET 5: // http://www.webservicex.net/periodictable.asmx 6: // -------------------------------------------------------- 7: // by Dr. Thomas Meinike 09/03 8: // SVG - Learning By Coding 9: // http://www.datenverdrahten.de/svglbc/ 10: // -------------------------------------------------------- 11: // Beispielaufruf: 12: // http://.../ptable.php?EName=Actinium 13: // -------------------------------------------------------- 14: 15: function Error() 16: { 17: header("Content-type: text/plain");


18: print "Error!"; // Verarbeitung im SVG-Dokument 19: exit(); 20: } 21: 22: // PHP-Version ermitteln ("4.3.3" wird zu 433) 23: $verstr=explode(".",phpversion()); 24: $vernum=$verstr[0]*100+$verstr[1]*10+$verstr[2]*1; 25: 26: // Parameter Elementname auslesen 27: $EName=$_GET["EName"]; 28: if(!isset($EName))Error(); 29: 30: // URL zusammen setzen 31: $url="http://www.webservicex.net/periodictable.asmx/GetAtomicNumber?ElementName=$EName"; 32: 33: // Variablen fuer Ergebnisdaten 34: $ausgabe=""; 35: $xmlcontent=""; 36: 37: // ggf. Proxy erforderlich: $proxy=true/false 38: $proxy=false; 39: // Proxy-Daten bei $proxy=true anpassen: 40: // $proxy_adresse="..."; 41: // $proxy_port=8080; 42: // $timeout=60; 43: 44: // XML-Daten holen und verarbeiten 45: if($proxy) 46: { 47: // Daten vom Web Service ueber Proxy auslesen 48: $httpanfrage="GET $url HTTP/1.0\n\n"; 49: $httppointer=fsockopen($proxy_adresse,$proxy_port,&$errno,&$errstr,$timeout); 50: 51: if(!$httppointer) 52: { 53: fclose($httppointer); 54: exit(); 55: } 56: else 57: { 58: fputs($httppointer,$httpanfrage); 59: while(!feof($httppointer)) 60: { 61: $ausgabe.=@fgets($httppointer,1024); 62: } 63: fclose($httppointer); 64: } 65: // XML-Daten von den HTTP-Headerdaten abtrennen 66: if(strlen($ausgabe)>0)$xmlcontent=substr($ausgabe,strpos($ausgabe,"<?xml")); 67: } 68: else 69: { 70: // Daten vom Web Service direkt auslesen 71: if($vernum >= 430)$xmlcontent=file_get_contents($url); 72: else 73: { 74: $fp=@file($url); 75: $xmlcontent=implode("",$fp); 76: } 77: } 78: 79: // Ergebnisstring aufbereiten 80: $xmlcontent=trim($xmlcontent); 81: $xmlcontent=str_replace("<string xmlns=\"http://www.webserviceX.NET\">","",$xmlcontent); 82: $xmlcontent=str_replace("</string>","",$xmlcontent); 83: 84: if($vernum >= 430)$xmlcontent=html_entity_decode($xmlcontent); 85: else 86: { 87: $xmlcontent=str_replace("<","<",$xmlcontent); 88: $xmlcontent=str_replace(">",">",$xmlcontent); 89: } 90: 91: if(strlen($xmlcontent)>54) 92: { 93: /* 94: 54 entspricht der leeren Rueckgabe von 95: <?xml version="1.0" encoding="utf-8"?>


96: <NewDataSet /> 97: */ 98: 99: // XML-Code ausgeben 100: header("Content-type: application/xml"); 101: print $xmlcontent; 102: // Verarbeitung des XML-Inhalts im SVG-Dokument 103: // periodensystem.svg mit der callback()-Funktion 104: } 105: else Error(); 106: 107: ?>

piechart.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <defs> 13: 14: <style type="text/css"> 15: <![CDATA[ 16: 17: path 18: { 19: stroke: #FFF; 20: stroke-width: 0.5px; 21: } 22: 23: ]]> 24: </style> 25: 26: 27: <script type="text/javascript"> 28: <![CDATA[ 29: 30: var svgdoc,obj; 31: 32:


33: function OpacityDown(mouseover_evt) 34: { 35: obj=mouseover_evt.target.parentNode; 36: obj.style.setProperty("opacity","0.5"); 37: } 38: 39: 40: function OpacityUp(mouseout_evt) 41: { 42: obj=mouseout_evt.target.parentNode; 43: obj.style.setProperty("opacity","1.0"); 44: } 45: 46: ]]> 47: </script> 48: 49: </defs> 50: 51: <title>SVG - Learning By Coding</title> 52: <desc>SVG-Spezifikation in Beispielen</desc> 53: <text x="20" y="30" style="fill: #000; font-size: 24px">Kreis-Diagramm</text> 54: 55: <g onmouseover="OpacityDown(evt)" onmouseout="OpacityUp(evt)"> 56: <path d="M 200,200 L 200,100 A 100,100 0 0,1 289,154 Z" style="fill: #FFC"/> 57: <rect x="350" y="100" width="30" height="12" style="fill: #FFC"/> 58: <text x="390" y="110" style="font-size: 12px; text-anchor: right">Text 1 [17.39%]</text> 59: </g> 60: 61: <g onmouseover="OpacityDown(evt)" onmouseout="OpacityUp(evt)"> 62: <path d="M 200,200 L 289,154 A 100,100 0 0,1 294,233 Z" style="fill: #F00"/> 63: <rect x="350" y="120" width="30" height="12" style="fill: #F00"/> 64: <text x="390" y="130" style="font-size: 12px; text-anchor: right">Text 2 [13.04%]</text> 65: </g> 66: 67: <g onmouseover="OpacityDown(evt)" onmouseout="OpacityUp(evt)"> 68: <path d="M 200,200 L 294,233 A 100,100 0 0,1 160,292 Z" style="fill: #090"/> 69: <rect x="350" y="140" width="30" height="12" style="fill: #090"/> 70: <text x="390" y="150" style="font-size: 12px; text-anchor: right">Text 3 [26.09%]</text> 71: </g> 72: 73: <g onmouseover="OpacityDown(evt)" onmouseout="OpacityUp(evt)"> 74: <path d="M 200,200 L 160,292 A 100,100 0 0,1 148,115 Z" style="fill: #00C"/> 75: <rect x="350" y="160" width="30" height="12" style="fill: #00C"/> 76: <text x="390" y="170" style="font-size: 12px; text-anchor: right">Text 4 [34.78%]</text> 77: </g> 78: 79: <g onmouseover="OpacityDown(evt)" onmouseout="OpacityUp(evt)"> 80: <path d="M 200,200 L 148,115 A 100,100 0 0,1 200,100 Z" style="fill: #000"/> 81: <rect x="350" y="180" width="30" height="12" style="fill: #000"/> 82: <text x="390" y="190" style="font-size: 12px; text-anchor: right">Text 5 [8.70%]</text> 83: </g> 84: 85: <a xlink:href="http://www.datenverdrahten.de/svgphp/" target="_top"> 86: <text x="30" y="360" style="font-size: 12px; fill: #00C">[Siehe SVG::PHP – Generierung von Kreis- und Balkendiagrammen] 87: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 88: <set attributeName="text-decoration" attributeType="CSS" to="underline" begin="mouseover"/> 89: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 90: <set attributeName="text-decoration" attributeType="CSS" to="none" begin="mouseout"/> 91: </text> 92: </a> 93: 94: </svg>


piechart_movearc.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: onload="getSVGDoc(evt)" onzoom="ZoomControl()"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: 16: <defs> 17: 18: <filter id="flt"> 19: <feGaussianBlur in="SourceAlpha" stdDeviation="0.5" result="blur"/> 20: <feSpecularLighting in="blur" surfaceScale="5" specularConstant="0.5" 21: specularExponent="10" result="specOut" style="lighting-color: #FFF"> 22: <fePointLight x="-5000" y="-5000" z="5000"/> 23: </feSpecularLighting> 24: <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut2"/> 25: <feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic" 26: k1="0" k2="1" k3="1" k4="0"/> 27: </filter> 28: 29: 30: <style type="text/css"> 31: <![CDATA[ 32: 33: text 34: { 35: fill: #000000; 36: font-family: Arial, Helvetica, sans-serif; 37: } 38: 39: path 40: { 41: stroke: #FFFFFF; 42: stroke-width: 0px; 43: filter: url(#flt); 44: } 45: 46: line 47: { 48: stroke: #000000; 49: stroke-width: 0px; 50: } 51:


52: g text 53: { 54: pointer-events: none; 55: } 56: 57: ]]> 58: </style> 59: 60: 61: <script type="text/javascript"> 62: <![CDATA[ 63: 64: var svgdoc,svgroot; 65: 66: 67: function getSVGDoc(load_evt) 68: { 69: svgdoc=load_evt.target.ownerDocument; 70: //svgroot=svgdoc.documentElement; 71: svgdoc=svgdoc.documentElement; 72: } 73: 74: 75: function ShowTooltip(e,txt) 76: { 77: var ttrelem, ttrelem, posx, posy, curtrans, ctx, cty; 78: 79: ttrelem=svgdoc.getElementById("ttr"); 80: tttelem=svgdoc.getElementById("ttt"); 81: tttelem.childNodes.item(0).data=txt; 82: posx=e.clientX; 83: posy=e.clientY; 84: curtrans=svgdoc.currentTranslate; 85: ctx=curtrans.x; 86: cty=curtrans.y; 87: ttrelem.setAttribute("x",posx-ctx); 88: ttrelem.setAttribute("y",posy-cty-20); 89: tttelem.setAttribute("x",posx-ctx+5); 90: tttelem.setAttribute("y",posy-cty-8); 91: ttrelem.setAttribute("width",tttelem.getComputedTextLength()+10); 92: tttelem.setAttribute("style", 93: "fill: #0000CC; font-size: 11px; visibility: visible"); 94: ttrelem.setAttribute("style", 95: "fill: #FFFFCC; stroke: #000000; stroke-width: 0.5px; visibility: visible"); 96: // Fix fuer Corel SVG Viewer - nochmaliges Zuweisen des Textinhalts 97: tttelem.childNodes.item(0).data=txt; 98: } 99: 100: 101: function HideTooltip() 102: { 103: var ttrelem, ttrelem; 104: ttrelem=svgdoc.getElementById("ttr"); 105: tttelem=svgdoc.getElementById("ttt"); 106: ttrelem.setAttribute("style","visibility: hidden"); 107: tttelem.setAttribute("style","visibility: hidden"); 108: } 109: 110: 111: function SetOpacity(e,op) 112: { 113: e.target.parentNode.setAttribute("fill-opacity",op); 114: } 115: 116: 117: function TextHover(objid,color,decor) 118: { 119: var element; 120: 121: element=svgdoc.getElementById(objid); 122: element.setAttribute("style","fill: "+color+"; text-decoration: "+decor); 123: } 124: 125: 126: function ZoomControl() 127: { 128: var curzoom; 129:


130: curzoom=svgdoc.currentScale; 131: svgdoc.getElementById("tooltip").setAttribute("transform", 132: "scale("+1/curzoom+")"); 133: } 134: 135: 136: function MoveArc(click_evt,dx,dy) 137: { 138: var obj,e,f; 139: 140: obj=click_evt.target; 141: 142: e=Math.abs(obj.getCTM().e); 143: f=Math.abs(obj.getCTM().f); 144: 145: if(e < 1 || f < 1) 146: { 147: obj.setAttribute("transform","translate("+dx+","+dy+")"); 148: obj.style.setProperty("stroke","#000000"); 149: obj.style.setProperty("stroke-width","0.5px"); 150: } 151: else 152: { 153: obj.setAttribute("transform","translate("+1/dx+","+1/dy+")"); 154: obj.style.setProperty("stroke","#FFFFFF"); 155: obj.style.setProperty("stroke-width","0px"); 156: } 157: } 158: 159: ]]> 160: </script> 161: 162: </defs> 163: 164: <text x="20" y="30" style="fill: #000; font-size: 24px"> 165: Kreis-Diagramm mit beweglichen Segmenten</text> 166: 167: <text x="100.00" y="70.00" style="fill: #FF0000; font-size: 20px; text-anchor: left"> 168: Was dröhnt denn so aus den Boxen?</text> 169: 170:  171: <g onmousemove="ShowTooltip(evt,'Industrial');SetOpacity(evt,'0.5')" 172: onmouseout="HideTooltip();SetOpacity(evt,'1.0')"> 173: <path d="M 200.00,200.00 L 200.00,100.00 A 100.00,100.00 0 0,1 295.11,230.90 Z" 174: style="fill: #FFFF99; stroke: #000000; stroke-width: 0.5px" 175: onclick="MoveArc(evt,12.14,-8.82)" transform="translate(12.14,-8.82)"/> 176: <rect x="350.00" y="100.00" width="30" height="12" style="fill: #FFFF99"/> 177: <text x="390.00" y="110.00" style="font-size: 12px; text-anchor: right"> 178: Industrial [60.00 | 30.00%]</text> 179: </g> 180: 181: <g onmousemove="ShowTooltip(evt,'Mittelalter');SetOpacity(evt,'0.5')" 182: onmouseout="HideTooltip();SetOpacity(evt,'1.0')"> 183: <path d="M 200.00,200.00 L 295.11,230.90 A 100.00,100.00 0 0,1 230.90,295.11 Z" 184: style="fill: #FF9933" onclick="MoveArc(evt,10.61,10.61)"/> 185: <rect x="350.00" y="120.00" width="30" height="12" style="fill: #FF9933"/> 186: <text x="390.00" y="130.00" style="font-size: 12px; text-anchor: right"> 187: Mittelalter [30.00 | 15.00%]</text> 188: </g> 189: 190: <g onmousemove="ShowTooltip(evt,'Metal');SetOpacity(evt,'0.5')" 191: onmouseout="HideTooltip();SetOpacity(evt,'1.0')"> 192: <path d="M 200.00,200.00 L 230.90,295.11 A 100.00,100.00 0 0,1 104.89,230.90 Z" 193: style="fill: #66CC00" onclick="MoveArc(evt,-6.81,13.37)"/> 194: <rect x="350.00" y="140.00" width="30" height="12" style="fill: #66CC00"/> 195: <text x="390.00" y="150.00" style="font-size: 12px; text-anchor: right"> 196: Metal [50.00 | 25.00%]</text> 197: </g> 198: 199: <g onmousemove="ShowTooltip(evt,'Electro');SetOpacity(evt,'0.5')" 200: onmouseout="HideTooltip();SetOpacity(evt,'1.0')"> 201: <path d="M 200.00,200.00 L 104.89,230.90 A 100.00,100.00 0 0,1 141.22,119.10 Z" 202: style="fill: #6666FF" onclick="MoveArc(evt,-14.27,-4.64)"/> 203: <rect x="350.00" y="160.00" width="30" height="12" style="fill: #6666FF"/> 204: <text x="390.00" y="170.00" style="font-size: 12px; text-anchor: right"> 205: Electro [40.00 | 20.00%]</text> 206: </g> 207:


208: <g onmousemove="ShowTooltip(evt,'Punk');SetOpacity(evt,'0.5')" 209: onmouseout="HideTooltip();SetOpacity(evt,'1.0')"> 210: <path d="M 200.00,200.00 L 141.22,119.10 A 100.00,100.00 0 0,1 200.00,100.00 Z" 211: style="fill: #999999" onclick="MoveArc(evt,-4.64,-14.27)"/> 212: <rect x="350.00" y="180.00" width="30" height="12" style="fill: #999999"/> 213: <text x="390.00" y="190.00" style="font-size: 12px; text-anchor: right"> 214: Punk [20.00 | 10.00%]</text> 215: </g> 216:  217: 218:  219: <text x="100.00" y="340.00" style="fill: #0000CC; font-size: 12px"> 220: Kreissegmente reagieren auf Anklicken!</text> 221:  222: 223:  224: <g id="tooltip"> 225: <rect id="ttr" x="0.00" y="0.00" rx="5.00" ry="5.00" width="100.00" 226: height="16.00" style="visibility: hidden"/> 227: <text id="ttt" x="0.00" y="0.00" style="visibility: hidden">dyn. Text</text> 228: </g> 229:  230: 231: </svg>

point_distance.svg

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:  8:  9: 10: 11: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 12: zoomAndPan="disable"> 13: 14: <title>SVG - Learning By Coding</title> 15: <desc>SVG-Spezifikation in Beispielen</desc> 16: 17: <defs> 18: 19: <style type="text/css"> 20: <![CDATA[ 21: 22: line 23: {


24: stroke-width: 1.5px; 25: } 26: 27: ]]> 28: </style> 29: 30: 31: <script type="text/javascript"> 32: <![CDATA[ 33: 34: function getLineLength(click_evt) 35: { 36: var line,l_x1,l_y1,l_x2,l_y2,l=0; 37: 38: line=click_evt.target; 39: l_x1=parseFloat(line.getAttribute("x1")); 40: l_y1=parseFloat(line.getAttribute("y1")); 41: l_x2=parseFloat(line.getAttribute("x2")); 42: l_y2=parseFloat(line.getAttribute("y2")); 43: 44: // Abstand der Punkte auf 6 Nachkommastellen gerundet 45: l=PointDistance(l_x1,l_y1,l_x2,l_y2).toFixed(6); 46: 47: alert("Abstand der Punkte\nP1("+l_x1+","+l_y1+") und P2(" 48: +l_x2+","+l_y2+")\n\n"+l+" px"); 49: } 50: 51: 52: function PointDistance(x1,y1,x2,y2) 53: { 54: // Abstand zweier Punkte bzw. Laenge einer Linie - Satz des Pythagoras 55: return Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)); 56: } 57: 58: ]]> 59: </script> 60: 61: </defs> 62: 63: <text x="30" y="30" style="fill: #000; font-size: 24px"> 64: Abstand zweier Punkte (Länge von Linien) 65: </text> 66: 67: <line x1="40" y1="60" x2="160" y2="90" style="stroke: #F00" 68: onclick="getLineLength(evt)"/> 69: <line x1="180" y1="100" x2="280" y2="50" style="stroke: #090" 70: onclick="getLineLength(evt)"/> 71: <line x1="290" y1="80" x2="430" y2="80" style="stroke: #00C" 72: onclick="getLineLength(evt)"/> 73: <line x1="460" y1="50" x2="460" y2="120" style="stroke: #000" 74: onclick="getLineLength(evt)"/> 75: 76: <text x="210" y="140">Linien anklicken!</text> 77: 78: </svg>

pointer-events.svg



6: 7:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px"> 15: Die Eigenschaft pointer-events</text> 16: 17: <text x="30" y="80" style="fill: #090; font-size: 18px; pointer-events: none"> 18: Dieser Text reagiert nicht (Wert none) auf den Mauszeiger (z. B. Markieren). 19: </text> 20: 21: <a xlink:href="http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty" 22: target="_top"> 23: <text x="30" y="120" style="fill: #F00; font-size: 18px">Mehr zu dieser 24: Eigenschaft in der Spezifikation ...</text> 25: </a> 26: 27: </svg>

polygon.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px">Element polygon</text> 15: 16: <polygon points="110,150,140,80,170,150,240,170,170,210,140,280,110,210,40,170" 17: style="fill: none; stroke: #00C; stroke-width: 1.5px"/> 18: 19: </svg>


polygon_area.svg

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:  8:  9: 10: 11: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 12: zoomAndPan="disable"> 13: 14: <title>SVG - Learning By Coding</title> 15: <desc>SVG-Spezifikation in Beispielen</desc> 16: 17: <defs> 18: 19: <style type="text/css"> 20: <![CDATA[ 21: 22: polygon 23: { 24: fill: #FFF; 25: stroke: #00C; 26: } 27: 28: ]]> 29: </style> 30: 31: 32: <script type="text/javascript"> 33: <![CDATA[ 34: 35: function PolygonArea(click_evt) 36: { 37: // Flaecheninhalt eines Polygons 38: var points,p_arr,n=0,area=0; 39: 40: points=click_evt.target.getAttribute("points"); 41: p_arr=points.split(","); 42: n=p_arr.length; 43: 44: for(i=0;i<n-2;i+=2)area+=Det(p_arr[i],p_arr[i+2],p_arr[i+1],p_arr[i+3]); 45: area+=Det(p_arr[n-2],p_arr[0],p_arr[n-1],p_arr[1]); 46: 47: return Math.abs(area/2); 48: } 49: 50: 51: function Det(a11,a12,a21,a22) 52: { 53: // Determinate einer quadratischen Matrix 54: return a11*a22-a12*a21;


55: } 56: 57: ]]> 58: </script> 59: 60: </defs> 61: 62: <text x="30" y="30" style="fill: #000; font-size: 24px"> 63: Polygonfläche berechnen 64: </text> 65: 66: <polygon points="79,72,45,55,45,89" onclick="alert(PolygonArea(evt)+' px^2')"/> 67: <polygon points="158,70,129,52,100,70,129,87" onclick="alert(PolygonArea(evt)+' px^2')"/> 68: <polygon points="222,71,206,52,179,60,179,82,206,90" onclick="alert(PolygonArea(evt)+' px^2')"/> 69: <polygon points="284,71,273,88,252,88,241,71,252,53,273,53" onclick="alert(PolygonArea(evt)+' px^2')"/> 70: 71: <text x="110" y="120">Objekte anklicken!</text> 72: 73: </svg>

polyline.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px">Element polyline</text> 15: 16: <polyline points="50,150,80,80,110,150,140,80,170,150,200,80" 17: style="fill: none; stroke: #00C; stroke-width: 1.5px"/> 18: 19: </svg>


pulldownmenue_d.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: onload="getSVGDoc(evt);createMenues()"> 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: rect.haupt 22: { 23: fill: #FFC; 24: stroke: #000; 25: stroke-width: 2px; 26: } 27: 28: rect.unter 29: { 30: fill: #EEF; 31: stroke: #000; 32: stroke-width: 1px; 33: } 34: 35: text.haupt 36: { 37: fill: #00C; 38: font-size: 12px; 39: text-anchor: middle; 40: pointer-events: none; 41: } 42: 43: text.unter 44: { 45: fill: #000; 46: font-size: 11px; 47: text-anchor: middle; 48: pointer-events: none; 49: } 50: 51: a text.unter 52: { 53: fill: #F00; 54: pointer-events: inherit; 55: } 56: 57: ]]> 58: </style>


59: 60: 61: <script type="text/javascript"> 62: <![CDATA[ 63: 64: var svgdoc,svgroot; 65: 66: 67: function getSVGDoc(load_evt) 68: { 69: svgdoc=load_evt.target.ownerDocument; 70: svgroot=svgdoc.documentElement; 71: } 72: 73: 74: function createMenues() 75: { 76: var menues,hlinks,target,menue_x,menue_y,menue_b,menue_h,haupt_out,haupt_over, unter_out,unter_over,dx,dy; 77: var haupt_g,haupt_r,haupt_t,haupt_txt,haupt_s1,haupt_s2,haupt_s3,haupt_s4; 78: var unter_g,unter_r,unter_t,unter_txt,unter_s1,unter_s2,unter_s3,unter_s4, unter_s5,unter_s6,unter_a; 79: 80: // Arrays fuer die Menuepunkte und die Links 81: menues=new Array(); 82: hlinks=new Array(); 83: 84: // Vorgaben fuer Positionen und Farben - Anfang 85: menue_x=20; // Menue x (erstes Rechteck) 86: menue_y=60; // Menue y (erstes Rechteck) 87: menue_b=100; // Breite der Rechtecke fuer Haupt- und Untermenues 88: menue_h=20; // Hoehe der Rechtecke fuer Haupt- und Untermenues 89: haupt_out="#FFC"; // Mouseout-Farbe der Hauptmenuepunkte (=Grundfarbe, siehe CSS-Klasse rect.haupt) 90: haupt_over="#FF0"; // Mouseover-Farbe der Hauptmenuepunkte 91: unter_out="#EEF"; // Mouseout-Farbe der Untermenuepunkte (=Grundfarbe, siehe CSS-Klasse rect.unter) 92: unter_over="#CFC"; // Mouseover-Farbe der Untermenuepunkte 93: dx=50; // x-Versatz der Menuetexte 94: dy=15; // y-Versatz der Menuetexte 95: target="_top"; // Linkziel 96: // Vorgaben fuer Positionen und Farben - Ende 97: 98: 99: // Menuetexte der n Menues und URLs der n Links festlegen - Anfang 100: // Schema: 101: // menues[0 bis n-1]=new Array( "Hauptmenuetext","Untermenuetext_1",...,"Untermenuetext_n"); 102: // Hier: 3 Hauptmenuepunkte mit 5/3/1 Untermenuepunkten 103: // hlinks[0 bis n-1]=new Array("url_1",...,"url_n"); 104: // wenn kein Link erscheinen soll, einen Leerstring "" angeben 105: // Hier: im 1. Untermenue ist Menuepunkt 4, im 2. Untermenue Menuepunkt 1 verlinkt 106: 107: menues[0]=new Array("Hauptmenü 1","Untermenü 1.1","Untermenü 1.2","Untermenü 1.3","Untermenü 1.4","Untermenü 1.5"); 108: hlinks[0]=new Array("","","","http://www.styleassistant.de",""); 109: menues[1]=new Array("Hauptmenü 2","Untermenü 2.1","Untermenü 2.2","Untermenü 2.3"); 110: hlinks[1]=new Array("http://www.datenverdrahten.de","",""); 111: menues[2]=new Array("Hauptmenü 3","Untermenü 3.1"); 112: hlinks[2]=new Array(""); 113: 114: // Menuetexte der n Menues und URLs der n Links festlegen - Ende 115: 116: 117: // Menuestruktur dynamisch aufbauen - Anfang 118: for(i=0;i<menues.length;i++) 119: { 120: // Hauptmenues mit Eintraegen erzeugen - Anfang 121: haupt_g=svgdoc.createElement("g"); 122: haupt_g.setAttribute("id","men"+parseInt(i+1)); 123: 124: haupt_r=svgdoc.createElement("rect"); 125: haupt_r.setAttribute("x",menue_x+i*menue_b); 126: haupt_r.setAttribute("y",menue_y); 127: haupt_r.setAttribute("width",menue_b); 128: haupt_r.setAttribute("height",menue_h);


129: haupt_r.setAttribute("class","haupt"); 130: 131: haupt_s1=svgdoc.createElement("set"); 132: haupt_s1.setAttribute("attributeName","fill"); 133: haupt_s1.setAttribute("attributeType","CSS"); 134: haupt_s1.setAttribute("to",haupt_over); 135: haupt_s1.setAttribute("begin","mouseover"); 136: 137: haupt_s2=svgdoc.createElement("set"); 138: haupt_s2.setAttribute("attributeName","fill"); 139: haupt_s2.setAttribute("attributeType","CSS"); 140: haupt_s2.setAttribute("to",haupt_over); 141: haupt_s2.setAttribute("begin","umen"+parseInt(i+1)+".mouseover"); 142: 143: haupt_s3=svgdoc.createElement("set"); 144: haupt_s3.setAttribute("attributeName","fill"); 145: haupt_s3.setAttribute("attributeType","CSS"); 146: haupt_s3.setAttribute("to",haupt_out); 147: haupt_s3.setAttribute("begin","mouseout"); 148: 149: haupt_s4=svgdoc.createElement("set"); 150: haupt_s4.setAttribute("attributeName","fill"); 151: haupt_s4.setAttribute("attributeType","CSS"); 152: haupt_s4.setAttribute("to",haupt_out); 153: haupt_s4.setAttribute("begin","umen"+parseInt(i+1)+".mouseout"); 154: 155: haupt_t=svgdoc.createElement("text"); 156: haupt_t.setAttribute("x",menue_x+i*menue_b+dx); 157: haupt_t.setAttribute("y",menue_y+dy); 158: haupt_t.setAttribute("class","haupt"); 159: haupt_txt=svgdoc.createTextNode(menues[i][0]); 160: 161: haupt_r.appendChild(haupt_s1); 162: haupt_r.appendChild(haupt_s2); 163: haupt_r.appendChild(haupt_s3); 164: haupt_r.appendChild(haupt_s4); 165: haupt_t.appendChild(haupt_txt); 166: haupt_g.appendChild(haupt_r); 167: haupt_g.appendChild(haupt_t); 168: // Hauptmenues mit Eintraegen erzeugen - Ende 169: 170: 171: // Gruppe fuer die Untermenuepunkte des i-ten Hauptmenues - Anfang 172: unter_g=svgdoc.createElement("g"); 173: unter_g.setAttribute("id","umen"+parseInt(i+1)); 174: unter_g.setAttribute("style","display: none"); 175: 176: unter_s1=svgdoc.createElement("set"); 177: unter_s1.setAttribute("attributeName","display"); 178: unter_s1.setAttribute("attributeType","CSS"); 179: unter_s1.setAttribute("to","block"); 180: unter_s1.setAttribute("begin","men"+parseInt(i+1)+".mouseover"); 181: 182: unter_s2=svgdoc.createElement("set"); 183: unter_s2.setAttribute("attributeName","display"); 184: unter_s2.setAttribute("attributeType","CSS"); 185: unter_s2.setAttribute("to","none"); 186: unter_s2.setAttribute("begin","men"+parseInt(i+1)+".mouseout"); 187: // Gruppe fuer die Untermenuepunkte des i-ten Hauptmenues - Ende 188: 189: 190: // Untermenuepunkte fuer das i-te Hauptmenue - Anfang 191: for(j=1;j<menues[i].length;j++) 192: { 193: unter_r=svgdoc.createElement("rect"); 194: unter_r.setAttribute("x",menue_x+i*menue_b); 195: unter_r.setAttribute("y",menue_y+j*menue_h); 196: unter_r.setAttribute("width",menue_b); 197: unter_r.setAttribute("height",menue_h); 198: unter_r.setAttribute("class","unter"); 199: if(hlinks[i][j-1]=="") unter_r.setAttribute("onclick","MenueAktion('"+parseInt(i+1)+"."+j+"')"); 200: 201: unter_s3=svgdoc.createElement("set"); 202: unter_s3.setAttribute("attributeName","fill"); 203: unter_s3.setAttribute("attributeType","CSS"); 204: unter_s3.setAttribute("to",unter_over); 205: unter_s3.setAttribute("begin","mouseover");


206: 207: unter_s4=svgdoc.createElement("set"); 208: unter_s4.setAttribute("attributeName","fill"); 209: unter_s4.setAttribute("attributeType","CSS"); 210: unter_s4.setAttribute("to",unter_out); 211: unter_s4.setAttribute("begin","mouseout"); 212: 213: unter_s5=svgdoc.createElement("set"); 214: unter_s5.setAttribute("attributeName","fill"); 215: unter_s5.setAttribute("attributeType","CSS"); 216: unter_s5.setAttribute("to",unter_over); 217: unter_s5.setAttribute("begin","link"+i.toString()+j.toString()+".mouseover"); 218: 219: unter_s6=svgdoc.createElement("set"); 220: unter_s6.setAttribute("attributeName","fill"); 221: unter_s6.setAttribute("attributeType","CSS"); 222: unter_s6.setAttribute("to",unter_out); 223: unter_s6.setAttribute("begin","link"+i.toString()+j.toString()+".mouseout"); 224: 225: unter_t=svgdoc.createElement("text"); 226: unter_t.setAttribute("x",menue_x+i*menue_b+dx); 227: unter_t.setAttribute("y",menue_y+j*menue_h+dy); 228: unter_t.setAttribute("class","unter"); 229: unter_txt=svgdoc.createTextNode(menues[i][j]); 230: 231: unter_a=svgdoc.createElement("a"); 232: unter_a.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href",hlinks[i][j-1]); 233: unter_a.setAttribute("target",target); 234: unter_a.setAttribute("id","link"+i.toString()+j.toString()); 235: 236: unter_a.appendChild(unter_t); 237: 238: unter_r.appendChild(unter_s3); 239: unter_r.appendChild(unter_s4); 240: unter_r.appendChild(unter_s5); 241: unter_r.appendChild(unter_s6); 242: unter_t.appendChild(unter_txt); 243: 244: unter_g.appendChild(unter_s1); 245: unter_g.appendChild(unter_s2); 246: unter_g.appendChild(unter_r); 247: if(hlinks[i][j-1])unter_g.appendChild(unter_a); 248: else unter_g.appendChild(unter_t); 249: haupt_g.appendChild(unter_g); 250: 251: } 252: // Untermenuepunkte fuer das i-te Hauptmenue - Ende 253: 254: // Hauptmenue mit Untermenues in den DOM-Baum einhaengen 255: svgroot.appendChild(haupt_g); 256: } 257: // Menuestruktur dynamisch aufbauen - Ende 258: } 259: 260: 261: function MenueAktion(men) 262: { 263: alert("Menüpunkt "+men+" wurde geklickt."); 264: } 265: 266: ]]> 267: </script> 268: 269: </defs> 270: 271: <text x="20" y="30" style="fill: #000; font-size: 24px"> 272: Pull-Down-Menü (dynamisch generierter SVG-Code)</text> 273: 274: <text x="20" y="220" style="fill: #F00"> 275: Hinweis: Die roten Menüpunkte sind verlinkt!</text> 276: 277: </svg>


pulldownmenue_s.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <style type="text/css"> 18: <![CDATA[ 19: 20: rect.haupt 21: { 22: fill: #FFC; 23: stroke: #000; 24: stroke-width: 2px; 25: } 26: 27: rect.unter 28: { 29: fill: #EEF; 30: stroke: #000; 31: stroke-width: 1px; 32: } 33: 34: text.haupt 35: { 36: fill: #00C; 37: font-size: 12px; 38: text-anchor: middle; 39: pointer-events: none; 40: } 41: 42: text.unter 43: { 44: fill: #000; 45: font-size: 11px; 46: text-anchor: middle; 47: pointer-events: none; 48: } 49: 50: a text.unter 51: { 52: fill: #F00; 53: pointer-events: inherit; 54: } 55: 56: ]]> 57: </style> 58:


59: 60: <script type="text/javascript"> 61: <![CDATA[ 62: 63: function MenueAktion(men) 64: { 65: alert("Menüpunkt "+men+" wurde geklickt."); 66: } 67: 68: ]]> 69: </script> 70: 71: </defs> 72: 73: <text x="20" y="30" style="fill: #000; font-size: 24px"> 74: Pull-Down-Menü (statischer SVG-Code)</text> 75: 76: <text x="20" y="220" style="fill: #F00"> 77: Hinweis: Die roten Menüpunkte sind verlinkt!</text> 78: 79:  80: <g id="men1"> 81:  82: <rect x="20" y="60" width="100" height="20" class="haupt"> 83: <set attributeName="fill" attributeType="CSS" to="#FF0" begin="mouseover"/> 84: <set attributeName="fill" attributeType="CSS" to="#FF0" begin="umen1.mouseover"/> 85: <set attributeName="fill" attributeType="CSS" to="#FFC" begin="mouseout"/> 86: <set attributeName="fill" attributeType="CSS" to="#FFC" begin="umen1.mouseout"/> 87: </rect> 88: <text x="70" y="75" class="haupt">Hauptmenü 1</text> 89: 90:  91: <g id="umen1" style="display: none"> 92: <set attributeName="display" attributeType="CSS" to="block" begin="men1.mouseover"/> 93: <set attributeName="display" attributeType="CSS" to="none" begin="men1.mouseout"/> 94: 95: <rect x="20" y="80" width="100" height="20" class="unter" onclick="MenueAktion('1.1')"> 96: <set attributeName="fill" attributeType="CSS" to="#CFC" begin="mouseover"/> 97: <set attributeName="fill" attributeType="CSS" to="#EEF" begin="mouseout"/> 98: </rect> 99: <text x="70" y="95" class="unter">Untermenü 1.1</text> 100: 101: <rect x="20" y="100" width="100" height="20" class="unter" onclick="MenueAktion('1.2')"> 102: <set attributeName="fill" attributeType="CSS" to="#CFC" begin="mouseover"/> 103: <set attributeName="fill" attributeType="CSS" to="#EEF" begin="mouseout"/> 104: </rect> 105: <text x="70" y="115" class="unter">Untermenü 1.2</text> 106: 107: <rect x="20" y="120" width="100" height="20" class="unter" onclick="MenueAktion('1.3')"> 108: <set attributeName="fill" attributeType="CSS" to="#CFC" begin="mouseover"/> 109: <set attributeName="fill" attributeType="CSS" to="#EEF" begin="mouseout"/> 110: </rect> 111: <text x="70" y="135" class="unter">Untermenü 1.3</text> 112: 113: <rect x="20" y="140" width="100" height="20" class="unter"><!— onclick="MenueAktion('1.4')" --> 114: <set attributeName="fill" attributeType="CSS" to="#CFC" begin="mouseover"/> 115: <set attributeName="fill" attributeType="CSS" to="#EEF" begin="mouseout"/> 116: <set attributeName="fill" attributeType="CSS" to="#CFC" begin="link14.mouseover"/> 117: <set attributeName="fill" attributeType="CSS" to="#EEF" begin="link14.mouseout"/> 118: </rect> 119: <a id="link14" xlink:href="http://www.styleassistant.de" target="_top"> 120: <text x="70" y="155" class="unter">Untermenü 1.4</text> 121: </a> 122: 123: <rect x="20" y="160" width="100" height="20" class="unter" onclick="MenueAktion('1.5')"> 124: <set attributeName="fill" attributeType="CSS" to="#CFC" begin="mouseover"/> 125: <set attributeName="fill" attributeType="CSS" to="#EEF" begin="mouseout"/> 126: </rect> 127: <text x="70" y="175" class="unter">Untermenü 1.5</text> 128: </g> 129: </g>


130: 131: 132:  133: <g id="men2"> 134:  135: <rect x="120" y="60" width="100" height="20" class="haupt"> 136: <set attributeName="fill" attributeType="CSS" to="#FF0" begin="mouseover"/> 137: <set attributeName="fill" attributeType="CSS" to="#FF0" begin="umen2.mouseover"/> 138: <set attributeName="fill" attributeType="CSS" to="#FFC" begin="mouseout"/> 139: <set attributeName="fill" attributeType="CSS" to="#FFC" begin="umen2.mouseout"/> 140: </rect> 141: <text x="170" y="75" class="haupt">Hauptmenü 2</text> 142: 143:  144: <g id="umen2" style="display: none"> 145: <set attributeName="display" attributeType="CSS" to="block" begin="men2.mouseover"/> 146: <set attributeName="display" attributeType="CSS" to="none" begin="men2.mouseout"/> 147: 148: <rect x="120" y="80" width="100" height="20" class="unter"><!— onclick="MenueAktion('2.1')" --> 149: <set attributeName="fill" attributeType="CSS" to="#CFC" begin="mouseover"/> 150: <set attributeName="fill" attributeType="CSS" to="#EEF" begin="mouseout"/> 151: <set attributeName="fill" attributeType="CSS" to="#CFC" begin="link21.mouseover"/> 152: <set attributeName="fill" attributeType="CSS" to="#EEF" begin="link21.mouseout"/> 153: </rect> 154: <a id="link21" xlink:href="http://www.datenverdrahten.de" target="_top"> 155: <text x="170" y="95" class="unter">Untermenü 2.1</text> 156: </a> 157: 158: <rect x="120" y="100" width="100" height="20" class="unter" onclick="MenueAktion('2.2')"> 159: <set attributeName="fill" attributeType="CSS" to="#CFC" begin="mouseover"/> 160: <set attributeName="fill" attributeType="CSS" to="#EEF" begin="mouseout"/> 161: </rect> 162: <text x="170" y="115" class="unter">Untermenü 2.2</text> 163: 164: <rect x="120" y="120" width="100" height="20" class="unter" onclick="MenueAktion('2.3')"> 165: <set attributeName="fill" attributeType="CSS" to="#CFC" begin="mouseover"/> 166: <set attributeName="fill" attributeType="CSS" to="#EEF" begin="mouseout"/> 167: </rect> 168: <text x="170" y="135" class="unter">Untermenü 2.3</text> 169: </g> 170: </g> 171: 172: 173:  174: <g id="men3"> 175:  176: <rect x="220" y="60" width="100" height="20" class="haupt"> 177: <set attributeName="fill" attributeType="CSS" to="#FF0" begin="mouseover"/> 178: <set attributeName="fill" attributeType="CSS" to="#FF0" begin="umen3.mouseover"/> 179: <set attributeName="fill" attributeType="CSS" to="#FFC" begin="mouseout"/> 180: <set attributeName="fill" attributeType="CSS" to="#FFC" begin="umen3.mouseout"/> 181: </rect> 182: <text x="270" y="75" class="haupt">Hauptmenü 3</text> 183: 184:  185: <g id="umen3" style="display: none"> 186: <set attributeName="display" attributeType="CSS" to="block" begin="men3.mouseover"/> 187: <set attributeName="display" attributeType="CSS" to="none" begin="men3.mouseout"/> 188: 189: <rect x="220" y="80" width="100" height="20" class="unter" onclick="MenueAktion('3.1')"> 190: <set attributeName="fill" attributeType="CSS" to="#CFC" begin="mouseover"/> 191: <set attributeName="fill" attributeType="CSS" to="#EEF" begin="mouseout"/> 192: </rect> 193: <text x="270" y="95" class="unter">Untermenü 3.1</text> 194: </g> 195: </g> 196: 197: </svg>


posturl.svg

1: <?xml version="1.0" encoding="UTF-8" 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:  8:  9: 10: 11: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 12: 13: <title>ASV-Funktion postURL()</title> 14: <desc>SVG-Datenbankzugriff mittels ASV-Funktion postURL() und PHP</desc> 15: 16: <defs> 17: <script type="text/javascript"> 18: <![CDATA[ 19: 20: var svgdoc; 21: svgdoc=document.documentElement; 22: 23: // Version des SVG Viewers ausgeben 24: svgdoc.getElementById("version").firstChild.nodeValue+=getSVGViewerVersion(); 25: 26: function TextHover(obj,color,decor) 27: { 28: obj.target.style.setProperty("fill",color); 29: obj.target.style.setProperty("text-decoration",decor); 30: } 31: 32: function HoleDaten(suchtext) 33: { 34: postURL("posturl.php",suchtext,callback); 35: } 36: 37: function callback(urlRequestStatus) 38: { 39: /* 40: Rueckgabewerte des Objektes urlRequestStatus: 41: - urlRequestStatus.success; 42: - urlRequestStatus.contentType; 43: - urlRequestStatus.content; 44: */ 45: 46: var ausgabe; 47: 48: if(urlRequestStatus.success) 49: {


50: ausgabe=urlRequestStatus.content.split("|"); 51: 52: svgdoc.getElementById("ausgabe0").childNodes.item(0).nodeValue=ausgabe[0]; 53: svgdoc.getElementById("ausgabe1").childNodes.item(0).nodeValue=ausgabe[1]; 54: svgdoc.getElementById("url").setAttribute("xlink:href",ausgabe[1]); 55: 56: if(ausgabe[2]) 57: { 58: svgdoc.getElementById("bild").setAttribute("xlink:href", "bilder/"+ausgabe[2].toLowerCase()+".jpg"); 59: } 60: else 61: { 62: svgdoc.getElementById("bild").setAttribute("xlink:href",""); 63: } 64: } 65: } 66: 67: ]]> 68: </script> 69: </defs> 70: 71: <text x="30" y="30" style="fill: #000; font-size: 24px">SVG-Datenbankzugriff mittels ASV-Funktion postURL() und PHP</text> 72: <text x="30" y="60" style="fill: #00C; font-size: 14px">Magazine vom Software & Support-Verlag:</text> 73: 74:  75: <a xlink:href="" onclick="HoleDaten('entwickler')"><text x="30" y="80" style="fill: #00C" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#00C','none')">Der Entwickler</text></a> 76: <a xlink:href="" onclick="HoleDaten('dotnet')"><text x="30" y="100" style="fill: #00C" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#00C','none')">dot.net Magazin</text></a> 77: <a xlink:href="" onclick="HoleDaten('javamag')"><text x="30" y="120" style="fill: #00C" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#00C','none')">Java Magazin</text></a> 78: <a xlink:href="" onclick="HoleDaten('linuxent')"><text x="30" y="140" style="fill: #00C" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#00C','none')">Linux Enterprise</text></a> 79: <a xlink:href="" onclick="HoleDaten('phpmag')"><text x="30" y="160" style="fill: #00C" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#00C','none')">PHP Magazin</text></a> 80: <a xlink:href="" onclick="HoleDaten('xmlmag')"><text x="30" y="180" style="fill: #00C" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#00C','none')">XML & Web Services Magazin</text></a> 81: <a xlink:href="" onclick="HoleDaten('NoName')"><text x="30" y="200" style="fill: #00C" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#00C','none')">[NoName]</text></a> 82: 83: <line x1="30" y1="220" x2="730" y2="220" style="stroke: #CCC; stroke-width: 1px"/> 84: 85:  86: <text x="30" y="250" style="fill: #090; font-size: 18px">Thema: </text> 87: <text x="30" y="280" style="fill: #090; font-size: 18px">Website: </text> 88: 89:  90: <text id="ausgabe0" x="125" y="250" style="fill: #F00; font-size: 18px"> </text> 91: <a id="url" xlink:href="" target="magsite"><text id="ausgabe1" x="125" y="280" style="fill: #F00; font-size: 18px" onmouseover="TextHover(evt,'#00C','underline')" onmouseout="TextHover(evt,'#F00','none')"> </text></a> 92: 93: <line x1="30" y1="300" x2="730" y2="300" style="stroke: #CCC; stroke-width: 1px"/> 94: 95: <text x="30" y="330" style="fill: #000; font-size: 14px">Ein PHP-Script holt die Daten aus einer MySQL-DB und übergibt diese via JavaScript an das SVG-Dokument.</text> 96: 97:  98: <image id="bild" x="630" y="160" xlink:href="" width="99" height="140"/> 99: 100: <a xlink:href="http://www.et.fh-merseburg.de/person/meinike/"><text x="565" y="360" onmouseover="TextHover(evt,'#F00','underline')" onmouseout="TextHover(evt,'#000','none')">© by Dr. Thomas Meinike 2002</text></a> 101: 102: <text id="version" x="30" y="360">SVGViewerVersion: </text> 103: 104: </svg>


primitive_rose.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <text x="20" y="30" style="fill: #000; font-size: 24px"> 16: <text>Rose</text></text> 17: 18: <text x="100" y="50" transform="rotate(90,100,50)" style="font-family: monospace; 19: font-size: 36px"><tspan style="fill: #F00; font-family: serif">@</tspan><tspan 20: style="fill: #090">-->-->--</tspan> 21: </text> 22: 23: <text x="130" y="50" transform="rotate(270,235,145)"> 24: Sorry, I'm a coder, not an artist ;-)</text> 25: 26: </svg>


radialGradient.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <defs> 13: 14:  15: <radialGradient id="radgra1"> 16: <stop offset="0%" style="stop-color: #FFF"/> 17: <stop offset="60%" style="stop-color: #FF9"/> 18: <stop offset="100%" style="stop-color: #F00"/> 19: </radialGradient> 20: 21:  22: <radialGradient id="radgra2" cx="0.6" cy="0.7"> 23: <stop offset="0%" style="stop-color: #FFF"/> 24: <stop offset="60%" style="stop-color: #FF9"/> 25: <stop offset="100%" style="stop-color: #F00"/> 26: </radialGradient> 27: 28:  29: <radialGradient id="radgra3" fx="0.8" fy="0.9"> 30: <stop offset="0%" style="stop-color: #FFF"/> 31: <stop offset="60%" style="stop-color: #FF9"/> 32: <stop offset="100%" style="stop-color: #F00"/> 33: </radialGradient> 34: 35:  36: <radialGradient id="radgra4" cx="0.1" cy="0.2" fx="0.8" fy="0.9"> 37: <stop offset="0%" style="stop-color: #FFF"/> 38: <stop offset="60%" style="stop-color: #FF9"/> 39: <stop offset="100%" style="stop-color: #F00"/> 40: </radialGradient> 41: 42: 


43: <radialGradient id="radgra5" cx="0.1" cy="0.2" fx="0.8" fy="0.9" 44: gradientTransform="skewX(45)"> 45: <stop offset="0%" style="stop-color: #FFF"/> 46: <stop offset="60%" style="stop-color: #FF9"/> 47: <stop offset="100%" style="stop-color: #F00"/> 48: </radialGradient> 49: 50:  51: <radialGradient id="radgra6" cx="0.1" cy="0.2" fx="0.8" fy="0.9" 52: gradientTransform="skewY(60) rotate(-45)"> 53: <stop offset="0%" style="stop-color: #FFF"/> 54: <stop offset="60%" style="stop-color: #FF9"/> 55: <stop offset="100%" style="stop-color: #F00"/> 56: </radialGradient> 57: 58: </defs> 59: 60: <title>SVG - Learning By Coding</title> 61: <desc>SVG-Spezifikation in Beispielen</desc> 62: <text x="20" y="30" style="fill: #000; font-size: 24px"> 63: Elemente radialGradient | stop</text> 64: 65: <circle cx="100" cy="100" r="50" style="fill: url(#radgra1)"/> 66: <circle cx="250" cy="100" r="50" style="fill: url(#radgra2)"/> 67: <circle cx="100" cy="250" r="50" style="fill: url(#radgra3)"/> 68: <circle cx="250" cy="250" r="50" style="fill: url(#radgra4)"/> 69: <circle cx="100" cy="400" r="50" style="fill: url(#radgra5)"/> 70: <circle cx="250" cy="400" r="50" style="fill: url(#radgra6)"/> 71: 72: </svg>

rcc-simplebutton.svg

1: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?> 2:  6: 7:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" version="1.2" 11: xmlns:ev="http://www.w3.org/2001/xml-events" 12: xmlns:svglbc="http://www.datenverdrahten.de/svglbc"> 13: 14: <title>SVG - Learning By Coding</title> 15: <desc>SVG-Spezifikation in Beispielen</desc> 16: 17: <defs> 18:


19: <script type="text/javascript"> 20: <![CDATA[ 21: 22: function SetOp(evt,op) 23: { 24: var obj,cnodes,i; 25: obj=evt.target.parentNode; 26: cnodes=obj.childNodes; 27: for(i=0;i<cnodes.length;i++) 28: { 29: if(cnodes.item(i).nodeType==1)cnodes.item(i).setAttribute("opacity",op); 30: } 31: } 32: 33: ]]> 34: </script> 35: 36: </defs> 37: 38: <extensionDefs namespace="http://www.datenverdrahten.de/svglbc"> 39: 40: <elementDef name="simplebutton"> 41: 42: <prototype> 43: 44:  45: <g> 46: <rect id="unten"/> 47: <rect id="oben"/> 48: <text id="txt"/> 49: </g> 50: 51: </prototype> 52: 53: <script ev:event="SVGBindEnd" type="text/javascript"> 54: <![CDATA[ 55: 56: var ver=getSVGViewerVersion(); 57: 58: if(ver.indexOf("Adobe")!=-1 && ver.indexOf("6.0")!=-1) 59: { 60: var svgdoc,el,st,ru,ro,tx,tn,x,y,bb,bh,bf,th,tf,bt,at; 61: 62: // Daten zum aktuellen simplebutton-Element abfragen 63: el=evt.target; 64: st=el.shadowTree; 65: 66: ru=st.getElementById("unten"); 67: ro=st.getElementById("oben"); 68: tx=st.getElementById("txt"); 69: 70: x=el.getAttribute("x"); // Button-x 71: y=el.getAttribute("y"); // Button-y 72: bb=el.getAttribute("bb"); // Button-Breite 73: bh=el.getAttribute("bh"); // Button-Hoehe 74: bf=el.getAttribute("bf"); // Button-Farbe 75: th=el.getAttribute("th"); // Text-Hoehe 76: tf=el.getAttribute("tf"); // Text-Farbe 77: bt=el.getAttribute("bt"); // Button-Text 78: at=el.getAttribute("at"); // Alert-Text (onclick) 79: 80: // Rechteck - oben 81: ro.setAttribute("x",x); 82: ro.setAttribute("y",y); 83: ro.setAttribute("width",bb); 84: ro.setAttribute("height",bh); 85: ro.setAttribute("fill",bf); 86: ro.setAttribute("rx","5"); 87: ro.setAttribute("onclick","alert('"+at+"')"); 88: ro.setAttribute("onmouseover","SetOp(evt,0.5)"); 89: ro.setAttribute("onmouseout","SetOp(evt,1.0)"); 90: 91: // Rechteck - unten 92: ru.setAttribute("x",parseFloat(x)+parseFloat(bb)/35); 93: ru.setAttribute("y",parseFloat(y)+parseFloat(bb)/35); 94: ru.setAttribute("width",bb); 95: ru.setAttribute("height",bh); 96: ru.setAttribute("rx","5");


97: ru.setAttribute("fill","#CCC"); 98: 99: // Textinhalt 100: svgdoc=el.ownerDocument; 101: tn=svgdoc.createTextNode(bt); 102: tx.appendChild(tn); 103: tx.setAttribute("fill",tf); 104: tx.setAttribute("font-size",th); 105: tx.setAttribute("text-anchor","middle"); 106: tx.setAttribute("pointer-events","none"); 107: tx.setAttribute("x",parseFloat(x)+parseFloat(bb)/2); 108: tx.setAttribute("y",parseFloat(y)+parseFloat(bh)/2+parseFloat(th)/3); 109: } 110: 111: ]]> 112: </script> 113: 114: </elementDef> 115: 116: </extensionDefs> 117: 118: <text x="20" y="30" style="fill: #000; font-size: 24px"> 119: RCC - Rendering Custom Content (ASV 6.0)</text> 120: <text x="20" y="50">[sonst erscheint keine Ausgabe]</text> 121: <a xlink:href="bilder/rcc-simplebutton.gif" target="svgbox"> 122: <text x="350" y="50" style="fill: #F00">Ergebnis als Rastergrafik ... 123: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseover"/> 124: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseout"/> 125: </text> 126: </a> 127: 128:  129: <svglbc:simplebutton x="20" y="110" bb="100" bh="50" bf="#FCC" 130: tf="#000" th="12" bt="Text 1" at="Hallo Button 1!"/> 131: <svglbc:simplebutton x="170" y="90" bb="180" bh="90" bf="#CFC" 132: tf="#00C" th="36" bt="Text 2" at="Hallo Button 2!"/> 133: <svglbc:simplebutton x="100" y="230" bb="150" bh="80" bf="#CCF" 134: tf="#C00" th="24" bt="Text 3" at="Hallo Button 3!"/> 135: 136: </svg>

rect.svg


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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px">Element rect</text> 15: 16: <rect x="20" y="70" width="150" height="75" style="fill: #090"/> 17: <rect x="200" y="70" width="150" height="75" style="fill: none; 18: stroke: #F00; stroke-width: 2px"/> 19: <rect x="20" y="180" width="150" height="75" style="fill: #EEE; 20: stroke: #090; stroke-width: 2px; stroke-dasharray: 5,5"/> 21: <rect x="200" y="180" width="150" rx="5" ry="5" height="75" 22: style="fill: #FFC; stroke: #00C; stroke-width: 2px"/> 23: <rect x="20" y="290" width="150" height="75" rx="25" ry="50" 24: style="fill: #EFF; stroke: #F90; stroke-width: 2px"/> 25: <rect x="200" y="290" width="150" rx="50" ry="25" height="75" 26: style="fill: #FFF; stroke: #999; stroke-width: 2px"/> 27: <rect x="20" y="400" width="150" height="75" rx="50" ry="50" 28: style="fill: #FFE; stroke: #00F; stroke-width: 2px"/> 29: <rect x="200" y="400" width="150" rx="100" ry="100" height="75" 30: style="fill: #FEE; stroke: #000; stroke-width: 2px"/> 31: 32: </svg>

rotate_rect.svg

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:  8:  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: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc,b=0,e=0,r=0; 22: 23: 24: function getSVGDoc(load_evt) 25: {


26: svgdoc=load_evt.target.ownerDocument; 27: } 28: 29: 30: function ZaehleBegin(begin_evt) 31: { 32: b++; 33: svgdoc.getElementById("b").firstChild.data=b; 34: } 35: 36: 37: function ZaehleEnd(end_evt) 38: { 39: e++; 40: svgdoc.getElementById("e").firstChild.data=e; 41: } 42: 43: 44: function ZaehleRepeat(repeat_evt) 45: { 46: r++; 47: svgdoc.getElementById("r").firstChild.data=r; 48: } 49: 50: ]]> 51: </script> 52: 53: </defs> 54: 55: <text x="20" y="30" style="fill: #000; font-size: 24px">Rotierendes Rechteck</text> 56: 57: <rect x="100" y="100" width="80" height="40" style="fill: #00C"/> 58: 59: <rect x="100" y="100" width="80" height="40" 60: style="fill: #FF0; stroke: #000; stroke-width: 1px"> 61: 62: <animateTransform attributeName="transform" attributeType="XML" type="rotate" 63: from="0,140,120" to="360,140,120" begin="2s" dur="1.5s" repeatCount="10" 64: onbegin="ZaehleBegin()" onend="ZaehleEnd()" onrepeat="ZaehleRepeat()"/> 65: 66: </rect> 67: 68: <circle cx="139" cy="119" r="1" style="fill: #F00"/> 69: 70: <text x="70" y="180">begin: <tspan id="b">0</tspan> | 71: end: <tspan id="e">0</tspan> | repeat: <tspan id="r">0</tspan></text> 72: 73: </svg>


rrggbb-farben.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: onload="getSVGDoc(evt);RRGGBBColors(5)" onzoom="ZoomControl()"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: 16: <defs> 17: 18: <script xlink:href="tool_tip.js" type="text/javascript"/> 19: 20: <script type="text/javascript"> 21: <![CDATA[ 22: 23: function RRGGBBColors(kantenlaenge) 24: { 25: var hexpaare,aktfarbe,xstart,ystart,links,oben,i,j,k,x,y,z; 26: 27: hexpaare=new Array("00","11","22","33","44","55","66","77","88","99", 28: "AA","BB","CC","DD","EE","FF"); 29: aktfarbe=new Array(4096); 30: rgbfarbe=new Array(4096); 31: xstart=20; 32: ystart=50; 33: 34: // Array aktfarbe[] mit den Hex-Farbwerten fuellen 35: z=0; // Zaehlvariable 0 bis 4095 fuer 4096 Farben 36: 37: for(i=0;i<16;i++) 38: { 39: for(j=0;j<16;j++) 40: { 41: for(k=0;k<16;k++) 42: { 43: aktfarbe[z]="#"+hexpaare[i]+hexpaare[j]+hexpaare[k]; 44: rgbfarbe[z]="rgb("+parseInt("0x"+hexpaare[i],16)+","; 45: rgbfarbe[z]+=parseInt("0x"+hexpaare[j],16)+","; 46: rgbfarbe[z]+=parseInt("0x"+hexpaare[k],16)+")"; 47: z++; 48: } 49: } 50: } 51: 52: // Farbquadrate mit Tooltips ausgeben 53: z=0; // Zaehlvariable 0 bis 4095 fuer 4096 Farben 54: 55: for(y=0;y<32;y++) 56: { 57: oben=y*kantenlaenge+ystart; 58:


59: for(x=0;x<128;x++) 60: { 61: links=x*kantenlaenge+xstart; 62: 63: rectobj=svgdoc.createElement("rect"); 64: rectobj.setAttribute("x",links); 65: rectobj.setAttribute("y",oben); 66: rectobj.setAttribute("width",kantenlaenge); 67: rectobj.setAttribute("height",kantenlaenge); 68: rectobj.style.setProperty("fill",aktfarbe[z]); 69: rectobj.setAttribute("onmousemove", 70: "ShowTooltip(evt,'"+aktfarbe[z]+" | "+rgbfarbe[z]+"')"); 71: 72: svgroot.appendChild(rectobj); 73: z++; 74: } 75: } 76: 77: // Tooltip in den Vordergrund bringen 78: ttobj=svgdoc.getElementById("tooltip"); 79: svgroot.removeChild(ttobj); 80: svgroot.appendChild(ttobj); 81: } 82: 83: ]]> 84: </script> 85: 86: </defs> 87: 88: <rect x="0" y="0" width="100%" height="100%" style="fill: #FFF" 89: onmouseover="HideTooltip()"/> 90: 91: <text x="20" y="25" style="fill: #000; font-size: 24px"> 92: #RRGGBB-Farben dynamisch erzeugen (4096)</text> 93: 94: <text x="20" y="40" style="fill: #00C"> 95: Kombinationen aus 00, 11, 22, 33, 44, 55, 66, 77, 88, 99, 96: AA, BB, CC, DD, EE, FF</text> 97: 98:  99: <g id="tooltip" style="pointer-events: none"> 100: <rect id="ttr" x="0" y="0" rx="5" ry="5" width="100" height="16" 101: style="visibility: hidden"/> 102: <text id="ttt" x="0" y="0" style="visibility: hidden">dyn. Text</text> 103: </g> 104: 105: </svg>


rss-newsfeed.svg

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:  8:  9: 10: 11: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 12: onload="setTimeout('HoleDaten()',2000)"> 13: 14: <title>SVG - Learning By Coding</title> 15: <desc>SVG-Spezifikation in Beispielen</desc> 16: 17: <defs> 18: 19: <style type="text/css"> 20: <![CDATA[ 21: 22: a text 23: { 24: fill: #00C; 25: } 26: 27: ]]> 28: </style> 29: 30: <script type="text/javascript"> 31: <![CDATA[ 32: 33: var svgdoc=svgDocument; 34: var svgroot=document.documentElement; 35: var xmldoc,anzahl,titel,datum,links; 36: var d=new Array(),l=new Array(),t=new Array(); 37: var txt,textelement,textknoten,aelement; 38: 39: svgroot.addEventListener("mouseover",LinkOver,false); 40: svgroot.addEventListener("mouseout",LinkOut,false); 41: 42: 43: function LinkOver(mouseover_evt) 44: { 45: // Funktion fuer mouseover-Events bei Texten in a-Elementen 46:


47: var objekt=mouseover_evt.target; 48: 49: if(objekt.parentNode.tagName=="a") 50: { 51: objekt.style.setProperty("fill","#F00"); 52: objekt.style.setProperty("text-decoration","underline"); 53: } 54: } 55: 56: 57: function LinkOut(mouseout_evt) 58: { 59: // Funktion fuer mouseout-Events bei Texten in a-Elementen 60: 61: var objekt=mouseout_evt.target; 62: 63: if(objekt.parentNode.tagName=="a") 64: { 65: objekt.style.setProperty("fill","#00C"); 66: objekt.style.setProperty("text-decoration","none"); 67: } 68: } 69: 70: 71: function HoleDaten() 72: { 73: getURL("rss-newsfeed.php",callback); 74: } 75: 76: 77: function callback(urlRequestStatus) 78: { 79: if(urlRequestStatus.success && urlRequestStatus.content!="Error!") 80: { 81: xmldoc=parseXML(urlRequestStatus.content).documentElement; 82: 83: if(xmldoc) 84: { 85: // Auslesen von item/title, item/dc:date und item/link 86: anzahl=xmldoc.getElementsByTagName("item").length; 87: titel=xmldoc.getElementsByTagName("title"); 88: datum=xmldoc.getElementsByTagName("dc:date"); 89: links=xmldoc.getElementsByTagName("link"); 90: 91: // Beschraenkung auf max. 15 items (wegen Timing-Problemen) 92: if(anzahl>15)anzahl=15; 93: 94: for(i=0;i<anzahl;i++) 95: { 96: d[i]=datum.item(i).firstChild.nodeValue; 97: l[i]=links.item(i+1).firstChild.nodeValue; 98: t[i]=titel.item(i+1).firstChild.nodeValue; 99: } 100: 101: Ausgabe(); 102: } 103: } 104: else 105: { 106: alert("Bei der Abfrage des RSS-Feeds\nist ein Fehler aufgetreten!"); 107: } 108: } 109: 110: 111: function Ausgabe() 112: { 113: for(i=0;i<anzahl;i++) 114: { 115: if(i<9)txt="[0"+parseInt(i+1)+"] "+d[i]; 116: else txt="["+parseInt(i+1)+"] "+d[i]; 117: textelement=svgdoc.createElement("text"); 118: textelement.setAttribute("x","30"); 119: textelement.setAttribute("y",70+i*20); 120: textknoten=svgdoc.createTextNode(txt); 121: textelement.appendChild(textknoten); 122: svgroot.appendChild(textelement); 123: 124: txt=l[i];


125: aelement=svgdoc.createElement("a"); 126: aelement.setAttributeNS("http://www.w3.org/1999/xlink","href",txt); 127: aelement.setAttribute("target","_top"); 128: 129: txt=t[i]; 130: textelement=svgdoc.createElement("text"); 131: textelement.setAttribute("x","130"); 132: textelement.setAttribute("y",70+i*20); 133: textknoten=svgdoc.createTextNode(txt); 134: textelement.appendChild(textknoten); 135: aelement.appendChild(textelement); 136: svgroot.appendChild(aelement); 137: } 138: } 139: 140: ]]> 141: </script> 142: 143: </defs> 144: 145: <a xlink:href="http://www.w3.org/Graphics/SVG/Overview.rss" target="_top"> 146: <text x="20" y="30" style="fill: #000; font-size: 24px"> 147: Abfrage des SVG-RSS-Newsfeeds vom W3C 148: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 149: <set attributeName="text-decoration" attributeType="CSS" to="underline" 150: begin="mouseover"/> 151: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 152: <set attributeName="text-decoration" attributeType="CSS" to="none" 153: begin="mouseout"/> 154: </text> 155: </a> 156: 157: <line x1="122" y1="60" x2="122" y2="355"/> 158: 159: <a xlink:href="rss-newsfeed_php.txt" target="_top"> 160: <text x="30" y="390" style="fill: #000; font-size: 11px"> 161: PHP-Script zur Datenabfrage 162: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 163: <set attributeName="text-decoration" attributeType="CSS" to="underline" 164: begin="mouseover"/> 165: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 166: <set attributeName="text-decoration" attributeType="CSS" to="none" 167: begin="mouseout"/> 168: </text> 169: </a> 170: 171: <a xlink:href="" onclick="location.reload()"> 172: <text x="255" y="390" style="fill: #000; font-size: 11px"> 173: [Bei Timing-Problemen bitte Dokument neu laden!] 174: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 175: <set attributeName="text-decoration" attributeType="CSS" to="underline" 176: begin="mouseover"/> 177: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 178: <set attributeName="text-decoration" attributeType="CSS" to="none" 179: begin="mouseout"/> 180: </text> 181: </a> 182: 183: </svg>

rss-newsfeed.php zu rss-newsfeed.svg 1: <?php 2: 3: // ---------------------------------------------- 4: // rss-newsfeed.php holt SVG-RSS-Newsfeed vom W3C 5: // ---------------------------------------------- 6: // by Dr. Thomas Meinike 09/03 7: // SVG - Learning By Coding 8: // http://www.datenverdrahten.de/svglbc/ 9: // ---------------------------------------------- 10: 11: // abzufragende URL 12: $url="http://www.w3.org/Graphics/SVG/Overview.rss";


13: 14: // Daten abfragen 15: $fp=@file($url); 16: 17: if($fp) 18: { 19: $xmlcontent=implode("",$fp); 20: // ab PHP 4.3.0: $xmlcontent=file_get_contents($url); 21: 22: // XML-Code ausgeben 23: header("Content-type: application/xml"); 24: print $xmlcontent; // Verarbeitung des XML-Inhalts im SVG-Dokument rss-newsfeed.svg 25: } 26: else 27: { 28: header("Content-type: text/plain"); 29: print "Error!"; 30: } 31: 32: ?>

save_disable.svg

1: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?> 2: <?AdobeSVGViewer save="disable"?> 3: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 4: "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [ 5: <!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink"> 6: ]> 7: 8:  9:  10: 11: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 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.info1 22: { 23: fill: #00C; 24: font-family: Arial, Helvetica, sans-serif; 25: font-size: 14px; 26: } 27: 28: text.info2 29: { 30: fill: #F00; 31: font-family: "Courier New", Courier, monospace; 32: font-size: 18px;


33: font-weight: bold; 34: } 35: 36: text.info3 37: { 38: fill: #000; 39: font-family: Arial, Helvetica, sans-serif; 40: font-size: 14px; 41: } 42: 43: line 44: { 45: stroke: #F00; 46: stroke-width: 5px; 47: } 48: 49: ]]> 50: </style> 51: 52: </defs> 53: 54: <text x="30" y="30" style="fill: #000; font-size: 24px"> 55: Speichern im ASV verhindern</text> 56: 57: <text x="45" y="70" class="info1"> 58: Der Adobe SVG Viewer kennt eine spezielle Processing Instruction,</text> 59: <text x="45" y="90" class="info1"> 60: um die Einträge zum Speichern im Kontextmenü abzuschalten:</text> 61: <text x="45" y="120" class="info2"> 62: <?AdobeSVGViewer save="disable"?></text> 63: <text x="35" y="160" class="info3"> 64: In den anderen SVG-Beispielen wird diese Technik aber nicht verwendet ;-).</text> 65: 66: <line x1="35" y1="55" x2="35" y2="125"/> 67: 68: <text x="35" y="200" class="info1"> 69: Alternativ kann man auch den Inhalt des Kontextmenüs anpassen, siehe:</text> 70: 71: <a xlink:href="../?doc=contextMenu" target="_top"> 72: <text x="35" y="220" class="info1"> 73: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 74: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 75: contextMenu.svg<tspan style="fill: #00C">.</tspan> 76: </text> 77: </a> 78: 79: </svg>


save_snapshot.svg

1: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?> 2: <?AdobeSVGViewer save="snapshot"?> 3: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 4: "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [ 5: <!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink"> 6: ]> 7: 8:  9:  10: 11: 12: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 13: 14: <title>SVG - Learning By Coding</title> 15: <desc>SVG-Spezifikation in Beispielen</desc> 16: 17: <defs> 18: 19: <style type="text/css"> 20: <![CDATA[ 21: 22: text.info1 23: { 24: fill: #00C; 25: font-family: Arial, Helvetica, sans-serif; 26: font-size: 14px; 27: } 28: 29: text.info2 30: { 31: fill: #F00; 32: font-family: "Courier New", Courier, monospace; 33: font-size: 18px; 34: font-weight: bold; 35: } 36: 37: line 38: {


39: stroke: #F00; 40: stroke-width: 5px; 41: } 42: 43: ]]> 44: </style> 45: 46: <script type="text/javascript"> 47: <![CDATA[ 48: 49: var svgdoc,svgroot,check=false; 50: svgdoc=svgDocument; 51: svgroot=svgdoc.rootElement; 52: 53: 54: function NewCircles() 55: { 56: var newobj,colors,i; 57: colors=new Array ("#FF0","#FC0","#F69","#F00","#9F9","#090","#39F","#00C","#CCC","#000"); 58: 59: if(!check) 60: { 61: for(i=0;i<10;i++) 62: { 63: newobj=svgdoc.createElement("circle"); 64: newobj.setAttribute("cx",200+20*i); 65: newobj.setAttribute("cy","160"); 66: newobj.setAttribute("r","5"); 67: newobj.setAttribute("fill",colors[i]); 68: svgroot.appendChild(newobj); 69: } 70: check=true; 71: } 72: else alert("Objekte wurden bereits erzeugt!"); 73: } 74: 75: 76: function GetCircleCode() 77: { 78: var ausgabe="",i; 79: 80: if(check) 81: { 82: for(i=0;i<10;i++) 83: { 84: ausgabe+="\n"+printNode(svgdoc.getElementsByTagName("circle").item(i)); 85: } 86: } 87: else ausgabe="Es wurde noch kein neuer Code erzeugt!"; 88: 89: alert(ausgabe); 90: } 91: 92: ]]> 93: </script> 94: 95: </defs> 96: 97: <text x="30" y="30" style="fill: #000; font-size: 24px"> 98: Dynamischen Code im ASV speichern (Kontextmenü)</text> 99: 100: <text x="45" y="70" class="info1"> 101: Der Adobe SVG Viewer kennt eine spezielle Processing Instruction, um dynamisch</text> 102: <text x="45" y="90" class="info1"> 103: generierten SVG-Code beim Speichern über die rechte Maustaste zu erhalten:</text> 104: <text x="90" y="120" class="info2"> 105: <?AdobeSVGViewer save="snapshot"?></text> 106: 107: <line x1="35" y1="55" x2="35" y2="125"/> 108: 109: <a xlink:href="" onclick="NewCircles()"> 110: <text x="90" y="210" class="info1"> 111: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 112: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 113: Neue Objekte (Kreise) erzeugen 114: </text> 115: </a>


116: 117: <a xlink:href="" onclick="GetCircleCode()"> 118: <text x="320" y="210" class="info1"> 119: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 120: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 121: Generierten Code anzeigen 122: </text> 123: </a> 124: 125: </svg>

schieberegler.svg

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:  8:  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: <filter id="flt"> 19: <feGaussianBlur in="SourceAlpha" stdDeviation="0.5" result="blur"/> 20: <feSpecularLighting in="blur" surfaceScale="5" specularConstant="0.5" 21: specularExponent="10" result="specOut" style="lighting-color: #FFF"> 22: <fePointLight x="-5000" y="-5000" z="5000"/> 23: </feSpecularLighting> 24: <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut2"/> 25: <feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic" 26: k1="0" k2="1" k3="1" k4="0" result="litPaint"/> 27: </filter> 28: 29: <style type="text/css"> 30: <![CDATA[ 31: 32: rect 33: { 34: filter: url(#flt); 35: } 36: 37: g[id="colout"] rect 38: { 39: filter: none; 40: } 41: 42: text.nope 43: { 44: pointer-events: none;


45: } 46: 47: ]]> 48: </style> 49: 50: <script type="text/javascript"> 51: <![CDATA[ 52: 53: var svgdoc,startr=false,startg=false,startb=false,startx=50,endex=255; 54: var slr,slg,slb,txr,txg,txb,rgb,trg,thx,r=0,g=0,b=0; 55: 56: 57: function getSVGDoc(load_evt) 58: { 59: svgdoc=load_evt.target.ownerDocument; 60: 61: slr=svgdoc.getElementById("sliderr").getElementsByTagName("rect").item(1); 62: txr=svgdoc.getElementById("sliderr").getElementsByTagName("text").item(1); 63: 64: slg=svgdoc.getElementById("sliderg").getElementsByTagName("rect").item(1); 65: txg=svgdoc.getElementById("sliderg").getElementsByTagName("text").item(1); 66: 67: slb=svgdoc.getElementById("sliderb").getElementsByTagName("rect").item(1); 68: txb=svgdoc.getElementById("sliderb").getElementsByTagName("text").item(1); 69: 70: rgb=svgdoc.getElementById("colout").getElementsByTagName("rect").item(0); 71: trg=svgdoc.getElementById("colout").getElementsByTagName("text").item(0); 72: thx=svgdoc.getElementById("colout").getElementsByTagName("text").item(1); 73: } 74: 75: 76: function MoveSliderR(mousemove_event) 77: { 78: r=mousemove_event.clientX-startx; 79: if(r>255)r=255; 80: 81: if(startr && r>=0 && r<=endex) 82: { 83: slr.setAttribute("x",startx+r); 84: txr.firstChild.data=r; 85: setRGB(); 86: } 87: } 88: 89: 90: function MoveSliderG(mousemove_event) 91: { 92: g=mousemove_event.clientX-startx; 93: if(g>255)g=255; 94: 95: if(startg && g>=0 && g<=endex) 96: { 97: slg.setAttribute("x",startx+g); 98: txg.firstChild.data=g; 99: setRGB(); 100: } 101: } 102: 103: 104: function MoveSliderB(mousemove_event) 105: { 106: b=mousemove_event.clientX-startx; 107: if(b>255)b=255; 108: 109: if(startb && b>=0 && b<=endex) 110: { 111: slb.setAttribute("x",startx+b); 112: txb.firstChild.data=b; 113: setRGB(); 114: } 115: } 116: 117: 118: function setRGB() 119: { 120: r=parseInt(txr.firstChild.data); 121: g=parseInt(txg.firstChild.data); 122: b=parseInt(txb.firstChild.data);


123: 124: rgbfarbe="rgb("+r+","+g+","+b+")"; 125: 126: // RGB-Werte zur Anzeige in Hex-Schreibweise umwandeln 127: hex=rgbfarbe.substring(4,rgbfarbe.length-1); 128: hex=hex.split(","); 129: hr=parseInt(hex[0]).toString(16).toUpperCase(); 130: hr=(hr.length==1)?"0"+hr:hr; 131: hg=parseInt(hex[1]).toString(16).toUpperCase(); 132: hg=(hg.length==1)?"0"+hg:hg; 133: hb=parseInt(hex[2]).toString(16).toUpperCase(); 134: hb=(hb.length==1)?"0"+hb:hb; 135: hexfarbe="#"+hr+hg+hb; // #RRGGBB 136: 137: rgb.style.setProperty("fill",rgbfarbe); 138: trg.firstChild.data=rgbfarbe; 139: thx.firstChild.data="hex: "+hexfarbe; 140: } 141: 142: ]]> 143: </script> 144: 145: </defs> 146: 147: <text x="20" y="30" style="fill: #000; font-size: 24px"> 148: Schieberegler zur Auswahl von Farben</text> 149: 150: <g id="sliderr" onmousedown="startr=true;MoveSliderR(evt)" onmouseup="startr=false" 151: onmousemove="MoveSliderR(evt)" onclick="MoveSliderR(evt)"> 152: <text class="nope" x="30" y="110">R</text> 153: <rect x="50" y="100" height="10" width="260" style="fill: #F00"/> 154: <rect x="50" y="95" height="20" width="5" style="fill: #DDD"/> 155: <text class="nope" x="320" y="110">0</text> 156: </g> 157: 158: <g id="sliderg" onmousedown="startg=true;MoveSliderG(evt)" onmouseup="startg=false" 159: onmousemove="MoveSliderG(evt)" onclick="MoveSliderG(evt)"> 160: <text class="nope" x="30" y="160">G</text> 161: <rect x="50" y="150" height="10" width="260" style="fill: #0F0"/> 162: <rect x="50" y="145" height="20" width="5" style="fill: #DDD"/> 163: <text class="nope" x="320" y="160">0</text> 164: </g> 165: 166: <g id="sliderb" onmousedown="startb=true;MoveSliderB(evt)" onmouseup="startb=false" 167: onmousemove="MoveSliderB(evt)" onclick="MoveSliderB(evt)"> 168: <text class="nope" x="30" y="210">B</text> 169: <rect x="50" y="200" height="10" width="260" style="fill: #00F"/> 170: <rect x="50" y="195" height="20" width="5" style="fill: #DDD"/> 171: <text class="nope" x="320" y="210">0</text> 172: </g> 173: 174: <g id="colout"> 175: <rect x="360" y="130" width="50" height="50" style="fill: #000; stroke: #DDD"/> 176: <text x="430" y="150">rgb(0,0,0)</text> 177: <text x="430" y="170">hex: #000000</text> 178: </g> 179: 180: </svg>

script.svg


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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="Hallo()"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <script type="text/javascript"> 18: <![CDATA[ 19: 20: function Hallo() 21: { 22: alert("Der Zugriff auf den internen\nJavaScript-Block funktioniert."); 23: } 24: 25: ]]> 26: </script> 27: 28: </defs> 29: 30: <text x="20" y="30" style="fill: #000; font-size: 24px"> 31: Element script mit interner JavaScript-Funktion 32: </text> 33: 34: </svg>

set.svg

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:  8:  9:


10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px">Element set</text> 15: 16: <rect x="50" y="50" width="100" height="80" style="fill: #F00"> 17: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseover"/> 18: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseout"/> 19: <set attributeName="width" attributeType="XML" to="200" begin="mouseover"/> 20: <set attributeName="width" attributeType="XML" to="100" begin="mouseout"/> 21: </rect> 22: 23: <text x="20" y="160" style="fill: #000; font-size: 12px">onmouseover –› 24: Rechteck blau und 200px breit, onmouseout –› Rechteck rot und 100px breit</text> 25: 26: <circle id="kreis1" cx="50" cy="230" r="20" style="fill: #00C"/> 27: 28: <circle id="kreis2" cx="150" cy="230" r="20" style="fill: #FF0"> 29: <set begin="kreis1.click" attributeName="fill" attributeType="CSS" to="#090"/> 30: <set begin="click" attributeName="fill" attributeType="CSS" to="#FF0"/> 31: </circle> 32: 33: <text x="20" y="280" style="fill: #000; font-size: 12px">onclick linker Kreis –› 34: rechter kreis grün, onclick rechter Kreis –› rechter Kreis gelb</text> 35: 36: <a xlink:href="http://www.w3.org/Graphics/SVG/Overview.htm8" target="_top"> 37: <text x="30" y="340" style="font-size: 18px; fill: #00C">Link zur SVG-Seite des W3C 38: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 39: <set attributeName="text-decoration" attributeType="CSS" to="underline" begin="mouseover"/> 40: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 41: <set attributeName="text-decoration" attributeType="CSS" to="none" begin="mouseout"/> 42: </text> 43: </a> 44: 45: <text x="20" y="370" style="fill: #000; font-size: 12px">Link mit Hover-Effekt 46: (Änderung von Farbe und Unterstreichung)</text> 47: 48: </svg>

simple_shadows.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <text x="30" y="30" style="fill: #000; font-size: 24px">


16: Schatten durch Verschiebung</text> 17: 18:  20: 21: <rect x="37" y="77" width="150" height="75" 22: style="fill: #CCC"/> 23: 24:  26: 27: <rect x="230" y="70" width="150" height="75" 28: style="fill: #CCC" transform="translate(7,7)"/> 29: 30:  31: 32: <rect x="30" y="70" width="150" height="75" 33: style="fill: #CFC"/> 34: 35: <rect x="230" y="70" width="150" height="75" 36: style="fill: #FCF"/> 37: 38: </svg>

stroke-properties.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <text x="20" y="30" style="fill: #000; font-size: 24px"> 16: Eigenschaften für Umrandungen</text> 17: 18:  19: <rect x="30" y="60" width="150" height="80"


20: style="fill: none; stroke: #00C; stroke-width: 10px"/> 21: <text x="30" y="160">stroke: #00C</text> 22: <text x="30" y="175">stroke-width: 10px</text> 23: 24:  25: <rect x="200" y="60" width="150" height="80" 26: style="fill: none; stroke: #00C; stroke-width: 10px; stroke-linejoin: round"/> 27: <text x="200" y="160">stroke-linejoin: round</text> 28: 29: <rect x="370" y="60" width="150" height="80" 30: style="fill: none; stroke: #00C; stroke-width: 10px; stroke-linejoin: bevel"/> 31: <text x="370" y="160">stroke-linejoin: bevel</text> 32: 33:  34:  35: <rect x="30" y="200" width="150" height="80" 36: style="fill: none; stroke: #00C; stroke-width: 2px; stroke-dasharray: 5,10"/> 37: <text x="30" y="300">stroke-width: 2px</text> 38: <text x="30" y="315">stroke-dasharray: 5,10</text> 39: 40:  41: <rect x="200" y="200" width="150" height="80" 42: style="fill: none; stroke: #00C; stroke-width: 2px; 43: stroke-dasharray: 5,10,10; stroke-dashoffset: 50"/> 44: <text x="200" y="300">stroke-dasharray: 5,10,10</text> 45: <text x="200" y="315">stroke-dashoffset: 50</text> 46: 47:  48: <rect x="370" y="200" width="150" height="80" 49: style="fill: none; stroke: #00C; stroke-width: 2px; stroke-opacity: 0.3"/> 50: <text x="370" y="300">stroke-opacity: 0.3</text> 51: 52:  53: <text x="30" y="350">weitere Eigenschaften:</text> 54: <text x="30" y="370"> 55: stroke-linecap: butt, round, square, inherit (initial butt)</text> 56: <text x="30" y="390">stroke-miterlimit: wert >=1 (initial 4)</text> 57: 58: </svg>

style.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title>


13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <style type="text/css"> 18: <![CDATA[ 19: 20: circle 21: { 22: fill: #FF0; 23: stroke: #00C; 24: stroke-width: 2px; 25: } 26: 27: #abc123 28: { 29: fill: #00C; 30: opacity: 0.5; 31: } 32: 33: .xyz 34: { 35: font-family: "Courier New", Courier, monospace; 36: font-size: 20px; 37: font-weight: bold; 38: fill: #F00; 39: } 40: 41: ]]> 42: </style> 43: 44: </defs> 45: 46: <text x="20" y="30" style="fill: #000; font-size: 24px">Element style</text> 47: 48: <circle cx="100" cy="100" r="30"/> 49: <rect id="abc123" x="50" y="150" width="150" height="75"/> 50: <text class="xyz" x="50" y="260"> 51: Kreis, Rechteck und Text wurden mit CSS formatiert. 52: </text> 53: 54: </svg>

style_object.svg



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: text 22: { 23: fill: #00C; 24: font-size: 12px; 25: } 26: 27: tspan 28: { 29: fill: #F00; 30: font-size: 12px; 31: } 32: 33: ]]> 34: </style> 35: 36: 37: <script type="text/javascript"> 38: <![CDATA[ 39: 40: var svgdoc,svgroot; 41: 42: 43: function getSVGDoc(load_evt) 44: { 45: svgdoc=load_evt.target.ownerDocument; 46: svgroot=svgdoc.documentElement; 47: } 48: 49: 50: function DoStyles(x) 51: { 52: var textobj,styleobj; 53: 54: textobj=svgdoc.getElementById("testtext"); 55: styleobj=textobj.style; 56: 57: if(x==0)alert(styleobj); 58: if(x==1)alert(styleobj.length); 59: if(x==2)alert("item(0) = "+styleobj.item(0)+"\nitem(1) = "+styleobj.item(1)); 60: if(x==3)alert("fill: "+styleobj.getPropertyValue("fill")); 61: if(x==4)styleobj.setProperty("text-decoration","underline"); 62: if(x==5)styleobj.removeProperty("text-decoration"); 63: if(x==6)alert(textobj.style.cssText); 64: if(x==7)alert(textobj.getAttribute("style")); 65: if(x==8)textobj.setAttribute("style","fill: #F00; font-size: 18px"); 66: } 67: 68: ]]> 69: </script> 70: 71: </defs> 72: 73: <text x="20" y="30" style="fill: #000; font-size: 24px"> 74: DOM-Methoden für dynamischen CSS-Zugriff</text> 75: 76: <text id="testtext" x="20" y="75" style="font-size: 18px; fill: #090"> 77: ein mit CSS formatierter Text</text> 78: 79: <a xlink:href="" onclick="DoStyles(0)"> 80: <text x="30" y="100"> 81: <tspan>style</tspan> [auf Style-Objekt zugreifen] 82: </text> 83: </a> 84: 85: <a xlink:href="" onclick="DoStyles(1)"> 86: <text x="30" y="120"> 87: <tspan>length</tspan> [Anzahl der Eigenschaften]


88: </text> 89: </a> 90: 91: <a xlink:href="" onclick="DoStyles(2)"> 92: <text x="30" y="140"> 93: <tspan>item(i)</tspan> [einzelne Eigenschaften abfragen] 94: </text> 95: </a> 96: 97: <a xlink:href="" onclick="DoStyles(3)"> 98: <text x="30" y="160"> 99: <tspan>getPropertyValue()</tspan> [einzelne Eigenschaftswerte abfragen] 100: </text> 101: </a> 102: 103: <a xlink:href="" onclick="DoStyles(4)"> 104: <text x="30" y="180"> 105: <tspan>setProperty()</tspan> [Eigenschaften und Werte setzen/ändern] 106: </text> 107: </a> 108: 109: <a xlink:href="" onclick="DoStyles(5)"> 110: <text x="30" y="200"> 111: <tspan>removeProperty()</tspan> [Eigenschaften entfernen] 112: </text> 113: </a> 114: 115: <a xlink:href="" onclick="DoStyles(6)"> 116: <text x="30" y="220"> 117: <tspan>cssText</tspan> [style-Attribut als Zeichenkette lesen] 118: </text> 119: </a> 120: 121: <a xlink:href="" onclick="DoStyles(7)"> 122: <text x="30" y="240"> 123: <tspan>getAttribute("style")</tspan> [style-Attribut als Zeichenkette lesen] 124: </text> 125: </a> 126: 127: <a xlink:href="" onclick="DoStyles(8)"> 128: <text x="30" y="260"> 129: <tspan>setAttribute("style","...")</tspan> [style-Attribut neu zuweisen] 130: </text> 131: </a> 132: 133: </svg>

supershapes.svg


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:  8:  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: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc,svgroot,x=0,y=0,np=1000,faktor=100,xversatz=280,yversatz=180; 22: 23: 24: function getSVGDoc(load_evt) 25: { 26: svgdoc=load_evt.target.ownerDocument; 27: svgroot=svgdoc.documentElement; 28: } 29: 30: 31: function SuperShapeEval(m,n1,n2,n3,phi) 32: { 33: var r,t1,t2,a=1,b=1; 34: 35: t1=Math.pow(Math.abs(Math.cos(m*phi/4)/a),n2); 36: t2=Math.pow(Math.abs(Math.sin(m*phi/4)/b),n3); 37: 38: r=Math.pow(t1+t2,1/n1); 39: if(Math.abs(r)==0) 40: { 41: x=0; 42: y=0; 43: } 44: else 45: { 46: r=1/r; 47: x=r*Math.cos(phi); 48: y=r*Math.sin(phi); 49: } 50: 51: x=xversatz+x*faktor; 52: y=yversatz+y*faktor; 53: return x.toString()+","+y.toString()+" "; 54: } 55: 56: 57: function SuperShapeDraw(m,n1,n2,n3,z,col) 58: { 59: var zpi,punkte="",elemobj; 60: zpi=z*Math.PI; 61: 62: // Polygon-Wertepaare berechnen 63: for(i=0;i<=np;i++) 64: { 65: phi=i*zpi/np; 66: punkte+=SuperShapeEval(m,n1,n2,n3,phi); 67: } 68: 69: // vorheriges Polygon entfernen 70: if(svgroot.lastChild.tagName=="polygon") 71: svgroot.removeChild(svgroot.lastChild); 72: 73: // neues Polygon erzeugen 74: elemobj=svgdoc.createElement("polygon"); 75: elemobj.setAttribute("points",punkte); 76: elemobj.setAttribute("stroke",col); 77: elemobj.setAttribute("stroke-width","1.2px"); 78: elemobj.setAttribute("fill","none");


79: svgroot.appendChild(elemobj); 80: } 81: 82: ]]> 83: </script> 84: 85: </defs> 86: 87: <text x="20" y="30" style="fill: #000; font-size: 24px"> 88: Supershapes-Plotter</text> 89: 90: <a xlink:href="" onclick="SuperShapeDraw(5,1,1,1,2,'#FC0')"> 91: <text x="20" y="80" style="fill: #00C; font-size: 16px">Figur 1 zeichnen 92: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 93: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 94: </text> 95: </a> 96: <text x="20" y="100" style="fill: #000; font-size: 12px"> 97: m=5, n1=n2=n3=1, 2π</text> 98: 99: <a xlink:href="" onclick="SuperShapeDraw(5,0.1,1.7,1.7,2,'#F00')"> 100: <text x="20" y="130" style="fill: #00C; font-size: 16px">Figur 2 zeichnen 101: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 102: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 103: </text> 104: </a> 105: <text x="20" y="150" style="fill: #000; font-size: 12px"> 106: m=5, n1=0.1, n2=n3=1.7, 2π</text> 107: 108: <a xlink:href="" onclick="SuperShapeDraw(6,0.3,0.3,0.3,2,'#090')"> 109: <text x="20" y="180" style="fill: #00C; font-size: 16px">Figur 3 zeichnen 110: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 111: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 112: </text> 113: </a> 114: <text x="20" y="200" style="fill: #000; font-size: 12px"> 115: m=6, n1=n2=n3=0.3, 2π</text> 116: 117: <a xlink:href="" onclick="SuperShapeDraw(1/6,0.3,0.3,0.3,12,'#00C')"> 118: <text x="20" y="230" style="fill: #00C; font-size: 16px">Figur 4 zeichnen 119: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 120: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 121: </text> 122: </a> 123: <text x="20" y="250" style="fill: #000; font-size: 12px"> 124: m=1/6, n1=n2=n3=0.3, 12π</text> 125: 126: <a xlink:href="" onclick="SuperShapeDraw(19/6,0.3,0.3,0.3,12,'#000')"> 127: <text x="20" y="280" style="fill: #00C; font-size: 16px">Figur 5 zeichnen 128: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 129: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 130: </text> 131: </a> 132: <text x="20" y="300" style="fill: #000; font-size: 12px"> 133: m=19/6, n1=n2=n3=0.3, 12π</text> 134: 135: <a xlink:href="http://astronomy.swin.edu.au/~pbourke/curves/supershape/" target="_top"> 136: <text x="20" y="350" style="fill: #00C; font-size: 12px"> 137: Code adapted from http://astronomy.swin.edu.au/~pbourke/curves/supershape/ 138: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 139: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 140: </text> 141: </a> 142: 143: </svg>


svg_geruest.svg

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:  8:  9: 10:  13: 14: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 15: 16: <title>SVG - Learning By Coding</title> 17: <desc>SVG-Spezifikation in Beispielen</desc> 18: 19: <defs> 20: 21: <style type="text/css"> 22: <![CDATA[ 23: /* interne CSS-Definitionen */ 24: ]]> 25: </style> 26: 27: <script type="text/javascript"> 28: <![CDATA[ 29: /* interne Script-Definitionen */ 30: ]]> 31: </script> 32: 33:  36: 37:  38: 39: </defs> 40: 41:  42: 43: <text x="20" y="30" style="fill: #000; font-size: 24px"> 44: Elemente svg | title | desc | defs | style | script 45: </text> 46: 47: </svg>


svg_in_svg.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: id="aussen"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: 16: <defs> 17: 18: <script type="text/javascript"> 19: <![CDATA[ 20: 21: function checkObj(click_evt) 22: { 23: var objekt; 24: 25: // inneres SVG-Objekt 26: objekt=click_evt.target.parentNode; 27: alert("Tagname: "+objekt.tagName+"\nID: "+objekt.getId()); 28: 29: // aeusseres SVG-Objekt (Root-Objekt) 30: objekt=click_evt.target.ownerDocument.documentElement; 31: //oder click_evt.target.ownerDocument.rootElement; 32: alert("Tagname: "+objekt.tagName+"\nID: "+objekt.getId()); 33: } 34: 35: ]]> 36: </script> 37: 38: </defs> 39: 40: <text x="20" y="30" style="fill: #000; font-size: 24px"> 41: SVG in SVG verschachteln</text> 42: 43: <rect x="20" y="50" width="300" height="200" 44: style="fill: #EEE; stroke: #000; stroke-width: 2px"/> 45: 46: <svg id="innen"> 47: <rect x="40" y="70" width="150" height="80" 48: style="fill: #FFC; stroke: #00C; stroke-width: 2px" onclick="checkObj(evt)"/> 49: <text x="40" y="170">Kleines Rechteck anklicken!</text> 50: </svg> 51: 52: </svg>


svgdomscripting.svg

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: 5:  8: 9:  10:  11: 12: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 13: onload="Init(evt)" onzoom="ZoomControl()"> 14: 15: <title>SVG - Learning By Coding</title> 16: <desc>SVG-Spezifikation in Beispielen</desc> 17: 18: <defs> 19: 20: <style type="text/css"> 21: <![CDATA[ 22: /* interne CSS-Definitionen */ 23: 24: .info 25: { 26: fill: #000; 27: font-size: 24px; 28: } 29: 30: a text 31: { 32: fill: #F00; 33: font-size: 12px; 34: } 35: 36: tspan 37: { 38: fill: #000; 39: font-size: 14px; 40: } 41: 42: ]]> 43: </style>


44: 45: <script type="text/javascript"> 46: <![CDATA[ 47: /* interne Script-Definitionen */ 48: 49: // globale Variablen 50: var svgdoc,svgroot,coordsout,timeout; 51: 52: 53: function Init(load_evt) 54: { 55: svgdoc=load_evt.target.ownerDocument; 56: svgroot=svgdoc.documentElement; 57: svgroot.addEventListener("mousemove",Coords,false); 58: coordsout=svgdoc.getElementById("coordsout"); 59: timeout=svgdoc.getElementById("timeout"); 60: Uhrzeit(); 61: } 62: 63: 64: function getElementsLength(elem) 65: { 66: var obj,objlength; 67: obj=svgdoc.getElementById("rechtecke").getElementsByTagName(elem); 68: objlength=obj.length; 69: alert("Gruppe mit id=\"rechtecke\"\nAnzahl "+elem+"-Elemente: "+objlength); 70: } 71: 72: 73: function ElementInfo(click_evt) 74: { 75: var attr,attrstr="",prevsib="",nextsib=""; 76: attr=click_evt.target.attributes; 77: for(i=0;i<attr.length;i++)attrstr+="\n ("+i+") "+attr.item(i).nodeName+" : "+attr.item(i).nodeValue; 78: if(click_evt.target.previousSibling)prevsib=click_evt.target.previousSibling+" – nodeType: "+click_evt.target.previousSibling.nodeType; 79: else prevsib="nicht vorhanden"; 80: if(click_evt.target.nextSibling)nextsib=click_evt.target.nextSibling+" – nodeType: "+click_evt.target.nextSibling.nodeType; 81: else nextsib="nicht vorhanden"; 82: alert("Ereignis: (evt): "+click_evt+" (evt.type): "+click_evt.type+"\n\nAusloeser: (evt.target): "+click_evt.target+"\nTag-Name (evt.target.tagName): "+click_evt.target.tagName+"\n\nEltern-Element (evt.target.parentNode): "+click_evt.target.parentNode+"\nTag-Name (evt.target.parentNode.tagName): "+click_evt.target.parentNode.tagName+"\n\nKind-Knoten (evt.target.childNodes.length): "+click_evt.target.childNodes.length+"\n\nAttribute (evt.target.attributes): "+attr+"\nAnzahl (evt.target.attributes.length): "+attr.length+"\n\n item(i) nodeValue : nodeName"+attrstr+"\n\npreviousSibling: "+prevsib+"\nnextSibling: "+nextsib); 83: } 84: 85: 86: function setCSSProperty(objid,prop,val) 87: { 88: var obj,objstyle,curval; 89: obj=svgdoc.getElementById(objid); 90: objstyle=obj.style; 91: curval=objstyle.getPropertyValue("fill"); 92: alert("Aktueller Wert\nfill: "+curval); 93: objstyle.setProperty(prop,val); 94: curval=objstyle.getPropertyValue("fill"); 95: alert("Neuer Wert\nfill: "+curval); 96: } 97: 98: 99: function setElementsStyle(elem,prop,val) 100: { 101: var obj,objlength,objstyle; 102: obj=svgroot.getElementById("rechtecke").getElementsByTagName(elem); 103: objlength=obj.length; 104: for(var i=0;i<objlength;i++) 105: { 106: objstyle=obj.item(i).style; 107: objstyle.setProperty(prop,val); 108: }


109: } 110: 111: 112: function getAttrById(objid,attr) 113: { 114: var obj,attrval; 115: obj=svgdoc.getElementById(objid); 116: attrval=obj.getAttribute(attr); 117: alert("Attribut: "+attr+"\nWert: "+attrval); 118: } 119: 120: 121: function setAttrById(objid,attr,attrval) 122: { 123: var obj; 124: obj=svgdoc.getElementById(objid); 125: obj.setAttribute(attr,attrval); 126: } 127: 128: 129: function setAttrByTagName(elem,objitem,attr,attrval) 130: { 131: var obj; 132: obj=svgdoc.getElementById("rechtecke").getElementsByTagName(elem); 133: obj.item(objitem).setAttribute(attr,attrval); 134: } 135: 136: 137: function getTextValue(parentid,childelem,node) 138: { 139: var parentobj,childobj,textnode,textval; 140: parentobj=svgdoc.getElementById(parentid); 141: childobj=parentobj.getElementsByTagName(childelem); 142: if(childobj.item(node)) 143: { 144: textnode=childobj.item(node).childNodes.item(0); 145: // oder textnode=childobj.item(node).firstChild; 146: textval=textnode.data; 147: alert(textval); 148: } 149: else alert("Textobjekt nicht verfügbar."); 150: } 151: 152: 153: function setTextValue(parentid,childelem,node,textval) 154: { 155: var parentobj,childobj,textnode; 156: parentobj=svgdoc.getElementById(parentid); 157: childobj=parentobj.getElementsByTagName(childelem); 158: if(childobj.item(node)) 159: { 160: textnode=childobj.item(node).childNodes.item(0); 161: // oder textnode=childobj.item(node).firstChild; 162: childobj.item(node).style.setProperty("fill","#F90"); 163: textnode.data=textval; 164: } 165: else alert("Textobjekt nicht verfügbar."); 166: } 167: 168: 169: function getTextLength(parentid,childelem,node) 170: { 171: var parentobj,childobj,textlength; 172: parentobj=svgdoc.getElementById(parentid); 173: childobj=parentobj.getElementsByTagName(childelem); 174: if(childobj.item(node)) 175: { 176: textlength=childobj.item(node).getComputedTextLength(); 177: alert("Textlänge: "+textlength+" Pixel"); 178: } 179: else alert("Textobjekt nicht verfügbar."); 180: } 181: 182: 183: function setHover(overout_evt,flag) 184: { 185: var obj,objstyle,fillcol,textdecor; 186: obj=overout_evt.target;


187: objstyle=obj.style; 188: if(flag==1) 189: { 190: fillcol="#00C"; 191: textdecor="underline"; 192: } 193: else if(flag==0) 194: { 195: fillcol="#F00"; 196: textdecor="none"; 197: } 198: objstyle.setProperty("fill",fillcol); 199: objstyle.setProperty("text-decoration",textdecor); 200: } 201: 202: 203: function newElement(elem,attr1,attr2,attr3,attr4,attr5,attr6) 204: { 205: var newobj; 206: newobj=svgdoc.createElement(elem); 207: newobj.setAttribute("x1",attr1); 208: newobj.setAttribute("y1",attr2); 209: newobj.setAttribute("x2",attr3); 210: newobj.setAttribute("y2",attr4); 211: newobj.setAttribute("style","fill:"+attr5+";stroke:"+attr5+"; stroke-width:"+attr6); 212: newobj.setAttribute("onclick","ElementInfo(evt)"); 213: svgroot.appendChild(newobj); 214: } 215: 216: 217: function newTextNode(objid,elem,attr1,attr2,textval) 218: { 219: var parentobj,newobj,newtextnode; 220: parentobj=svgdoc.getElementById(objid); 221: newobj=svgdoc.createElement(elem); 222: newobj.setAttribute("x",attr1); 223: newobj.setAttribute("dy",attr2); 224: newtextnode=svgdoc.createTextNode(textval); 225: parentobj.appendChild(newobj).appendChild(newtextnode); 226: } 227: 228: 229: function ShowTooltip(e,txt) 230: { 231: var ttrelem,ttrelem,posx,posy,curtrans,ctx,cty; 232: ttrelem=svgdoc.getElementById("ttr"); 233: tttelem=svgdoc.getElementById("ttt"); 234: tttelem.childNodes.item(0).data=txt; 235: posx=e.clientX; 236: posy=e.clientY; 237: curtrans=svgroot.currentTranslate; 238: ctx=curtrans.x; 239: cty=curtrans.y; 240: ttrelem.setAttribute("x",posx-ctx); 241: ttrelem.setAttribute("y",posy-cty-20); 242: tttelem.setAttribute("x",posx-ctx+5); 243: tttelem.setAttribute("y",posy-cty-8); 244: ttrelem.setAttribute("width",tttelem.getComputedTextLength()); 245: tttelem.setAttribute("style","fill: #0000CC; font-size: 11px; visibility: visible"); 246: ttrelem.setAttribute("style","fill: #FFFFCC; stroke: #000000; stroke-width: 0.5px; visibility: visible"); 247: } 248: 249: 250: function HideTooltip() 251: { 252: var ttrelem,ttrelem; 253: ttrelem=svgdoc.getElementById("ttr"); 254: tttelem=svgdoc.getElementById("ttt"); 255: ttrelem.setAttribute("style","visibility: hidden"); 256: tttelem.setAttribute("style","visibility: hidden"); 257: } 258: 259: 260: function ZoomControl() 261: {


262: var curzoom; 263: curzoom=svgroot.currentScale; 264: svgdoc.getElementById("tooltip").setAttribute ("transform","scale("+1/curzoom+")"); 265: } 266: 267: 268: function Coords(mousemove_event) 269: { 270: var x,y; 271: x=mousemove_event.clientX; 272: y=mousemove_event.clientY; 273: coordsout.firstChild.nodeValue="x: "+x+" | y: "+y; 274: } 275: 276: 277: function ShowHideCoords() 278: { 279: if(coordsout.style.getPropertyValue("visibility")=="visible") 280: coordsout.style.setProperty("visibility","hidden"); 281: else coordsout.style.setProperty("visibility","visible"); 282: } 283: 284: 285: function Uhrzeit() 286: { 287: var datumzeit,temp,zeit; 288: datumzeit=new Date().toLocaleString(); 289: temp=datumzeit.lastIndexOf(" "); 290: zeit=datumzeit.substring(temp+1,datumzeit.length); 291: timeout.firstChild.nodeValue=zeit; 292: setTimeout("Uhrzeit()",1000); 293: } 294: 295: 296: function RemoveTspanElement() 297: { 298: var objtext,objtspan,tspanlength; 299: objtext=svgdoc.getElementById("textblock"); 300: objtspan=objtext.getElementsByTagName("tspan"); 301: tspanlength=objtspan.length; 302: if(tspanlength>0)objtext.removeChild(objtspan.item(tspanlength-1)); 303: else alert("Kein tspan-Element zum\nEntfernen verfügbar."); 304: } 305: 306: ]]> 307: 308: </script> 309: 310:  313: 314:  315: 316: </defs> 317: 318: <rect x="35" y="10" rx="5" width="470" height="450" style="fill: #FFF; stroke: #9CF; stroke-width: 2px"/> 319: <text class="info" x="50" y="40">SVG-DOM-Scripting kompakt</text> 320: 321: <g id="rechtecke"> 322: <rect x="60" y="90" width="100" height="50" style="fill: #F00" onclick="ElementInfo(evt)"/><rect x="205" y="80" width="60" height="130" style="fill: #090" onclick="ElementInfo(evt)"/><rect x="110" y="160" width="80" height="80" style="fill: #00C" transform="rotate(45,110,160)" onclick="ElementInfo(evt)"/> 323: </g> 324: 325: <circle id="kreis" cx="390" cy="120" r="50" stroke="#00C" style="fill: #FF0" onmouseup="ElementInfo(evt)"/> 326: 327: <text id="textblock" x="0" y="200" onclick="ElementInfo(evt)"> 328: <tspan x="310" dy="20">Das ist der erste Testtext.</tspan> 329: <tspan x="310" dy="20">Das ist der zweite Testtext.</tspan> 330: <tspan x="310" dy="20">Das ist der dritte Testtext.</tspan> 331: </text> 332:


333: <text id="coordsout" x="180" y="320" style="fill: #00C; visibility: hidden" onclick="ElementInfo(evt)"> </text> 334: <text id="timeout" x="445" y="35" style="fill: #00C" onclick="ElementInfo(evt)"> </text> 335: 336: <a xlink:href="" onmouseover="setHover(evt,1)" onmouseout="setHover(evt,0)" onclick="ShowHideCoords()"><text x="50" y="320">Koordinaten (an/aus): </text></a> 337: <a xlink:href="http://www.datenverdrahten.de/svglbc/" target="_top" onmouseover="setHover(evt,1);ShowTooltip(evt,'SVG - Learning By Coding')" onmouseout="setHover(evt,0);HideTooltip()"><text x="350" y="320">Link mit Tooltip-Anzeige</text></a> 338: 339: <a xlink:href="" onmouseover="setHover(evt,1)" onmouseout="setHover(evt,0)" onclick="getElementsLength('rect')"><text x="50" y="350">Anzahl Rechtecke</text></a> 340: <a xlink:href="" onmouseover="setHover(evt,1)" onmouseout="setHover(evt,0)" onclick="setCSSProperty('kreis','fill','#F00')"><text x="180" y="350">neue Kreis- Farbe (rot)</text></a> 341: <a xlink:href="" onmouseover="setHover(evt,1)" onmouseout="setHover(evt,0)" onclick="setElementsStyle('rect','fill-opacity',0.4)"><text x="350" y="350">Rechtecke: fill-opacity: 0.4</text></a> 342: 343: <a xlink:href="" onmouseover="setHover(evt,1)" onmouseout="setHover(evt,0)" onclick="getAttrById('kreis','r')"><text x="50" y="380">Radius des Kreises</text></a> 344: <a xlink:href="" onmouseover="setHover(evt,1)" onmouseout="setHover(evt,0)" onclick="setAttrById('kreis','r','70')"><text x="180" y="380">neuer Kreis- Radius</text></a> 345: <a xlink:href="" onmouseover="setHover(evt,1)" onmouseout="setHover(evt,0)" onclick="setAttrByTagName('rect',1,'height','200')"><text x="350" y="380">neue Rechteck-Höhe</text></a> 346: 347: <a xlink:href="" onmouseover="setHover(evt,1)" onmouseout="setHover(evt,0)" onclick="getTextValue('textblock','tspan',1)"><text x="50" y="410">Wert von Testtext 2</text></a> 348: <a xlink:href="" onmouseover="setHover(evt,1)" onmouseout="setHover(evt,0)" onclick="setTextValue('textblock','tspan',1,'Ein anderer Text.')"><text x="180" y="410">Testtext 2 ersetzen</text></a> 349: <a xlink:href="" onmouseover="setHover(evt,1)" onmouseout="setHover(evt,0)" onclick="getTextLength('textblock','tspan',1)"><text x="350" y="410">Länge von Texttext 2</text></a> 350: 351: <a xlink:href="" onmouseover="setHover(evt,1)" onmouseout="setHover(evt,0)" onclick="newElement('line','50','295','490','295','#CCC','2px')"><text x="50" y="440">neues Element (line)</text></a> 352: <a xlink:href="" onmouseover="setHover(evt,1)" onmouseout="setHover(evt,0)" onclick="newTextNode('textblock','tspan','310','20','Das ist ein weiterer Testtext.')"><text x="180" y="440">neues tspan mit Textknoten</text></a> 353: <a xlink:href="" onmouseover="setHover(evt,1)" onmouseout="setHover(evt,0)" onclick="RemoveTspanElement()"><text x="350" y="440">tspan-Elemente entfernen</text></a> 354: 355: <g id="tooltip"> 356: <rect id="ttr" x="0" y="0" rx="5" ry="5" width="100" height="16" style="visibility: hidden"/> 357: <text id="ttt" x="0" y="0" style="visibility: hidden">dyn. Text</text> 358: </g> 359: 360:  361: 362: </svg>


switch.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px">Element switch</text> 15: 16: <switch> 17: 18: <g systemLanguage="de"> 19: <text x="30" y="60">Hallo Welt!</text> 20: </g> 21: 22: <g systemLanguage="fr"> 23: <text x="30" y="60">Salut le monde!</text> 24: </g> 25: 26: <g systemLanguage="en"> 27: <text x="30" y="60">Hello world!</text> 28: </g> 29: 30: </switch> 31: 32: </svg>

symbol.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <defs> 13: <symbol id="einsymbol"> 14: <circle cx="11" cy="10" r="5" style="fill: #090"/> 15: <rect x="0" y="16" width="10" height="10" style="fill: #00C"/> 16: <rect x="11" y="16" width="10" height="10" style="fill: #F00"/> 17: </symbol> 18: </defs> 19:


20: <title>SVG - Learning By Coding</title> 21: <desc>SVG-Spezifikation in Beispielen</desc> 22: <text x="20" y="30" style="fill: #000; font-size: 24px">Element symbol</text> 23: 24: <use xlink:href="#einsymbol" x="35" y="80" width="25" height="25"/> 25: <use xlink:href="#einsymbol" x="65" y="80" width="25" height="25"/> 26: <use xlink:href="#einsymbol" x="95" y="80" width="25" height="25"/> 27: 28: </svg>

text.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px">Element text</text> 15: 16: <text x="30" y="80" style="fill: #090; font-size: 18px"> 17: Das ist ein formatierter Text. 18: </text> 19: 20: </svg>

text-anchor.svg



13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <style type="text/css"> 18: <![CDATA[ 19: 20: text 21: { 22: font-size: 18px; 23: fill: #333; 24: } 25: 26: tspan 27: { 28: font-size: 18px; 29: fill: #00C; 30: } 31: 32: ]]> 33: </style> 34: 35: </defs> 36: 37: <text x="20" y="30" style="fill: #000; font-size: 24px"> 38: Eigenschaft text-anchor 39: </text> 40: 41: <line x1="90" y1="90" x2="90" y2="180"/> 42: 43: <text x="60" y="80"> 44: text-anchor: 45: <tspan x="90" dy="30" style="text-anchor: start">start (Standard)</tspan> 46: <tspan x="90" dy="30" style="text-anchor: middle">middle</tspan> 47: <tspan x="90" dy="30" style="text-anchor: end">end</tspan> 48: </text> 49: 50: </svg>

textanimation.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: id="grafik"> 12: 13: <defs> 14: 15: <style type="text/css"> 16: <![CDATA[ 17: 18: text 19: { 20: font-family: "Courier New", Courier, monospace; 21: font-size: 24px; 22: font-weight: bold; 23: fill: #090; 24: visibility: hidden;


25: } 26: 27: line 28: { 29: stroke: #E00; 30: stroke-width: 2px; 31: visibility: hidden; 32: } 33: 34: text.headline 35: { 36: fill: #000; 37: font-family: Arial, Helvetica, sans-serif; 38: font-size: 24px; 39: visibility: visible; 40: } 41: 42: ]]> 43: </style> 44: 45: </defs> 46: 47: <title>SVG - Learning By Coding</title> 48: <desc>SVG-Spezifikation in Beispielen</desc> 49: <text x="20" y="30" class="headline">Textanimation mit dem Element set</text> 50: 51: <text x="10" y="80">S<set attributeType="CSS" attributeName="visibility" 52: to="visible" begin="grafik.load+1s"/></text> 53: <text x="30" y="80">C<set attributeType="CSS" attributeName="visibility" 54: to="visible" begin="grafik.load+1.25s"/></text> 55: <text x="50" y="80">A<set attributeType="CSS" attributeName="visibility" 56: to="visible" begin="grafik.load+1.5s"/></text> 57: <text x="70" y="80">L<set attributeType="CSS" attributeName="visibility" 58: to="visible" begin="grafik.load+1.75s"/></text> 59: <text x="90" y="80">A<set attributeType="CSS" attributeName="visibility" 60: to="visible" begin="grafik.load+2s"/></text> 61: <text x="110" y="80">B<set attributeType="CSS" attributeName="visibility" 62: to="visible" begin="grafik.load+2.25s"/></text> 63: <text x="130" y="80">L<set attributeType="CSS" attributeName="visibility" 64: to="visible" begin="grafik.load+2.5s"/></text> 65: <text x="150" y="80">E<set attributeType="CSS" attributeName="visibility" 66: to="visible" begin="grafik.load+2.75s"/></text> 67: <text x="170" y="80"> <set attributeType="CSS" attributeName="visibility" 68: to="visible" begin="grafik.load+3s"/></text> 69: <text x="190" y="80">V<set attributeType="CSS" attributeName="visibility" 70: to="visible" begin="grafik.load+3.25s"/></text> 71: <text x="210" y="80">E<set attributeType="CSS" attributeName="visibility" 72: to="visible" begin="grafik.load+3.5s"/></text> 73: <text x="230" y="80">C<set attributeType="CSS" attributeName="visibility" 74: to="visible" begin="grafik.load+3.75s"/></text> 75: <text x="250" y="80">T<set attributeType="CSS" attributeName="visibility" 76: to="visible" begin="grafik.load+4s"/></text> 77: <text x="270" y="80">O<set attributeType="CSS" attributeName="visibility" 78: to="visible" begin="grafik.load+4.25s"/></text> 79: <text x="290" y="80">R<set attributeType="CSS" attributeName="visibility" 80: to="visible" begin="grafik.load+4.5s"/></text> 81: <text x="310" y="80"> <set attributeType="CSS" attributeName="visibility" 82: to="visible" begin="grafik.load+4.75s"/></text> 83: <text x="330" y="80">G<set attributeType="CSS" attributeName="visibility" 84: to="visible" begin="grafik.load+5s"/></text> 85: <text x="350" y="80">R<set attributeType="CSS" attributeName="visibility" 86: to="visible" begin="grafik.load+5.25s"/></text> 87: <text x="370" y="80">A<set attributeType="CSS" attributeName="visibility" 88: to="visible" begin="grafik.load+5.5s"/></text> 89: <text x="390" y="80">P<set attributeType="CSS" attributeName="visibility" 90: to="visible" begin="grafik.load+5.75s"/></text> 91: <text x="410" y="80">H<set attributeType="CSS" attributeName="visibility" 92: to="visible" begin="grafik.load+6s"/></text> 93: <text x="430" y="80">I<set attributeType="CSS" attributeName="visibility" 94: to="visible" begin="grafik.load+6.25s"/></text> 95: <text x="450" y="80">C<set attributeType="CSS" attributeName="visibility" 96: to="visible" begin="grafik.load+6.5s"/></text> 97: <text x="470" y="80">S<set attributeType="CSS" attributeName="visibility" 98: to="visible" begin="grafik.load+6.75s"/></text> 99: 100: <line x1="10" y1="55" x2="485" y2="55"><set attributeType="CSS" 101: attributeName="visibility" to="visible" begin="grafik.load+7s"/></line> 102: <line x1="10" y1="90" x2="485" y2="90"><set attributeType="CSS"


103: attributeName="visibility" to="visible" begin="grafik.load+7s"/></line> 104: 105: </svg>

textbearbeiten.svg

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:  8:  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: text 22: { 23: fill: #00C; 24: font-size: 12px; 25: } 26: 27: tspan 28: { 29: fill: #F00; 30: font-size: 12px; 31: } 32: 33: ]]> 34: </style> 35: 36: 37: <script type="text/javascript"> 38: <![CDATA[ 39: 40: var svgdoc,svgroot; 41: 42: 43: function getSVGDoc(load_evt) 44: { 45: svgdoc=load_evt.target.ownerDocument; 46: svgroot=svgdoc.documentElement; 47: } 48: 49: 50: function TextBearbeiten(x) 51: {


52: var textobj; 53: 54: textobj=svgdoc.getElementById("testtext").firstChild; 55: 56: // wenn Zahlenwerte vorhanden sind: 57: // erster Zahlenwert = Startposition 58: // zweiter Zahlenwert = Zeichenanzahl 59: 60: if(x==0)textobj.appendData(" gedacht"); 61: if(x==1)textobj.insertData(9,"weiteren "); 62: if(x==2)textobj.replaceData(5,3,"für"); 63: if(x==3)textobj.deleteData(16,1); 64: if(x==4)alert(textobj.data); 65: if(x==5)textobj.data="Ein ganz anderer Text"; 66: if(x==6)alert(textobj.length); 67: } 68: 69: ]]> 70: </script> 71: 72: </defs> 73: 74: <text x="20" y="30" style="fill: #000; font-size: 24px"> 75: DOM-Methoden zur Zeichendatenverarbeitung</text> 76: 77: <text id="testtext" x="20" y="75" style="font-size: 18px; fill: #090">Text zur Bearbeitung</text> 78: 79: <a xlink:href="" onclick="TextBearbeiten(0)"> 80: <text x="30" y="100"> 81: <tspan>appendData()</tspan> [Zeichendaten anfügen] 82: </text> 83: </a> 84: 85: <a xlink:href="" onclick="TextBearbeiten(1)"> 86: <text x="30" y="120"> 87: <tspan>insertData()</tspan> [Zeichendaten einfügen] 88: </text> 89: </a> 90: 91: <a xlink:href="" onclick="TextBearbeiten(2)"> 92: <text x="30" y="140"> 93: <tspan>replaceData()</tspan> [Zeichendaten ersetzen] 94: </text> 95: </a> 96: 97: <a xlink:href="" onclick="TextBearbeiten(3)"> 98: <text x="30" y="160"> 99: <tspan>deleteData()</tspan> [Zeichendaten löschen] 100: </text> 101: </a> 102: 103: <a xlink:href="" onclick="TextBearbeiten(4)"> 104: <text x="30" y="180"> 105: <tspan>data</tspan> [Zeichenkette auslesen] 106: </text> 107: </a> 108: 109: <a xlink:href="" onclick="TextBearbeiten(5)"> 110: <text x="30" y="200"> 111: <tspan>data()</tspan> [Zeichenkette neu schreiben] 112: </text> 113: </a> 114: 115: <a xlink:href="" onclick="TextBearbeiten(6)"> 116: <text x="30" y="220"> 117: <tspan>length</tspan> [Länge der Zeichenkette ausgeben] 118: </text> 119: </a> 120: 121: </svg>


text-decoration.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <style type="text/css"> 18: <![CDATA[ 19: 20: text 21: { 22: font-size: 18px; 23: } 24: 25: text.t1 26: { 27: text-decoration: none; 28: fill: #666; 29: } 30: 31: text.t2 32: { 33: text-decoration: overline; 34: fill: #090; 35: } 36: 37: text.t3 38: { 39: text-decoration: underline; 40: fill: #F00; 41: } 42: 43: text.t4 44: { 45: text-decoration: line-through; 46: fill: #C0C; 47: } 48: 49: text.t5 50: { 51: text-decoration: underline overline; 52: fill: #00C; 53: } 54: 55: ]]> 56: </style>


57: 58: </defs> 59: 60: <text x="20" y="30" style="fill: #000; font-size: 24px"> 61: Eigenschaft text-decoration 62: </text> 63: 64: <text x="30" y="80" class="t1"> 65: text-decoration: none; 66: </text> 67: 68: <text x="30" y="120" class="t2"> 69: text-decoration: overline; 70: </text> 71: 72: <text x="30" y="160" class="t3"> 73: text-decoration: underline; 74: </text> 75: 76: <text x="30" y="200" class="t4"> 77: text-decoration: line-through; 78: </text> 79: 80: <text x="30" y="240" class="t5"> 81: text-decoration: underline overline; 82: </text> 83: 84: </svg>

textinformationen.svg

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:  8:  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: text 22: { 23: fill: #00C; 24: font-size: 12px; 25: } 26: 27: tspan 28: { 29: fill: #F00; 30: font-size: 12px; 31: } 32: 33: ]]> 34: </style> 35: 36: 37: <script type="text/javascript"> 38: <![CDATA[ 39: 40: var svgdoc,svgroot; 41: 42: 43: function getSVGDoc(load_evt) 44: { 45: svgdoc=load_evt.target.ownerDocument; 46: svgroot=svgdoc.documentElement; 47: } 48: 49: 50: function TextInfos(x) 51: { 52: var textobj,textinfo,point; 53: 54: textobj=svgdoc.getElementById("testtext"); 55: if(x==0)textinfo=textobj.getNumberOfChars(); 56: if(x==1)textinfo=textobj.getComputedTextLength(); 57: if(x==2)textinfo=textobj.getSubStringLength(5,3); 58: if(x==3)textinfo=textobj.getStartPositionOfChar(9).x; 59: if(x==4)textinfo=textobj.getStartPositionOfChar(9).y; 60: if(x==5)textinfo=textobj.getEndPositionOfChar(9).x; 61: if(x==6)textinfo=textobj.getEndPositionOfChar(9).y; 62: if(x==7)textinfo=textobj.getExtentOfChar(9).width; 63: if(x==8)textinfo=textobj.getExtentOfChar(9).height; 64: if(x==9)textinfo=textobj.getRotationOfChar(9); 65: if(x==10) 66: { 67: textinfo="'zur' wird markiert."; 68: textobj.selectSubString(5,3); 69: } 70: if(x==11) 71: { 72: point=svgroot.createSVGPoint(); 73: point.x=100; 74: point.y=75; 75: textinfo=textobj.getCharNumAtPosition(point); 76: textobj.selectSubString(textobj.getCharNumAtPosition(point),1); 77: } 78: 79: alert(textinfo); 80: } 81: 82: ]]> 83: </script> 84: 85: </defs> 86: 87: <text x="20" y="30" style="fill: #000; font-size: 24px"> 88: Auslesen von Textinformationen mit DOM-Methoden</text> 89: 90: <text id="testtext" x="20" y="75" style="font-size: 18px; fill: #090"> 91: Text zur Vermessung 92: </text> 93: 94: <a xlink:href="" onclick="TextInfos(0)"> 95: <text x="30" y="100"> 96: <tspan>getNumberOfChars()</tspan> [Zeichenanzahl des Testtextes]


97: </text> 98: </a> 99: 100: <a xlink:href="" onclick="TextInfos(1)"> 101: <text x="30" y="120"> 102: <tspan>getComputedTextLength()</tspan> [Länge des Testtextes in px] 103: </text> 104: </a> 105: 106: <a xlink:href="" onclick="TextInfos(2)"> 107: <text x="30" y="140"> 108: <tspan>getSubStringLength(5,3)</tspan> [Länge der Teilzeichenkette 'zur' in px] 109: </text> 110: </a> 111: 112: <a xlink:href="" onclick="TextInfos(3)"> 113: <text x="30" y="160"> 114: <tspan>getStartPositionOfChar(9).x</tspan> [x-Startposition vom Buchstaben V] 115: </text> 116: </a> 117: 118: <a xlink:href="" onclick="TextInfos(4)"> 119: <text x="30" y="180"> 120: <tspan>getStartPositionOfChar(9).y</tspan> [y-Startposition vom Buchstaben V] 121: </text> 122: </a> 123: 124: <a xlink:href="" onclick="TextInfos(5)"> 125: <text x="30" y="200"> 126: <tspan>getEndPositionOfChar(9).x</tspan> [x-Endposition vom Buchstaben V] 127: </text> 128: </a> 129: 130: <a xlink:href="" onclick="TextInfos(6)"> 131: <text x="30" y="220"> 132: <tspan>getEndPositionOfChar(9).y</tspan> [y-Endposition vom Buchstaben V] 133: </text> 134: </a> 135: 136: <a xlink:href="" onclick="TextInfos(7)"> 137: <text x="30" y="240"> 138: <tspan>getExtentOfChar(9).width</tspan> [Rechteck-Breite vom Buchstaben V] 139: </text> 140: </a> 141: 142: <a xlink:href="" onclick="TextInfos(8)"> 143: <text x="30" y="260"> 144: <tspan>getExtentOfChar(9).height</tspan> [Rechteck-Höhe vom Buchstaben V] 145: </text> 146: </a> 147: 148: <a xlink:href="" onclick="TextInfos(9)"> 149: <text x="30" y="280"> 150: <tspan>getRotationOfChar(9)</tspan> [Rotationswinkel vom Buchstaben V] 151: </text> 152: </a> 153: 154: <a xlink:href="" onclick="TextInfos(10)"> 155: <text x="30" y="300"> 156: <tspan>selectSubString(5,3)</tspan> [Teilzeichenkette 'zur' markieren] 157: </text> 158: </a> 159: 160: <a xlink:href="" onclick="TextInfos(11)"> 161: <text x="30" y="320"> 162: <tspan>getCharNumAtPosition()</tspan> [Zeichen ab 0 an der Stelle x=100, y=75] 163: </text> 164: </a> 165: 166: <a xlink:href="" onclick="svgroot.deselectAll()"> 167: <text x="30" y="340"> 168: <tspan>deselectAll()</tspan> [Ausgewählte Objekte (markierten Text) zurück setzen] 169: </text> 170: </a> 171: 172: </svg>


textLength.svg

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: <!ENTITY tt "Das ist ein Testtext"> 6: ]> 7: 8:  9:  10: 11: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: <defs> 16: <style type="text/css"> 17: <![CDATA[ 18: 19: text 20: { 21: font-size: 14px; 22: } 23: 24: text.tt1 25: { 26: fill: #000; 27: } 28: 29: text.tt2 30: { 31: fill: #F00; 32: } 33: 34: text.tt3 35: { 36: fill: #090; 37: } 38: 39: text.tt4 40: { 41: fill: #00C; 42: } 43: 44: ]]> 45: </style> 46: </defs> 47: <text x="20" y="30" style="fill: #000; font-size: 24px"> 48: Attribute textLength und lengthAdjust</text> 49: 50: <text class="tt1" x="20" y="60">&tt;</text> 51: 52: <text class="tt2" x="20" y="80" textLength="80">&tt;</text>


53: 54: <text class="tt3" x="20" y="100" textLength="80" 55: lengthAdjust="spacing">&tt;</text> 56: 57: <text class="tt4" x="20" y="120" textLength="80" 58: lengthAdjust="spacingAndGlyphs">&tt;</text> 59: 60: <line x1="20" y1="140" x2="420" y2="140"/> 61: <image xlink:href="bilder/textLength.gif" x="20" y="150" width="307" height="161"/> 62: 63: </svg>

textPath.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <defs> 13: 14: <path id="einpfad" d="M 100,150 L 200,200 L 100,250" style="fill: none"/> 15: 16: </defs> 17: 18: <title>SVG - Learning By Coding</title> 19: <desc>SVG-Spezifikation in Beispielen</desc> 20: <text x="20" y="30" style="fill: #000; font-size: 24px">Element textPath</text> 21: 22: <text style="fill: #00C"> 23: <textPath xlink:href="#einpfad">Das ist ein Text, der an einem Pfad verläuft.</textPath> 24: </text> 25: 26: </svg>


text-rendering.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <style type="text/css"> 18: <![CDATA[ 19: 20: text 21: { 22: fill: #00C; 23: font-size: 18px; 24: } 25: 26: text.t1 27: { 28: text-rendering: auto; 29: } 30: 31: text.t2 32: { 33: text-rendering: optimizeSpeed; 34: } 35: 36: text.t3 37: { 38: text-rendering: optimizeLegibility; 39: } 40: 41: text.t4 42: { 43: text-rendering: geometricPrecision; 44: } 45: 46: tspan 47: { 48: fill: #F00; 49: } 50: 51: ]]> 52: </style> 53: 54: </defs> 55: 56: <text x="20" y="30" style="fill: #000; font-size: 24px">


57: Eigenschaft text-rendering 58: </text> 59: 60: <text x="30" y="80" class="t1"> 61: Das ist ein Text mit <tspan>text-rendering: auto</tspan>. 62: </text> 63: 64: <text x="30" y="120" class="t2"> 65: Das ist ein Text mit <tspan>text-rendering: optimizeSpeed</tspan>. 66: </text> 67: 68: <text x="30" y="160" class="t3"> 69: Das ist ein Text mit <tspan>text-rendering: optimizeLegibility</tspan>. 70: </text> 71: 72: <text x="30" y="200" class="t4"> 73: Das ist ein Text mit <tspan>text-rendering: geometricPrecision</tspan>. 74: </text> 75: 76: <a xlink:href="http://www.w3.org/TR/SVG/painting.html#RenderingProperties" target="_top"> 77: <text x="30" y="250" style="fill: #000; font-size: 12px"> 78: [Details zu weiteren Rendering-Eigenschaften in der SVG-Spezifikation] 79: </text> 80: </a> 81: 82: </svg>

textrichtung.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <style type="text/css"> 18: <![CDATA[ 19: 20: text 21: { 22: font-size: 18px; 23: } 24: 25: text.t1 26: { 27: fill: #666; 28: } 29: 30: text.t2 31: { 32: direction: rtl; 33: unicode-bidi: bidi-override;


34: fill: #090; 35: } 36: 37: ]]> 38: </style> 39: 40: </defs> 41: 42: <text x="20" y="30" style="fill: #000; font-size: 24px"> 43: Eigenschaften direction und unicode-bidi 44: </text> 45: 46: <text x="30" y="80" class="t1"> 47: Das ist Text von links nach rechts. 48: </text> 49: 50: <text x="30" y="120" class="t2"> 51: Das ist Text von rechts nach links. 52: </text> 53: 54: </svg>

textrotate.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px"> 15: Text-Zeichen einzeln rotieren</text> 16: 17: <text x="30" y="80" style="fill: #090; font-size: 18px"> 18: Das ist ein Testtext. 19: </text> 20: 21: <text x="30" y="120" style="fill: #F00; font-size: 18px" 22: rotate="45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45,45"> 23: Das ist ein Testtext. 24: </text> 25: 26: </svg>


tooltip.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: onload="getSVGDoc(evt)" onzoom="ZoomControl()"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: 16: <defs> 17: 18: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc,svgroot; 22: 23: 24: function getSVGDoc(load_evt) 25: { 26: svgdoc=load_evt.target.ownerDocument; 27: svgroot=svgdoc.documentElement; 28: } 29: 30: 31: function ShowTooltip(mousemove_event) 32: { 33: var ttrelem,tttelem,posx,posy,curtrans,ctx,cty,txt; 34: 35: ttrelem=svgdoc.getElementById("ttr"); 36: tttelem=svgdoc.getElementById("ttt"); 37: 38: posx=mousemove_event.clientX; 39: posy=mousemove_event.clientY; 40: 41: txt="x="+posx+" | y="+posy; 42: tttelem.childNodes.item(0).data=txt; 43: 44: curtrans=svgroot.currentTranslate; 45: ctx=curtrans.x; 46: cty=curtrans.y; 47: 48: ttrelem.setAttribute("x",posx-ctx); 49: ttrelem.setAttribute("y",posy-cty-20);


50: tttelem.setAttribute("x",posx-ctx+5); 51: tttelem.setAttribute("y",posy-cty-8); 52: ttrelem.setAttribute("width",tttelem.getComputedTextLength()+10); 53: tttelem.setAttribute("style","fill: #00C; font-size: 11px; visibility: visible"); 54: ttrelem.setAttribute("style","fill: #FFC; stroke: #000; stroke-width: 0.5px;\ 55: visibility: visible"); 56: } 57: 58: 59: function HideTooltip() 60: { 61: var ttrelem,tttelem; 62: 63: ttrelem=svgdoc.getElementById("ttr"); 64: tttelem=svgdoc.getElementById("ttt"); 65: ttrelem.setAttribute("style","visibility: hidden"); 66: tttelem.setAttribute("style","visibility: hidden"); 67: } 68: 69: 70: function ZoomControl() 71: { 72: var curzoom; 73: 74: curzoom=svgroot.currentScale; 75: svgdoc.getElementById("tooltip").setAttribute ("transform","scale("+1/curzoom+")"); 76: } 77: 78: ]]> 79: </script> 80: 81: </defs> 82: 83: <text x="20" y="30" style="fill: #000; font-size: 24px"> 84: Tooltip bei Mausbewegung anzeigen</text> 85: 86: <rect x="20" y="50" width="500" height="300" 87: style="fill: #FFF; stroke: #000" 88: onmousemove="ShowTooltip(evt)" onmouseout="HideTooltip()"/> 89: 90: <text x="35" y="200" style="fill: #F00; font-size: 12px; pointer-events: none"> 91: Beim Bewegen des Mauszeigers über dem Rechteck werden die Koordinaten angezeigt. 92: </text> 93: 94: <text id="farbwerte" x="70" y="290" class="t2"> </text> 95: 96: <g id="tooltip"> 97: <rect id="ttr" x="0" y="0" rx="5" ry="5" width="100" height="16" 98: style="visibility: hidden"/> 99: <text id="ttt" x="0" y="0" style="visibility: hidden">dyn. Text</text> 100: </g> 101: 102: </svg>


tooltip_mehrzeilig.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: onload="getSVGDoc(evt)" onzoom="ZoomControl()"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: 16: <defs> 17: 18: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc,svgroot; 22: 23: 24: function getSVGDoc(load_evt) 25: { 26: svgdoc=load_evt.target.ownerDocument; 27: svgroot=svgdoc.documentElement; 28: 29: texte=svgdoc.getElementById("tooltip").getElementsByTagName("text"); 30: } 31: 32: 33: function ShowTooltipMZ(mousemove_event,txt) 34: { 35: var ttrelem,tttelem,posx,posy,curtrans,ctx,cty,txt; 36: var sollbreite,maxbreite,ges,anz,tmp,txl,neu,i,k,l 37: 38: ttrelem=svgdoc.getElementById("ttr"); 39: tttelem=svgdoc.getElementById("ttt"); 40: 41: posx=mousemove_event.clientX; 42: posy=mousemove_event.clientY; 43: 44: for(i=1;i<=5;i++)texte.item(i).firstChild.data=""; 45: 46: sollbreite=150; 47: 48: tttelem.childNodes.item(0).data=txt; 49: ges=tttelem.getComputedTextLength(); 50: 51: tttelem.childNodes.item(0).data=""; 52: 53: anz=Math.ceil(ges/sollbreite); 54: 55: tmp=txt.split(" "); 56: txl=new Array(tmp.length);


57: neu=new Array(anz); 58: 59: for(i=0;i<tmp.length;i++) 60: { 61: tttelem.childNodes.item(0).data=tmp[i]; 62: txl[i]=tttelem.getComputedTextLength(); 63: } 64: 65: k=0; 66: maxbreite=0; 67: 68: for(i=0;i<anz;i++) 69: { 70: l=0,neu[i]=""; 71: 72: while(l+txl[k]<1.1*sollbreite && k<tmp.length) 73: { 74: l+=txl[k]; 75: neu[i]+=tmp[k]+" "; 76: k++; 77: if(maxbreite<l)maxbreite=l; 78: } 79: } 80: 81: curtrans=svgroot.currentTranslate; 82: ctx=curtrans.x; 83: cty=curtrans.y; 84: 85: ttrelem.setAttribute("x",posx-ctx+10); 86: ttrelem.setAttribute("y",posy-cty-20+10); 87: ttrelem.setAttribute("width",maxbreite+2*(maxbreite-sollbreite)+3); 88: ttrelem.setAttribute("height",anz*15+3); 89: ttrelem.setAttribute("style","fill: #FFC; stroke: #000; stroke-width: 0.5px"); 90: 91: for(i=1;i<=anz;i++) 92: { 93: texte.item(i).firstChild.data=neu[i-1]; 94: 95: texte.item(i).setAttribute("x",posx-ctx+15); 96: texte.item(i).setAttribute("y",parseInt(i-1)*15+posy-cty+3); 97: texte.item(i).setAttribute("style","fill: #00C; font-size: 11px"); 98: } 99: 100: svgdoc.getElementById("tooltip").style.setProperty("visibility","visible"); 101: } 102: 103: 104: function HideTooltip() 105: { 106: svgdoc.getElementById("tooltip").style.setProperty("visibility","hidden"); 107: } 108: 109: 110: function ZoomControl() 111: { 112: var curzoom; 113: 114: curzoom=svgroot.currentScale; 115: svgdoc.getElementById("tooltip").setAttribute ("transform","scale("+1/curzoom+")"); 116: } 117: 118: ]]> 119: </script> 120: 121: </defs> 122: 123: <text x="20" y="30" style="fill: #000; font-size: 24px"> 124: Mehrzeiligen Tooltip bei Mausbewegung anzeigen</text> 125: 126: <text id="farbwerte" x="70" y="290" class="t2"> </text> 127: 128: <rect x="50" y="70" width="150" height="80" 129: style="fill: #F00" onmousemove="ShowTooltipMZ(evt,'Das ist ein ganz schön langer Text, der sogar noch länger sein könnte und auf dem roten Rechteck erscheint.')" onmouseout="HideTooltip(evt)"/> 130: 131: <circle cx="130" cy="210" r="30"


132: style="fill: #090" onmousemove="ShowTooltipMZ(evt,'Dieser Tooltip erscheint auf dem grünen Kreis und ist nicht ganz so lang.')" onmouseout="HideTooltip(evt)"/> 133: 134: <g id="tooltip" style="visibility: hidden"> 135: <rect id="ttr" x="0" y="0" rx="5" ry="5" width="100" height="16"/> 136: <text id="ttt" x="0" y="0" style="visibility: hidden">dyn. Text</text> 137: <text x="-10" y="-10">dyn. Text</text> 138: <text x="-10" y="-10">dyn. Text</text> 139: <text x="-10" y="-10">dyn. Text</text> 140: <text x="-10" y="-10">dyn. Text</text> 141: <text x="-10" y="-10">dyn. Text</text> 142: </g> 143: 144: </svg>

transform.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <script type="text/javascript"> 18: <![CDATA[ 19: 20: function getMatrix(click_evt) 21: { 22: var objekt,trans,matrix,a,b,c,d,e,f,ausgabe; 23: 24: objekt=click_evt.target; 25: trans=objekt.getAttribute("transform");


26: 27: matrix=objekt.getCTM(); 28: a=matrix.a; 29: b=matrix.b; 30: c=matrix.c; 31: d=matrix.d; 32: e=matrix.e; 33: f=matrix.f; 34: 35: ausgabe="transform=\""+trans+"\"\ngetCTM()=\""; 36: ausgabe+="matrix("+a+","+b+","+c+","+d+","+e+","+f+")\""; 37: alert(ausgabe); 38: } 39: 40: ]]> 41: </script> 42: 43: </defs> 44: 45: <text x="20" y="30" style="fill: #000; font-size: 24px"> 46: Transformationen (translate | rotate | scale | skewX | skewY) 47: </text> 48: 49: <rect transform="translate(270,100)" x="50" y="80" width="150" height="75" 50: style="fill: #FFC; stroke: #F00; stroke-width: 1.5px" onclick="getMatrix(evt)"/> 51: 52: <rect transform="rotate(90,70,300)" x="50" y="80" width="150" height="75" 53: style="fill: #FFC; stroke: #F00; stroke-width: 1.5px" onclick="getMatrix(evt)"/> 54: 55: <rect transform="scale(0.75,0.5)" x="50" y="80" width="150" height="75" 56: style="fill: #FFC; stroke: #F00; stroke-width: 1.5px" onclick="getMatrix(evt)"/> 57: 58: <rect transform="skewX(30)" x="50" y="100" width="150" height="75" 59: style="fill: #FFC; stroke: #F00; stroke-width: 1.5px" onclick="getMatrix(evt)"/> 60: 61: <rect transform="skewY(45)" x="50" y="80" width="150" height="75" 62: style="fill: #FFC; stroke: #F00; stroke-width: 1.5px" onclick="getMatrix(evt)"/> 63: 64: <text x="220" y="65">Dieses Beispiel wurde auch mittels <tspan style="fill: #00C"> 65: matrix()</tspan> umgesetzt:</text> 66: <a xlink:href="../?doc=matrix" target="_top"> 67: <text x="515" y="65" style="fill: #F00"> 68: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseover"/> 69: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseout"/> 70: matrix.svg<tspan style="fill: #000">.</tspan> 71: </text> 72: </a> 73: 74: <text x="320" y="410">Beim Anklicken der transformierten Objekte wird die intern</text> 75: <text x="320" y="430">verwendete matrix()-Operation mit <tspan style="fill: #00C"> 76: getCTM()</tspan> sichtbar gemacht.</text> 77: 78: </svg>


transition.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" zoomAndPan="disable"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: 16: <defs> 17: 18:  19: <a:transition id="bw1" type="barWipe" subType="topToBottom" direction="forward" dur="2s"> 20: <a:param name="sections" value="10"/> 21: </a:transition> 22: <a:transition id="bw2" type="barWipe" subType="topToBottom" direction="reverse" dur="2s"> 23: <a:param name="sections" value="10"/> 24: </a:transition> 25: <a:transition id="bw3" type="barWipe" subType="leftToRight" direction="forward" dur="2s"> 26: <a:param name="sections" value="10"/> 27: </a:transition> 28: <a:transition id="bw4" type="barWipe" subType="leftToRight" direction="reverse" dur="2s"> 29: <a:param name="sections" value="10"/> 30: </a:transition> 31: 32:  33: <a:transition id="iw1" type="irisWipe" subType="rectangle" direction="forward" dur="2s"/>


34: <a:transition id="iw2" type="irisWipe" subType="rectangle" direction="reverse" dur="2s"/> 35: 36:  37: <a:transition id="bd1" type="barnDoorWipe" subType="horizontal" direction="forward" dur="2s"/> 38: <a:transition id="bd2" type="barnDoorWipe" subType="horizontal" direction="reverse" dur="2s"/> 39: <a:transition id="bd3" type="barnDoorWipe" subType="vertical" direction="forward" dur="2s"/> 40: <a:transition id="bd4" type="barnDoorWipe" subType="vertical" direction="reverse" dur="2s"/> 41: 42:  43: <a:transition id="gl1" type="glitter" subType="topToBottom" direction="forward" dur="2s"> 44: <a:param name="cellSize" value="5"/> 45: </a:transition> 46: <a:transition id="gl2" type="glitter" subType="topToBottom" direction="reverse" dur="2s"> 47: <a:param name="cellSize" value="5"/> 48: </a:transition> 49: <a:transition id="gl3" type="glitter" subType="leftToRight" direction="forward" dur="2s"> 50: <a:param name="cellSize" value="5"/> 51: </a:transition> 52: <a:transition id="gl4" type="glitter" subType="leftToRight" direction="reverse" dur="2s"> 53: <a:param name="cellSize" value="5"/> 54: </a:transition> 55: <a:transition id="gl5" type="glitter" subType="topLeft" direction="forward" dur="2s"> 56: <a:param name="cellSize" value="5"/> 57: </a:transition> 58: <a:transition id="gl6" type="glitter" subType="topLeft" direction="reverse" dur="2s"> 59: <a:param name="cellSize" value="5"/> 60: </a:transition> 61: <a:transition id="gl7" type="glitter" subType="random" direction="forward" dur="2s"> 62: <a:param name="cellSize" value="5"/> 63: </a:transition> 64: <a:transition id="gl8" type="glitter" subType="random" direction="reverse" dur="2s"> 65: <a:param name="cellSize" value="5"/> 66: </a:transition> 67: 68:  69: <a:transition id="fa" type="fade" subType="crossFade" direction="forward" dur="2s"/> 70: 71:  72: <rect id="re1" x="0" y="0" width="50" height="50" style="fill: #EEE; cursor: pointer"/> 73: <rect id="re2" x="0" y="0" width="50" height="50" style="fill: #F00; cursor: pointer"/> 74: 75: </defs> 76: 77: <text x="20" y="30" style="fill: #000; font-size: 24px"> 78: Übergangseffekte mit a:transition (ASV 6 / SMIL 2.0)</text> 79: <text x="20" y="50">[sonst werden <tspan style="font-weight: bold"> 80: beim Anklicken der grauen Rechtecke</tspan> die Effekte nicht angewendet]</text> 81: 82:  83: <text x="20" y="80" style="fill: #00C"><tspan style="font-weight: bold"> 84: type="barWipe"</tspan> + subType="topToBottom | leftToRight" 85: + direction="forward | reverse"</text> 86: <text x="20" y="92" style="fill: #00C"> + <param name="sections" 87: value="integer"/></text> 88: <use xlink:href="#re1" x="20" y="100"> 89: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="bw1"/> 90: </use> 91: <use xlink:href="#re1" x="80" y="100"> 92: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="bw2"/> 93: </use> 94: <use xlink:href="#re1" x="140" y="100"> 95: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="bw3"/> 96: </use> 97: <use xlink:href="#re1" x="200" y="100"> 98: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="bw4"/> 99: </use> 100:


101:  102: <text x="20" y="180" style="fill: #00C"><tspan style="font-weight: bold"> 103: type="irisWipe"</tspan> + subType="rectangle" 104: + direction="forward | reverse"</text> 105: <use xlink:href="#re1" x="20" y="190"> 106: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="iw1"/> 107: </use> 108: <use xlink:href="#re1" x="80" y="190"> 109: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="iw2"/> 110: </use> 111: 112:  113: <text x="20" y="270" style="fill: #00C"><tspan style="font-weight: bold"> 114: type="barnDoorWipe"</tspan> + subType="horizontal | vertical" 115: + direction="forward | reverse"</text> 116: <use xlink:href="#re1" x="20" y="280"> 117: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="bd1"/> 118: </use> 119: <use xlink:href="#re1" x="80" y="280"> 120: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="bd2"/> 121: </use> 122: <use xlink:href="#re1" x="140" y="280"> 123: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="bd3"/> 124: </use> 125: <use xlink:href="#re1" x="200" y="280"> 126: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="bd4"/> 127: </use> 128: 129:  130: <text x="20" y="360" style="fill: #00C"><tspan style="font-weight: bold"> 131: type="glitter"</tspan> + subType="topToBottom | leftToRight | 132: topLeft | random" + direction="forward | reverse"</text> 133: <text x="20" y="372" style="fill: #00C"> + <param name="cellSize" 134: value="integer"/></text> 135: <use xlink:href="#re1" x="20" y="380"> 136: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="gl1"/> 137: </use> 138: <use xlink:href="#re1" x="80" y="380"> 139: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="gl2"/> 140: </use> 141: <use xlink:href="#re1" x="140" y="380"> 142: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="gl3"/> 143: </use> 144: <use xlink:href="#re1" x="200" y="380"> 145: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="gl4"/> 146: </use> 147: <use xlink:href="#re1" x="260" y="380"> 148: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="gl5"/> 149: </use> 150: <use xlink:href="#re1" x="320" y="380"> 151: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="gl6"/> 152: </use> 153: <use xlink:href="#re1" x="380" y="380"> 154: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="gl7"/> 155: </use> 156: <use xlink:href="#re1" x="440" y="380"> 157: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="gl8"/> 158: </use> 159: 160:  161: <text x="20" y="460" style="fill: #00C"><tspan style="font-weight: bold"> 162: type="fade"</tspan> + subType="crossFade" 163: + direction="forward"</text> 164: <use xlink:href="#re1" x="20" y="470"> 165: <set attributeName="xlink:href" to="#re2" begin="click" a:transIn="fa"/> 166: </use> 167: 168: </svg>


tref.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <defs> 13: <text id="reftxt">Dieser Text wurde als Referenz definiert.</text> 14: </defs> 15: 16: <title>SVG - Learning By Coding</title> 17: <desc>SVG-Spezifikation in Beispielen</desc> 18: <text x="20" y="30" style="fill: #000; font-size: 24px">Element tref</text> 19: 20: <text x="30" y="80" style="fill: #090; font-size: 18px"> 21: <tref xlink:href="#reftxt"/> 22: </text> 23: 24: </svg>

tspan.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px">Element tspan</text> 15: 16: <text x="30" y="60" style="fill: #00C; font-size: 18px"> 17: <tspan x="30" dx="0" dy="25">Testtext</tspan> 18: <tspan x="30" dx="0" dy="25">Testtext</tspan> 19: <tspan x="30" dx="0" dy="25">Testtext</tspan> 20: <tspan x="30" dx="0" dy="25">Testtext</tspan>


21: </text> 22: 23: <text style="fill: #F00; font-size: 18px"> 24: <tspan x="30 60 90 120 150 180 210 240 270 300 330 360 390" y="210"> 25: Noch ein Text 26: </tspan> 27: </text> 28: 29: </svg>

un_pause_anim.svg

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:  8:  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: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc,svgroot; 22: 23: 24: function getSVGDoc(load_evt) 25: { 26: svgdoc=load_evt.target.ownerDocument; 27: svgroot=svgdoc.documentElement; 28: } 29: 30: 31: function Pause() 32: { 33: svgroot.pauseAnimations();


34: } 35: 36: 37: function Weiter() 38: { 39: svgroot.unpauseAnimations(); 40: } 41: 42: 43: function PauseTest() 44: { 45: if(svgroot.animationsPaused()) 46: alert("Animationen wurden unterbrochen."); 47: else alert("Animationen laufen noch."); 48: } 49: 50: ]]> 51: </script> 52: 53: </defs> 54: 55: <text x="20" y="30" style="fill: #000; font-size: 24px"> 56: Animationen unterbrechen</text> 57: 58:  59: 60: <path d="M 100,100 L 300,50 A 100,100 0 0,1 300,200 Z" 61: style="fill: none; stroke: #CCC; stroke-width: 1px"/> 62: <path id="einpfad" d="M 100,250 L 300,250 L 300,350 L 100,350 Z" 63: style="fill: none; stroke: #CCC; stroke-width: 1px"/> 64: 65:  66: <circle cx="0" cy="0" r="5" style="fill: #F00"> 67: <animateMotion begin="0s" dur="5s" repeatDur="indefinite" 68: path="M 100,100 L 300,50 A 100,100 0 0,1 300,200 Z"/> 69: </circle> 70: 71:  72: <rect x="-5" y="-5" width="11" height="11" style="fill: #00C"> 73: <animateMotion begin="0s" dur="10s" repeatDur="indefinite"> 74: <mpath xlink:href="#einpfad"/> 75: </animateMotion> 76: </rect> 77: 78:  79: 80: <a xlink:href="" onclick="Pause()"> 81: <text x="100" y="400" style="fill: #F00">Pause</text> 82: </a> 83: 84: <a xlink:href="" onclick="Weiter()"> 85: <text x="200" y="400" style="fill: #00C">Weiter</text> 86: </a> 87: 88: <a xlink:href="" onclick="PauseTest()"> 89: <text x="300" y="400" style="fill: #090">Test</text> 90: </a> 91: 92: </svg>

unicode.svg


1: <?xml version="1.0" encoding="UTF-8" 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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px">Verwendung von Unicode</text> 15: 16: <text x="30" y="80" style="fill: #F00; font-size: 18px"> 17: GroÃŸer Ãœbermut beim Verzehr alter Ã–lsardinen kÃ¶nnte zu mÃ¤chtigem Ã„rger fÃ¼hren. 18: </text> 19: 20: </svg>

use.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px">Element use</text> 15: 16: <a xlink:href="../?doc=symbol" target="_top"> 17: <text x="30" y="80" style="fill: #090; font-size: 18px"> 18: Siehe z. B. die Verwendung mit symbol. 19: </text> 20: </a> 21: 22: </svg>


user_colors.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <text x="20" y="30" style="fill: #000; font-size: 24px"> 16: CSS2-User Colors in SVG verwenden</text> 17: 18: <text x="20" y="60" style="fill: ActiveBorder">ActiveBorder</text> 19: <text x="20" y="85" style="fill: ActiveCaption">ActiveCaption</text> 20: <text x="20" y="110" style="fill: AppWorkspace">AppWorkspace</text> 21: <text x="20" y="135" style="fill: Background">Background</text> 22: <text x="20" y="160" style="fill: ButtonFace">ButtonFace</text> 23: <text x="20" y="185" style="fill: ButtonHighlight">ButtonHighlight</text> 24: <text x="20" y="210" style="fill: ButtonShadow">ButtonShadow</text> 25: <text x="20" y="235" style="fill: ButtonText">ButtonText</text> 26: <text x="20" y="260" style="fill: CaptionText">CaptionText</text> 27: <text x="20" y="285" style="fill: GrayText">GrayText</text> 28: <text x="20" y="310" style="fill: Highlight">Highlight</text> 29: <text x="20" y="335" style="fill: HighlightText">HighlightText</text> 30: <text x="20" y="360" style="fill: InactiveBorder">InactiveBorder</text> 31: <text x="20" y="385" style="fill: InactiveCaption">InactiveCaption</text> 32: <text x="200" y="60" style="fill: InactiveCaptionText">InactiveCaptionText</text> 33: <text x="200" y="85" style="fill: InfoBackground">InfoBackground</text> 34: <text x="200" y="110" style="fill: InfoText">InfoText</text> 35: <text x="200" y="135" style="fill: Menu">Menu</text> 36: <text x="200" y="160" style="fill: MenuText">MenuText</text> 37: <text x="200" y="185" style="fill: Scrollbar">Scrollbar</text> 38: <text x="200" y="210" style="fill: ThreeDDarkShadow">ThreeDDarkShadow</text> 39: <text x="200" y="235" style="fill: ThreeDFace">ThreeDFace</text> 40: <text x="200" y="260" style="fill: ThreeDHighlight">ThreeDHighlight</text> 41: <text x="200" y="285" style="fill: ThreeDLightShadow">ThreeDLightShadow</text> 42: <text x="200" y="310" style="fill: ThreeDShadow">ThreeDShadow</text> 43: <text x="200" y="335" style="fill: Window">Window</text> 44: <text x="200" y="360" style="fill: WindowFrame">WindowFrame</text> 45: <text x="200" y="385" style="fill: WindowText">WindowText</text>


46: 47: <a xlink:href="http://www.w3.org/TR/REC-CSS2/ui.html#system-colors" target="_top"> 48: <text x="20" y="420" style="fill: #00C; font-size: 14px"> 49: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 50: <set attributeName="text-decoration" attributeType="CSS" to="underline" begin="mouseover"/> 51: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 52: <set attributeName="text-decoration" attributeType="CSS" to="none" begin="mouseout"/> 53: Siehe CSS2-Spezifikation für Details 54: </text> 55: </a> 56: 57: </svg>

video.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" zoomAndPan="disable"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: <text x="20" y="30" style="fill: #000; font-size: 24px"> 16: Element a:video (ASV 6 / DirectX 8+)</text> 17: <text x="20" y="50">[sonst erscheint keine Ausgabe]</text> 18: <a xlink:href="bilder/video.gif" target="svgbox"> 19: <text x="270" y="50" style="fill: #F00">Ergebnis als Rastergrafik ... 20: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseover"/> 21: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseout"/> 22: </text> 23: </a> 24: 25:  26: <rect x="139" y="79" width="162" height="122" rx="5" style="stroke: #000; fill: #EEE"/> 27: <text x="170" y="150" style="fill: #00C; font-size: 28px; font-weight: bold; 28: pointer-events: none">SVG.TV</text> 29: 30:  31: <a:video x="140" y="80" width="160" height="120" xlink:href="audvid/svgtv.avi" 32: begin="start.click" end="stopp.click" fill="freeze"/> 33: 34:  35: <polygon id="start" points="190,230 190,210 210,220" style="fill: #0C0"> 36: <set attributeName="opacity" attributeType="CSS" to="0.5" begin="mouseover"/> 37: <set attributeName="stroke" attributeType="CSS" to="#000" begin="mouseover"/> 38: <set attributeName="opacity" attributeType="CSS" to="1.0" begin="mouseout"/> 39: <set attributeName="stroke" attributeType="CSS" to="none" begin="mouseout"/> 40: </polygon> 41:


42:  43: <rect id="stopp" x="235" y="211" width="18" height="18" style="fill: #E00"> 44: <set attributeName="opacity" attributeType="CSS" to="0.5" begin="mouseover"/> 45: <set attributeName="stroke" attributeType="CSS" to="#000" begin="mouseover"/> 46: <set attributeName="opacity" attributeType="CSS" to="1.0" begin="mouseout"/> 47: <set attributeName="stroke" attributeType="CSS" to="none" begin="mouseout"/> 48: </rect> 49: 50: </svg>

view.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px">Element view</text> 15: 16: <view id="circle_view" viewBox="50 50 100 100" 17: viewTarget="kreis" preserveAspectRatio="xMaxYMax meet"/> 18: 19: <circle id="kreis" cx="100" cy="100" r="40" style="fill: #FFC"/> 20: <a xlink:href="#circle_view"><text x="20" y="200"> 21: Neuen Kreis-Bereich zeigen</text> 22: </a> 23: 24: </svg>


viewBox.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: width="640" height="480" viewBox="0 0 400 300"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: 16: <text x="20" y="30" style="fill: #000; font-size: 24px"> 17: Attribut viewBox (Viewport)</text> 18: 19: <rect x="20" y="50" width="300" height="200" 20: style="fill: #EEE; stroke: #000; stroke-width: 2px"/> 21: 22: <circle cx="170" cy="150" r="50" 23: style="fill: #FFC; stroke: #00C; stroke-width: 2px"/> 24: 25: 26: <a xlink:href="../?doc=viewport1" target="_top"> 27: <text x="20" y="280" style="fill: #00C"> 28: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 29: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 30: viewport1.svg<tspan style="fill: #00C"> |</tspan> 31: </text> 32: </a> 33: 34: <a xlink:href="../?doc=viewport2" target="_top"> 35: <text x="102" y="280" style="fill: #00C"> 36: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 37: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 38: viewport2.svg<tspan style="fill: #00C"> |</tspan> 39: </text> 40: </a> 41: 42: <a xlink:href="../?doc=viewport3" target="_top"> 43: <text x="184" y="280" style="fill: #00C"> 44: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 45: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 46: viewport3.svg<tspan style="fill: #00C"> |</tspan>


47: </text> 48: </a> 49: 50: <a xlink:href="../?doc=viewport4" target="_top"> 51: <text x="266" y="280" style="fill: #00C"> 52: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 53: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 54: viewport4.svg 55: </text> 56: </a> 57: 58: </svg>

viewport1.svg zu viewBox.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: width="150" height="200"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: 16:  17: 18:  19: <circle cx="100" cy="100" r="40" style="fill: #FF0; stroke: #000; 20: stroke-width: 2px"/> 21: 22:  23: <ellipse cx="85" cy="90" rx="5" ry="10" style="fill: #FFF; 24: stroke: #000; stroke-width: 2px"/> 25: <ellipse cx="115" cy="90" rx="5" ry="10" style="fill: #FFF; 26: stroke: #000; stroke-width: 2px"/> 27: 28:  29: <circle cx="87" cy="95" r="3" style="fill: #000"/> 30: <circle cx="113" cy="95" r="3" style="fill: #000"/> 31: 32:  33: <rect x="100" y="102" height="5" width="1" style="fill: #000; 34: stroke: #000; stroke-width: 5px; stroke-linejoin: round"/> 35: 36:  37: <path d="M 85,110 A 5,5 0 1,0 115,110" style="fill: #FF0; stroke: #F00; 38: stroke-width: 2px"/> 39: 40:  41: 42: <rect x="70" y="60" width="35" height="55" style="fill: none; 43: stroke: blue; stroke-width: 2px; stroke-dasharray: 2 4"/> 44: 45: </svg>



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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: width="150" height="200" viewBox="70 60 35 55"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: 16:  17: 18:  19: <circle cx="100" cy="100" r="40" style="fill: #FF0; stroke: #000; 20: stroke-width: 2px"/> 21: 22:  23: <ellipse cx="85" cy="90" rx="5" ry="10" style="fill: #FFF; 24: stroke: #000; stroke-width: 2px"/> 25: <ellipse cx="115" cy="90" rx="5" ry="10" style="fill: #FFF; 26: stroke: #000; stroke-width: 2px"/> 27: 28:  29: <circle cx="87" cy="95" r="3" style="fill: #000"/> 30: <circle cx="113" cy="95" r="3" style="fill: #000"/> 31: 32:  33: <rect x="100" y="102" height="5" width="1" style="fill: #000; 34: stroke: #000; stroke-width: 5px; stroke-linejoin: round"/> 35: 36:  37: <path d="M 85,110 A 5,5 0 1,0 115,110" style="fill: #FF0; stroke: #F00; 38: stroke-width: 2px"/> 39: 40:  41: 42: </svg>



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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: width="150" height="150" viewBox="0 0 100 200" preserveAspectRatio="xMidYMid meet"> 12: 13:  29: 30: <title>SVG - Learning By Coding</title> 31: <desc>SVG-Spezifikation in Beispielen</desc> 32: 33:  34: 35:  36: <circle cx="100" cy="100" r="40" style="fill: #FF0; stroke: #000; 37: stroke-width: 2px"/> 38: 39:  40: <ellipse cx="85" cy="90" rx="5" ry="10" style="fill: #FFF; 41: stroke: #000; stroke-width: 2px"/> 42: <ellipse cx="115" cy="90" rx="5" ry="10" style="fill: #FFF; 43: stroke: #000; stroke-width: 2px"/> 44: 45:  46: <circle cx="87" cy="95" r="3" style="fill: #000"/> 47: <circle cx="113" cy="95" r="3" style="fill: #000"/> 48: 49:  50: <rect x="100" y="102" height="5" width="1" style="fill: #000; 51: stroke: #000; stroke-width: 5px; stroke-linejoin: round"/> 52: 53:  54: <path d="M 85,110 A 5,5 0 1,0 115,110" style="fill: #FF0; stroke: #F00; 55: stroke-width: 2px"/> 56: 57:  58: 59: </svg>



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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: width="150" height="150" viewBox="0 0 100 200" preserveAspectRatio="xMidYMid slice"> 12: 13:  29: 30: <title>SVG - Learning By Coding</title> 31: <desc>SVG-Spezifikation in Beispielen</desc> 32: 33:  34: 35:  36: <circle cx="100" cy="100" r="40" style="fill: #FF0; stroke: #000; 37: stroke-width: 2px"/> 38: 39:  40: <ellipse cx="85" cy="90" rx="5" ry="10" style="fill: #FFF; 41: stroke: #000; stroke-width: 2px"/> 42: <ellipse cx="115" cy="90" rx="5" ry="10" style="fill: #FFF; 43: stroke: #000; stroke-width: 2px"/> 44: 45:  46: <circle cx="87" cy="95" r="3" style="fill: #000"/> 47: <circle cx="113" cy="95" r="3" style="fill: #000"/> 48: 49:  50: <rect x="100" y="102" height="5" width="1" style="fill: #000; 51: stroke: #000; stroke-width: 5px; stroke-linejoin: round"/> 52: 53:  54: <path d="M 85,110 A 5,5 0 1,0 115,110" style="fill: #FF0; stroke: #F00; 55: stroke-width: 2px"/> 56: 57:  58: 59: </svg>


wavelength2rgb.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: zoomAndPan="disable" onload="getSVGDoc(evt);Farbverlauf()" onzoom="ZoomControl()"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: 16: <defs> 17: 18: <script xlink:href="tool_tip.js" type="text/javascript"/> 19: 20: <script type="text/javascript"> 21: <![CDATA[ 22: 23: function WL2RGB(wl) 24: { 25: /* 26: Der Algorithmus zur naeherungsweisen Berechnung des RGB-Wertes zu 27: einer Licht-Wellenlaenge aus dem sichtbaren Spektrum stammt von: 28: http://www.physics.sfasu.edu/astro/color/spectra.html 29: http://lists.runrev.com/pipermail/use-revolution/2003-August/021029.html 30: 31: Beispielaufruf: 32: wlaenge=470; 33: rgb=WL2RGB(wlaenge); // rgb(0,169,255) 34: */ 35: 36: var max=255,gamma=0.8,r=0,g=0,b=0,f=0; 37: 38: switch(true) 39: { 40: case(wl>=380 && wl<440): 41: { 42: r=-(wl-440)/(440-380); 43: g=0; 44: b=1; 45: break; 46: } 47: 48: case(wl>=440 && wl<490): 49: { 50: r=0; 51: g=(wl-440)/(490-440); 52: b=1; 53: break; 54: } 55: 56: case(wl>=490 && wl<510): 57: { 58: r=0; 59: g=1; 60: b=-(wl-510)/(510-490); 61: break; 62: } 63: 64: case(wl>=510 && wl<580):


65: { 66: r=(wl-510)/(580-510); 67: g=1; 68: b=0; 69: break; 70: } 71: 72: case(wl>=580 && wl<645): 73: { 74: r=1; 75: g=-(wl-645)/(645-580); 76: b=0; 77: break; 78: } 79: 80: case(wl>=645 && wl<=780): 81: { 82: r=1; 83: g=0; 84: b=0; 85: break; 86: } 87: 88: default: 89: { 90: r=0; 91: g=0; 92: b=0; 93: break; 94: } 95: } 96: 97: if(wl>=380 && wl<420)f=0.3+0.7*(wl-380)/(420-380); 98: else if(wl>=420 && wl<=700)f=1; 99: else if(wl>700 && wl<=780)f=0.3+0.7*(780-wl)/(780-700); 100: else f=0; 101: 102: if(r>0)r=Math.round(max*Math.pow(r*f,gamma)); 103: if(g>0)g=Math.round(max*Math.pow(g*f,gamma)); 104: if(b>0)b=Math.round(max*Math.pow(b*f,gamma)); 105: 106: return "rgb("+r+","+g+","+b+")"; 107: } 108: 109: 110: function Farbverlauf() 111: { 112: var obj,neu,wlaenge,rgb; 113: parobj=svgdoc.getElementById("farbverlauf"); 114: 115: for(wlaenge=380;wlaenge<=780;wlaenge+=1) 116: { 117: rgb=WL2RGB(wlaenge); 118: neu=svgdoc.createElement("rect"); 119: neu.setAttribute("x",wlaenge-310); 120: neu.setAttribute("y",50); 121: neu.setAttribute("width","1"); 122: neu.setAttribute("height","30"); 123: neu.setAttribute("fill",rgb); 124: neu.setAttribute("onmousemove", 125: "ShowTooltip(evt,'"+wlaenge+" nm | "+rgb+"')"); 126: parobj.appendChild(neu); 127: } 128: } 129: 130: ]]> 131: </script> 132: 133: </defs> 134: 135: <rect x="0" y="0" width="100%" height="100%" style="fill: #FFF" 136: onmouseover="HideTooltip()"/> 137: 138: <text x="20" y="25" style="fill: #000; font-size: 24px"> 139: Spektralen Farbverlauf dynamisch erzeugen</text> 140: 141: <g id="farbverlauf"></g> 142:


143: <text x="20" y="70">380 nm</text> 144: <text x="480" y="70">780 nm</text> 145: 146: <text x="20" y="120"><tspan>Quellen: </tspan> 147: <a xlink:href="http://www.physics.sfasu.edu/astro/color/spectra.html" target="_top"> 148: <tspan style="fill: #00C">Approximate RGB values for Visible Wavelengths 149: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 150: <set attributeName="text-decoration" attributeType="CSS" to="underline" 151: begin="mouseover"/> 152: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 153: <set attributeName="text-decoration" attributeType="CSS" to="none" 154: begin="mouseout"/> 155: </tspan></a> 156: <tspan> und </tspan> 157: <a xlink:href= 158: "http://lists.runrev.com/pipermail/use-revolution/2003-August/021029.html" 159: target="_top"> 160: <tspan style="fill: #00C">Convert frequency to RGB 161: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 162: <set attributeName="text-decoration" attributeType="CSS" to="underline" 163: begin="mouseover"/> 164: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 165: <set attributeName="text-decoration" attributeType="CSS" to="none" 166: begin="mouseout"/> 167: </tspan></a> 168: </text> 169: 170:  171: <g id="tooltip" style="pointer-events: none"> 172: <rect id="ttr" x="0" y="0" rx="5" ry="5" width="100" height="16" 173: style="visibility: hidden"/> 174: <text id="ttt" x="0" y="0" style="visibility: hidden">dyn. Text</text> 175: </g> 176: 177: </svg>

weather.svg

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:  8:  9: 10: 11: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 12: onload="Init()"> 13: 14: <title>SVG - Learning By Coding</title> 15: <desc>SVG-Spezifikation in Beispielen</desc> 16: 17: <defs> 18: 19: <style type="text/css"> 20: <![CDATA[


21: 22: g.ort text 23: { 24: fill: #000; 25: } 26: 27: g.temp text 28: { 29: fill: #F00; 30: } 31: 32: g.druck text 33: { 34: fill: #00C; 35: } 36: 37: ]]> 38: </style> 39: 40: <script type="text/javascript"> 41: <![CDATA[ 42: 43: var svgdoc=document.documentElement; 44: var xmldoc,l,t,p,tid,pid,run=0;error=0; 45: 46: 47: function Init() 48: { 49: setTimeout("HoleDaten('Berlin','Germany')",1000); 50: setTimeout("HoleDaten('Bruxelle','Belgium')",3000); 51: setTimeout("HoleDaten('Leipzig','Germany')",5000); 52: setTimeout("HoleDaten('London','England')",7000); 53: } 54: 55: 56: function HoleDaten(City,Country) 57: { 58: // Beispielaufruf von weather.php: 59: // http://.../weather.php?City=Leipzig&Country=Germany 60: getURL("weather.php?City="+City+"&Country"+Country,callback); 61: run++; 62: } 63: 64: 65: function callback(urlRequestStatus) 66: { 67: if(urlRequestStatus.success && urlRequestStatus.content!="Error!") 68: { 69: xmldoc=parseXML(urlRequestStatus.content).documentElement; 70: 71: if(xmldoc) 72: { 73: // Wurzelelement: CurrentWeather 74: // Kindelemente: Location, Time, Wind, Visibility, Temperature, 75: // DewPoint, RelativeHumidity, Pressure, Status 76: 77: l=xmldoc.getElementsByTagName("Location").item(0).firstChild.nodeValue; 78: t=xmldoc.getElementsByTagName("Temperature").item(0).firstChild.nodeValue; 79: p=xmldoc.getElementsByTagName("Pressure").item(0).firstChild.nodeValue; 80: 81: if(l.indexOf("Berlin")!=-1) 82: { 83: tid="t1"; 84: pid="p1"; 85: } 86: if(l.indexOf("Bruxelle")!=-1) 87: { 88: tid="t2"; 89: pid="p2"; 90: } 91: if(l.indexOf("Leipzig")!=-1) 92: { 93: tid="t3"; 94: pid="p3"; 95: } 96: if(l.indexOf("London")!=-1) 97: { 98: tid="t4";


99: pid="p4"; 100: } 101: 102: svgdoc.getElementById(tid).childNodes.item(0).nodeValue=t; 103: svgdoc.getElementById(pid).childNodes.item(0).nodeValue=p; 104: } 105: } 106: else 107: { 108: error++; 109: } 110: 111: if(run==4 && error>0) 112: alert("Bei der Abfrage von WebserviceX.NET\nist ein Fehler aufgetreten!"); 113: } 114: 115: ]]> 116: </script> 117: 118: </defs> 119: 120: <a xlink:href="http://www.webservicex.net/WS/WSDetails.aspx?WSID=56&CATID=12" target="_top"> 121: <text x="20" y="30" style="fill: #000; font-size: 24px"> 122: Wetterdaten von WebserviceX.NET 123: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 124: <set attributeName="text-decoration" attributeType="CSS" to="underline" 125: begin="mouseover"/> 126: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 127: <set attributeName="text-decoration" attributeType="CSS" to="none" 128: begin="mouseout"/> 129: </text> 130: </a> 131: 132: <g class="ort"> 133:  134: <text x="20" y="70">Ort</text> 135: <text x="20" y="100">Berlin</text> 136: <text x="20" y="120">Brüssel</text> 137: <text x="20" y="140">Leipzig</text> 138: <text x="20" y="160">London</text> 139: </g> 140: 141: <g class="temp"> 142: <text x="120" y="70">Temperatur</text> 143:  144: <text id="t1" x="120" y="100"> </text> 145: <text id="t2" x="120" y="120"> </text> 146: <text id="t3" x="120" y="140"> </text> 147: <text id="t4" x="120" y="160"> </text> 148: </g> 149: 150: <g class="druck"> 151: <text x="250" y="70">Druck</text> 152:  153: <text id="p1" x="250" y="100"> </text> 154: <text id="p2" x="250" y="120"> </text> 155: <text id="p3" x="250" y="140"> </text> 156: <text id="p4" x="250" y="160"> </text> 157: </g> 158: 159: <line x1="20" y1="80" x2="390" y2="80"/> 160: <line x1="90" y1="55" x2="90" y2="165"/> 161: <line x1="230" y1="55" x2="230" y2="165"/> 162: 163: <a xlink:href="weather_php.txt" target="_top"> 164: <text x="20" y="200" style="fill: #000; font-size: 11px"> 165: PHP-Script zur Datenabfrage 166: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 167: <set attributeName="text-decoration" attributeType="CSS" to="underline" 168: begin="mouseover"/> 169: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 170: <set attributeName="text-decoration" attributeType="CSS" to="none" 171: begin="mouseout"/> 172: </text> 173: </a> 174: 175: </svg>


weather.php zu weather.svg 1: <?php 2: 3: // --------------------------------------------------- 4: // weather.php holt Wetterdaten von WebserviceX.NET 5: // http://www.webservicex.net/globalweather.asmx 6: // --------------------------------------------------- 7: // by Dr. Thomas Meinike 09/03 8: // SVG - Learning By Coding 9: // http://www.datenverdrahten.de/svglbc/ 10: // --------------------------------------------------- 11: // Beispielaufruf: 12: // http://.../weather.php?City=Leipzig&Country=Germany 13: // --------------------------------------------------- 14: // weather.php benoetigt keine PEAR::SOAP-Erweiterung 15: // wie im Artikel "Heißer Dienst" (PHP + Flash MX) 16: // von Tobias Hauser und Christian Wenz 17: // in Internet Professionell 10/2003, S. 44-46. 18: // --------------------------------------------------- 19: 20: 21: // Parameter 22: $City=$_GET["City"]; 23: $Country=$_GET["Country"]; 24: 25: // URL zusammensetzen 26: $url="http://www.webservicex.net/globalweather.asmx/GetWeather?CityName=$City&CountryName= $Country"; 27: 28: // Daten abfragen 29: $fp=@file($url); 30: 31: if($fp) 32: { 33: $xmlcontent=implode("",$fp); 34: // ab PHP 4.3.0: $xmlcontent=file_get_contents($url); 35: 36: // Ergebnisstring aufbereiten 37: $xmlcontent=str_replace("<string xmlns=\"http://www.webserviceX.NET\"><?xml version=\"1.0\" encoding=\"utf-16\"?>","",$xmlcontent); 38: $xmlcontent=str_replace("</string>","",$xmlcontent); 39: $xmlcontent=str_replace("<","<",$xmlcontent); 40: $xmlcontent=str_replace(">",">",$xmlcontent); 41: // ab PHP 4.3.0: $xmlcontent=html_entity_decode($xmlcontent); 42: 43: // XML-Code ausgeben 44: header("Content-type: application/xml"); 45: print $xmlcontent; // Verarbeitung des XML-Inhalts im SVG-Dokument weather.svg 46: } 47: else 48: { 49: header("Content-type: text/plain"); 50: print "Error!"; 51: } 52: 53: ?>


websichere_farben.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: onload="getSVGDoc(evt);WebsaveColors(15)" onzoom="ZoomControl()"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: 16: <defs> 17: 18: <script xlink:href="tool_tip.js" type="text/javascript"/> 19: 20: <script type="text/javascript"> 21: <![CDATA[ 22: 23: function WebsaveColors(kantenlaenge) 24: { 25: var hexpaare,aktfarbe,xstart,ystart,links,oben,i,j,k,x,y,z; 26: 27: hexpaare=new Array("00","33","66","99","CC","FF"); 28: aktfarbe=new Array(216); 29: rgbfarbe=new Array(216); 30: xstart=20; 31: ystart=50; 32: 33: // Array aktfarbe[] mit den Hex-Farbwerten fuellen 34: z=0; // Zaehlvariable 0 bis 215 fuer 216 Farben 35: 36: for(i=0;i<6;i++) 37: { 38: for(j=0;j<6;j++) 39: { 40: for(k=0;k<6;k++) 41: { 42: aktfarbe[z]="#"+hexpaare[i]+hexpaare[j]+hexpaare[k]; 43: rgbfarbe[z]="rgb("+parseInt("0x"+hexpaare[i],16)+","; 44: rgbfarbe[z]+=parseInt("0x"+hexpaare[j],16)+","; 45: rgbfarbe[z]+=parseInt("0x"+hexpaare[k],16)+")"; 46: z++; 47: } 48: } 49: } 50: 51: // Farbquadrate mit Tooltips ausgeben 52: z=0; // Zaehlvariable 0 bis 215 fuer 216 Farben 53: 54: for(y=0;y<6;y++) 55: { 56: oben=y*kantenlaenge+ystart; 57: 58: for(x=0;x<36;x++) 59: { 60: links=x*kantenlaenge+xstart; 61: 62: rectobj=svgdoc.createElement("rect"); 63: rectobj.setAttribute("x",links);


64: rectobj.setAttribute("y",oben); 65: rectobj.setAttribute("width",kantenlaenge); 66: rectobj.setAttribute("height",kantenlaenge); 67: rectobj.style.setProperty("fill",aktfarbe[z]); 68: rectobj.setAttribute("onmousemove", 69: "ShowTooltip(evt,'"+aktfarbe[z]+" | "+rgbfarbe[z]+"')"); 70: 71: svgroot.appendChild(rectobj); 72: z++; 73: } 74: } 75: 76: // Tooltip in den Vordergrund bringen 77: ttobj=svgdoc.getElementById("tooltip"); 78: svgroot.removeChild(ttobj); 79: svgroot.appendChild(ttobj); 80: } 81: 82: ]]> 83: </script> 84: 85: </defs> 86: 87: <rect x="0" y="0" width="100%" height="100%" style="fill: #FFF" 88: onmouseover="HideTooltip()"/> 89: 90: <text x="20" y="25" style="fill: #000; font-size: 24px"> 91: Web-sichere Farben dynamisch erzeugen (216)</text> 92: 93: <text x="20" y="40" style="fill: #00C"> 94: Kombinationen aus 00, 33, 66, 99, CC, FF</text> 95: 96:  97: <g id="tooltip" style="pointer-events: none"> 98: <rect id="ttr" x="0" y="0" rx="5" ry="5" width="100" height="16" 99: style="visibility: hidden"/> 100: <text id="ttt" x="0" y="0" style="visibility: hidden">dyn. Text</text> 101: </g> 102: 103: </svg>

writing-mode.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc>


14: <text x="20" y="30" style="fill: #000; font-size: 24px"> 15: Die CSS-Eigenschaft writing-mode</text> 16: 17: <text x="140px" y="80px" style="fill: #00F; font-size: 16px; 18: writing-mode: lr-tb">Testtext mit lr-tb</text> 19: <text x="200px" y="110px" style="fill: #F00; font-size: 16px; 20: writing-mode: tb-rl">Testtext mit tb-rl</text> 21: 22: </svg>

wuerfelspiel.svg

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:  8:  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:  19: 20: <symbol id="wuerfel1"> 21: <rect x="0" y="0" rx="10" ry="10" width="60" height="60"/> 22: <circle cx="30" cy="30" r="5"/> 23: </symbol> 24: 25: <symbol id="wuerfel2"> 26: <rect x="0" y="0" rx="10" ry="10" width="60" height="60"/> 27: <circle cx="10" cy="10" r="5"/> 28: <circle cx="50" cy="50" r="5"/> 29: </symbol> 30: 31: <symbol id="wuerfel3"> 32: <rect x="0" y="0" rx="10" ry="10" width="60" height="60"/> 33: <circle cx="10" cy="10" r="5"/> 34: <circle cx="30" cy="30" r="5"/> 35: <circle cx="50" cy="50" r="5"/> 36: </symbol> 37: 38: <symbol id="wuerfel4"> 39: <rect x="0" y="0" rx="10" ry="10" width="60" height="60"/> 40: <circle cx="10" cy="10" r="5"/> 41: <circle cx="50" cy="10" r="5"/> 42: <circle cx="10" cy="50" r="5"/> 43: <circle cx="50" cy="50" r="5"/> 44: </symbol> 45: 46: <symbol id="wuerfel5"> 47: <rect x="0" y="0" rx="10" ry="10" width="60" height="60"/>


48: <circle cx="10" cy="10" r="5"/> 49: <circle cx="50" cy="10" r="5"/> 50: <circle cx="30" cy="30" r="5"/> 51: <circle cx="10" cy="50" r="5"/> 52: <circle cx="50" cy="50" r="5"/> 53: </symbol> 54: 55: <symbol id="wuerfel6"> 56: <rect x="0" y="0" rx="10" ry="10" width="60" height="60"/> 57: <circle cx="10" cy="10" r="5"/> 58: <circle cx="50" cy="10" r="5"/> 59: <circle cx="10" cy="30" r="5"/> 60: <circle cx="50" cy="30" r="5"/> 61: <circle cx="10" cy="50" r="5"/> 62: <circle cx="50" cy="50" r="5"/> 63: </symbol> 64: 65:  66: 67: 68: <style type="text/css"> 69: <![CDATA[ 70: 71: circle 72: { 73: fill: #FFF; 74: } 75: 76: rect 77: { 78: fill: #000; 79: stroke: #000; 80: stroke-width: 2px; 81: } 82: 83: ]]> 84: </style> 85: 86: 87: <script type="text/javascript"> 88: <![CDATA[ 89: 90: var svgdoc,summe=0,ns="http://www.w3.org/1999/xlink",attr="xlink:href"; 91: 92: 93: function getSVGDoc(load_evt) 94: { 95: svgdoc=load_evt.target.ownerDocument; 96: } 97: 98: 99: function Zufallszahl(von,bis) 100: { 101: var z; 102: 103: z=Math.round(von+(bis-von)*Math.random()); 104: return z; 105: } 106: 107: 108: function Wuerfeln() 109: { 110: var w1,w2,w3,z1,z2,z3; 111: 112: // drei Zufallszahlen zwischen 1 und 6 bestimmen 113: z1=Zufallszahl(1,6); 114: z2=Zufallszahl(1,6); 115: z3=Zufallszahl(1,6); 116: 117: // Augenzahl aufsummieren 118: summe+=z1+z2+z3; 119: 120: // Wuerfel-IDs ermitteln 121: w1="wuerfel"+z1; 122: w2="wuerfel"+z2; 123: w3="wuerfel"+z3; 124: 125: // Augenzahlsumme ausgeben


126: svgdoc.getElementById("summe").firstChild.data=summe; 127: 128: // Wuerfelgrafiken zur Anzeige bringen 129: svgdoc.getElementById("w1").setAttributeNS(ns,attr,"#"+w1); 130: svgdoc.getElementById("w2").setAttributeNS(ns,attr,"#"+w2); 131: svgdoc.getElementById("w3").setAttributeNS(ns,attr,"#"+w3); 132: } 133: 134: 135: function NeuesSpiel() 136: { 137: // den Anfangszustand herstellen 138: summe=0; 139: 140: svgdoc.getElementById("summe").firstChild.data=summe; 141: 142: svgdoc.getElementById("w1").setAttributeNS(ns,attr,""); 143: svgdoc.getElementById("w2").setAttributeNS(ns,attr,""); 144: svgdoc.getElementById("w3").setAttributeNS(ns,attr,""); 145: } 146: 147: ]]> 148: </script> 149: 150: </defs> 151: 152: <text x="20" y="30" style="fill: #000; font-size: 24px"> 153: Würfelspiel (Würfel als Symbole definiert)</text> 154: 155: <use id="w1" xlink:href="" x="120" y="80" width="60" height="60"/> 156: <use id="w2" xlink:href="" x="200" y="80" width="60" height="60"/> 157: <use id="w3" xlink:href="" x="280" y="80" width="60" height="60"/> 158: 159: <a xlink:href="" onclick="Wuerfeln()"> 160: <text x="130" y="180">Würfeln</text> 161: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseover"/> 162: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 163: </a> 164: 165: <text id="summe" x="220" y="180">0</text> 166: 167: <a xlink:href="" onclick="NeuesSpiel()"> 168: <text x="280" y="180">Neues Spiel</text> 169: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 170: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 171: </a> 172: 173: </svg>

xml_space.svg



13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px"> 15: xml:space="default | preserve"</text> 16: 17: <text x="30" y="80" style="fill: #090; font-family: monospace; font-size: 20px; 18: font-weight: bold" xml:space="default">Text mit xml:space="default". 19: </text> 20: 21: <text x="30" y="120" style="fill: #F00; font-family: monospace; font-size: 20px; 22: font-weight: bold" xml:space="preserve">Text mit xml:space="preserve". 23: </text> 24: 25: </svg>

xml-xslt-bsp1.svg

1: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?> 2:  3: <!DOCTYPE svg 4: PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/ svg10.dtd"> 5: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600"> 6: <title>Einwohnerzahlen am Stichtag 31.12.2002</title> 7: <desc> 8: XML-Daten wurden mittels XSLT in SVG umgewandelt - Material by Dr. Thomas Meinike 06/03 9: Verwendet wurde der XSLT-Prozessor Instant Saxon 6.5.2 - http://saxon.sourceforge.net 10: Programmaufruf: 11: saxon -o einwohnerdaten.svg einwohnerdaten.xml einwohnerdaten.xsl 12: </desc> 13: <defs> 14: <filter id="flt"> 15: <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="out1"/> 16: <feSpecularLighting in="out1" specularExponent="30" surfaceScale="10" result="out2"> 17: <fePointLight x="50" y="100" z="300"/>


18: </feSpecularLighting> 19: <feComposite in="SourceGraphic" in2="out2" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> 20: </filter> 21: <linearGradient id="lingra"> 22: <stop offset="0%" style="stop-color: #F00"/> 23: <stop offset="75%" style="stop-color: #FF0"/> 24: <stop offset="100%" style="stop-color: #FFC"/> 25: </linearGradient> 26: <style type="text/css"> 27: 28: rect 29: { 30: fill: url(#lingra); 31: filter: url(#flt); 32: stroke: #000; 33: stroke-width: 0.3px; 34: } 35: 36: text 37: { 38: font-size: 12px; 39: } 40: 41: text.headline 42: { 43: font-size: 24px; 44: fill: #00C; 45: } 46: 47: text.bundesland 48: { 49: font-weight: bold; 50: fill: #00C; 51: } 52: 53: text.legende 54: { 55: fill: #000; 56: } 57: 58: a text 59: { 60: fill: #F00; 61: text-decoration: underline; 62: } 63: 64: </style> 65: </defs> 66: <text x="10" y="30" class="headline">Einwohnerzahlen am Stichtag 31.12.2002</text> 67: <text x="10" y="50" class="legende">Legende: [Einwohner gesamt | Einwohner pro km²]</text> 68: <text x="10" y="82" class="bundesland">Baden-Württemberg</text> 69: <rect x="170" y="70" width="266.525" height="15"/> 70: <text x="446.525" y="82" class="legende">[10661000 | 298]</text> 71: <text x="10" y="107" class="bundesland">Bayern</text> 72: <rect x="170" y="95" width="309.675" height="15"/> 73: <text x="489.675" y="107" class="legende">[12387000 | 176]</text> 74: <text x="10" y="132" class="bundesland">Berlin</text> 75: <rect x="170" y="120" width="84.8" height="15"/> 76: <text x="264.8" y="132" class="legende">[3392000 | 3804]</text> 77: <text x="10" y="157" class="bundesland">Brandenburg</text> 78: <rect x="170" y="145" width="64.55" height="15"/> 79: <text x="244.55" y="157" class="legende">[2582000 | 88]</text> 80: <text x="10" y="182" class="bundesland">Bremen</text> 81: <rect x="170" y="170" width="16.55" height="15"/> 82: <text x="196.55" y="182" class="legende">[662000 | 1637]</text> 83: <text x="10" y="207" class="bundesland">Hamburg</text> 84: <rect x="170" y="195" width="43.225" height="15"/> 85: <text x="223.225" y="207" class="legende">[1729000 | 2289]</text> 86: <text x="10" y="232" class="bundesland">Hessen</text> 87: <rect x="170" y="220" width="152.3" height="15"/> 88: <text x="332.3" y="232" class="legende">[6092000 | 289]</text> 89: <text x="10" y="257" class="bundesland">Mecklenburg-Vorpommern</text> 90: <rect x="170" y="245" width="43.625" height="15"/> 91: <text x="223.625" y="257" class="legende">[1745000 | 75]</text> 92: <text x="10" y="282" class="bundesland">Niedersachsen</text> 93: <rect x="170" y="270" width="199.5" height="15"/>


94: <text x="379.5" y="282" class="legende">[7980000 | 168]</text> 95: <text x="10" y="307" class="bundesland">Nordrhein-Westfalen</text> 96: <rect x="170" y="295" width="451.9" height="15"/> 97: <text x="631.9" y="307" class="legende">[18076000 | 530]</text> 98: <text x="10" y="332" class="bundesland">Rheinland-Pfalz</text> 99: <rect x="170" y="320" width="101.45" height="15"/> 100: <text x="281.45" y="332" class="legende">[4058000 | 204]</text> 101: <text x="10" y="357" class="bundesland">Saarland</text> 102: <rect x="170" y="345" width="26.625" height="15"/> 103: <text x="206.625" y="357" class="legende">[1065000 | 415]</text> 104: <text x="10" y="382" class="bundesland">Sachsen</text> 105: <rect x="170" y="370" width="108.725" height="15"/> 106: <text x="288.725" y="382" class="legende">[4349000 | 236]</text> 107: <text x="10" y="407" class="bundesland">Sachsen-Anhalt</text> 108: <rect x="170" y="395" width="63.725" height="15"/> 109: <text x="243.725" y="407" class="legende">[2549000 | 125]</text> 110: <text x="10" y="432" class="bundesland">Schleswig-Holstein</text> 111: <rect x="170" y="420" width="70.425" height="15"/> 112: <text x="250.425" y="432" class="legende">[2817000 | 179]</text> 113: <text x="10" y="457" class="bundesland">Thüringen</text> 114: <rect x="170" y="445" width="59.8" height="15"/> 115: <text x="239.8" y="457" class="legende">[2392000 | 148]</text> 116: <text x="10" y="500">Diese Grafik wurde aus XML-Daten mittels XSLT erzeugt:</text> 117: <a xlink:href="einwohnerdaten.xml" target="_top"> 118: <text x="320" y="500">XML-Dokument</text> 119: </a> 120: <a xlink:href="einwohnerdaten.xsl" target="_top"> 121: <text x="410" y="500">XSL-Stylesheet</text> 122: </a> 123: <a xlink:href="http://www.destatis.de/jahrbuch/jahrtab1.htm" target="_top"> 124: <text x="10" y="520">Datenquelle: Statistisches Bundesamt Deutschland</text> 125: </a> 126: </svg>

einwohnerdaten.xml zu xml-xslt-bsp1.svg 1: <?xml version="1.0" encoding="ISO-8859-1" 2: 3:  4:  5: 6: <daten info="Einwohnerzahlen am Stichtag 31.12.2002" 7: quelle="Statistisches Bundesamt Deutschland" 8: url="http://www.destatis.de/jahrbuch/jahrtab1.htm"> 9: 10:  11: 12: <datensatz> 13: <bundesland>Baden-Württemberg</bundesland> 14: <einwohner>10661000</einwohner> 15: <flaeche>35751.64</flaeche> 16: </datensatz> 17: 18: <datensatz> 19: <bundesland>Bayern</bundesland> 20: <einwohner>12387000</einwohner> 21: <flaeche>70549.32</flaeche> 22: </datensatz> 23: 24: <datensatz> 25: <bundesland>Berlin</bundesland> 26: <einwohner>3392000</einwohner> 27: <flaeche>891.75</flaeche> 28: </datensatz> 29: 30: <datensatz> 31: <bundesland>Brandenburg</bundesland> 32: <einwohner>2582000</einwohner> 33: <flaeche>29476.67</flaeche> 34: </datensatz> 35: 36: <datensatz> 37: <bundesland>Bremen</bundesland> 38: <einwohner>662000</einwohner>


39: <flaeche>404.28</flaeche> 40: </datensatz> 41: 42: <datensatz> 43: <bundesland>Hamburg</bundesland> 44: <einwohner>1729000</einwohner> 45: <flaeche>755.26</flaeche> 46: </datensatz> 47: 48: <datensatz> 49: <bundesland>Hessen</bundesland> 50: <einwohner>6092000</einwohner> 51: <flaeche>21114.88</flaeche> 52: </datensatz> 53: 54: <datensatz> 55: <bundesland>Mecklenburg-Vorpommern</bundesland> 56: <einwohner>1745000</einwohner> 57: <flaeche>23172.46</flaeche> 58: </datensatz> 59: 60: <datensatz> 61: <bundesland>Niedersachsen</bundesland> 62: <einwohner>7980000</einwohner> 63: <flaeche>47617.97</flaeche> 64: </datensatz> 65: 66: <datensatz> 67: <bundesland>Nordrhein-Westfalen</bundesland> 68: <einwohner>18076000</einwohner> 69: <flaeche>34082.76</flaeche> 70: </datensatz> 71: 72: <datensatz> 73: <bundesland>Rheinland-Pfalz</bundesland> 74: <einwohner>4058000</einwohner> 75: <flaeche>19846.91</flaeche> 76: </datensatz> 77: 78: <datensatz> 79: <bundesland>Saarland</bundesland> 80: <einwohner>1065000</einwohner> 81: <flaeche>2568.53</flaeche> 82: </datensatz> 83: 84: <datensatz> 85: <bundesland>Sachsen</bundesland> 86: <einwohner>4349000</einwohner> 87: <flaeche>18413.29</flaeche> 88: </datensatz> 89: 90: <datensatz> 91: <bundesland>Sachsen-Anhalt</bundesland> 92: <einwohner>2549000</einwohner> 93: <flaeche>20444.72</flaeche> 94: </datensatz> 95: 96: <datensatz> 97: <bundesland>Schleswig-Holstein</bundesland> 98: <einwohner>2817000</einwohner> 99: <flaeche>15762.90</flaeche> 100: </datensatz> 101: 102: <datensatz> 103: <bundesland>Thüringen</bundesland> 104: <einwohner>2392000</einwohner> 105: <flaeche>16172.21</flaeche> 106: </datensatz> 107: 108: </daten>


einwohnerdaten.xsl zu xml-xslt-bsp1.svg 1: <?xml version="1.0" encoding="ISO-8859-1" 2: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 3: 4:  5:  6:  7: 8: <xsl:output 9: method="xml" 10: doctype-public="-//W3C//DTD SVG 1.0//EN" 11: doctype-system="http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" 12: encoding="ISO-8859-1" 13: standalone="no" 14: version="1.0" 15: media-type="image/svg+xml" 16: indent="yes" 17: /> 18: 19: <xsl:template match="/"> 20: 21: <xsl:comment> generiert von einwohnerdaten.xsl </xsl:comment> 22: 23: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 24: width="800" height="600"> 25: 26: <title><xsl:value-of select="daten/@info"/></title> 27: <desc> 28: XML-Daten wurden mittels XSLT in SVG umgewandelt - Material by Dr. Thomas Meinike 06/03 29: Verwendet wurde der XSLT-Prozessor Instant Saxon 6.5.2 - http://saxon.sourceforge.net 30: Programmaufruf: 31: saxon -o einwohnerdaten.svg einwohnerdaten.xml einwohnerdaten.xsl 32: </desc> 33: 34: <defs> 35: 36: <filter id="flt"> 37: <feGaussianBlur in="SourceAlpha" stdDeviation="1" result="out1"/> 38: <feSpecularLighting in="out1" specularExponent="30" surfaceScale="10" result="out2"> 39: <fePointLight x="50" y="100" z="300"/> 40: </feSpecularLighting> 41: <feComposite in="SourceGraphic" in2="out2" operator="arithmetic" 42: k1="0" k2="1" k3="1" k4="0"/> 43: </filter> 44: 45: <linearGradient id="lingra"> 46: <stop offset="0%" style="stop-color: #F00"/> 47: <stop offset="75%" style="stop-color: #FF0"/> 48: <stop offset="100%" style="stop-color: #FFC"/> 49: </linearGradient> 50: 51: <style type="text/css"> 52: <![CDATA[ 53: rect 54: { 55: fill: url(#lingra); 56: filter: url(#flt); 57: stroke: #000; 58: stroke-width: 0.3px; 59: } 60: 61: text 62: { 63: font-size: 12px; 64: } 65: 66: text.headline 67: { 68: font-size: 24px; 69: fill: #00C; 70: } 71: 72: text.bundesland 73: {


74: font-weight: bold; 75: fill: #00C; 76: } 77: 78: text.legende 79: { 80: fill: #000; 81: } 82: 83: a text 84: { 85: fill: #F00; 86: text-decoration: underline; 87: } 88: ]]> 89: </style> 90: 91: </defs> 92: 93: <text x="10" y="30" class="headline"><xsl:value-of select="daten/@info"/></text> 94: <text x="10" y="50" class="legende">Legende: [Einwohner gesamt | Einwohner pro km²]</text> 95: 96: <xsl:for-each select="daten/datensatz"> 97: 98: <xsl:variable name="yr" select="70+25*(position()-1)"/> 99: <xsl:variable name="yt" select="$yr+12"/> 100: <xsl:variable name="b" select="einwohner div 40000"/> 101: 102: <text x="10" y="{$yt}" class="bundesland"><xsl:value-of select="bundesland"/></text> 103: <rect x="170" y="{$yr}" width="{$b}" height="15"/> 104: <text x="{180+$b}" y="{$yt}" class="legende">[<xsl:value-of select="einwohner"/> | <xsl:value-of select="round(einwohner div flaeche)"/>]</text> 105: 106: </xsl:for-each> 107: 108: <xsl:variable name="qy" select="100+25*count(daten/datensatz/bundesland)"/> 109: <xsl:variable name="url" select="daten/@url"/> 110: 111: <text x="10" y="{$qy}">Diese Grafik wurde aus XML-Daten mittels XSLT erzeugt:</text> 112: 113: <a xlink:href="einwohnerdaten.xml" target="_top"> 114: <text x="320" y="{$qy}">XML-Dokument</text> 115: </a> 116: 117: <a xlink:href="einwohnerdaten.xsl" target="_top"> 118: <text x="410" y="{$qy}">XSL-Stylesheet</text> 119: </a> 120: 121: <a xlink:href="{$url}" target="_top"> 122: <text x="10" y="{$qy+20}">Datenquelle: <xsl:value-of select="daten/@quelle"/></text> 123: </a> 124: 125: </svg> 126: 127: </xsl:template> 128: </xsl:stylesheet>


xml-xslt-bsp2.svg

1: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?> 2: 3: <!DOCTYPE svg 4: PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/ svg10.dtd"> 5: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 6: <text x="50" y="30" style="font-size: 24px">Zufallszahlen-Verteilung 7: (500 Punkte)</text> 8: <polyline style="fill: none; stroke: #F00; stroke-width: 1.2px" points="50,213.26530612244898 ... 648.8,74.48979591836735 "/> 9: <line x1="50" x2="650" y1="245.91836734693877" y2="245.91836734693877"/> 10: <line x1="50" x2="650" y1="50" y2="50"/> 11: <text x="655" y="250.91836734693877">1</text> 12: <text x="655" y="55">49</text> 13: <text x="50" y="270">Diese Grafik wurde aus XML-Daten mittels XSLT erzeugt:</text> 14: <a xlink:href="zufallszahlen.xml" target="_top"> 15: <text x="50" y="290">XML-Dokument</text> 16: </a> 17: <a xlink:href="zufallszahlen.xsl" target="_top"> 18: <text x="150" y="290">XSL-Stylesheet</text> 19: </a> 20: <a xlink:href="zufallszahlen.htm" target="_top"> 21: <text x="250" y="290">PHP-Script zur Datengenerierung</text> 22: </a> 23: </svg>

zufallszahlen.xml zu xml-xslt-bsp2.svg 1: <?xml version="1.0" encoding="ISO-8859-1" 2: 3:  4:  5: 6: <zufallszahlen from="1" to="49"> 7: <zz>9</zz> ... 506: <zz>43</zz> 507: </zufallszahlen>


zufallszahlen.xsl zu xml-xslt-bsp2.svg 1: <?xml version="1.0" encoding="ISO-8859-1" 2: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 3: 4:  5:  6:  7: 8: <xsl:output 9: method="xml" 10: doctype-public="-//W3C//DTD SVG 1.0//EN" 11: doctype-system="http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" 12: encoding="ISO-8859-1" 13: standalone="no" 14: version="1.0" 15: media-type="image/svg+xml" 16: indent="yes" 17: /> 18: 19: 20:  21: <xsl:variable name="xmin" select="50"/> 22: <xsl:variable name="xmax" select="650"/> 23: <xsl:variable name="ymin" select="50"/> 24: <xsl:variable name="ymax" select="250"/> 25: <xsl:variable name="punkte" select="count(/zufallszahlen/zz)"/> 26: <xsl:variable name="from" select="/zufallszahlen/@from"/> 27: <xsl:variable name="to" select="/zufallszahlen/@to"/> 28: <xsl:variable name="xskal" select="($xmax - $xmin) div $punkte"/> 29: <xsl:variable name="yskal" select="($ymax - $ymin) div $to"/> 30: 31: 32: <xsl:template match="zufallszahlen"> 33: 34: <xsl:comment> generiert von zufallszahlen.xsl </xsl:comment> 35: 36: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 37: 38: <text x="{$xmin}" y="{$ymin - 20}" style="font-size: 24px">Zufallszahlen-Verteilung 39: (<xsl:value-of select="$punkte"/> Punkte)</text> 40: 41: <polyline style="fill: none; stroke: #F00; stroke-width: 1.2px"> 42: <xsl:attribute name="points"> 43: <xsl:apply-templates select="zz"/> 44: </xsl:attribute> 45: </polyline> 46: 47: <xsl:variable name="faktor" select="($ymax - $ymin) div @to"/> 48: 49: <line x1="{$xmin}" x2="{$xmin + $xskal * $punkte}" y1="{$ymax - $faktor * $from}" y2="{$ymax - $faktor * $from}"/> 50: <line x1="{$xmin}" x2="{$xmin + $xskal * $punkte}" y1="{$ymax - $faktor * $to}" y2="{$ymax - $faktor * $to}"/> 51: 52: <text x="{$xmin + $xskal * $punkte + 5}" y="{$ymax - $faktor * $from + 5}"><xsl:value-of select="$from"/></text> 53: <text x="{$xmin + $xskal * $punkte + 5}" y="{$ymax - $faktor * $to + 5}"><xsl:value-of select="$to"/></text> 54: 55: <text x="{$xmin}" y="{$ymax + 20}">Diese Grafik wurde aus XML-Daten mittels XSLT erzeugt:</text> 56: 57: <a xlink:href="zufallszahlen.xml" target="_top"> 58: <text x="{$xmin}" y="{$ymax + 40}">XML-Dokument</text> 59: </a> 60: 61: <a xlink:href="zufallszahlen.xsl" target="_top"> 62: <text x="{$xmin + 100}" y="{$ymax + 40}">XSL-Stylesheet</text> 63: </a> 64: 65: <a xlink:href="zufallszahlen.htm" target="_top"> 66: <text x="{$xmin + 200}" y="{$ymax + 40}">PHP-Script zur Datengenerierung</text> 67: </a> 68: 69: </svg> 70:


71: </xsl:template> 72: 73: 74: <xsl:template match="zz"> 75: 76: <xsl:value-of select="$xmin + $xskal * (position()-1)"/> 77: <xsl:text>,</xsl:text> 78: <xsl:value-of select="$ymax - $yskal * ."/> 79: <xsl:text> </xsl:text> 80: 81: </xsl:template> 82: 83: </xsl:stylesheet>

zufallszahlen.php zu xml-xslt-bsp2.svg 1: <?php 2: 3: $xmlfile="zufallszahlen.xml"; 4: $from=1; 5: $to=49; 6: $anzahl=500; 7: 8: $xml1="xml version=\"1.0\" encoding=\"ISO-8859-1\"\n\n"; 9: $xml1.="\n"; 10: $xml1.="\n\n"; 11: $xml1.="<zufallszahlen from=\"$from\" to=\"$to\">\n"; 12: $xml2="</zufallszahlen>\n"; 13: 14: mt_srand((double)microtime()*1000000); 15: 16: for($i=0;$i<$anzahl;$i++) 17: { 18: $zufallszahl=mt_rand($from,$to); 19: $tmpout.=" <zz>$zufallszahl</zz>\n"; 20: } 21: 22: $xmlout=$xml1.$tmpout.$xml2; 23: 24: $ref=fopen($xmlfile,"w"); 25: flock($ref,2); 26: fwrite($ref,$xmlout); 27: flock($ref,3); 28: fclose($ref); 29: 30: ?>


zeichenreihenfolge.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: <text x="20" y="30" style="fill: #000; font-size: 24px"> 15: Zeichenreihenfolge der Objekte (z-index ???)</text> 16: 17:  18: 19:  20: <circle cx="100" cy="100" r="40" style="fill: #FF0; stroke: #000; 21: stroke-width: 2px"/> 22: 23:  24: <ellipse cx="85" cy="90" rx="5" ry="10" style="fill: #FFF; 25: stroke: #000; stroke-width: 2px"/> 26: <ellipse cx="115" cy="90" rx="5" ry="10" style="fill: #FFF; 27: stroke: #000; stroke-width: 2px"/> 28: 29:  30: <circle cx="87" cy="95" r="3" style="fill: #000"/> 31: <circle cx="113" cy="95" r="3" style="fill: #000"/> 32: 33:  34: <rect x="100" y="102" height="5" width="1" style="fill: #000; 35: stroke: #000; stroke-width: 5px; stroke-linejoin: round"/> 36: 37:  38: <path d="M 85,130 A 5,5 0 1,1 115,130" style="fill: #FF0; stroke: #F00; 39: stroke-width: 2px"> 40: <animate attributeName="d" attributeType="XML" begin="0s" dur="10s" fill="freeze" 41: from="M 85,130 A 5,5 0 1,1 115,130" to="M 85,110 A 5,5 0 1,0 115,110"/> 42: </path> 43: 44:  45: 46: <text x="30" y="180">Hinweis: SVG bietet (noch) keine Eigenschaft z-index.</text> 47: <text x="30" y="200">Nach dem "painters model" werden die Objekte 48: in der Reihenfolge ihrer Definition gezeichnet.</text> 49: 50: <a xlink:href="../?doc=objekte_top" target="_top"> 51: <text x="30" y="220" style="fill: #F00"> 52: <tspan style="fill: #00C">[ </tspan> 53: Siehe Beispiel zur Änderung der Objektabfolge mittels DOM-Scripting 54: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseover"/> 55: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseout"/> 56: <tspan style="fill: #00C"> ]</tspan> 57: </text>


58: </a> 59: 60: </svg>

zoomAndPan.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <text x="20" y="30" style="fill: #000; font-size: 24px"> 16: Zoomen und Verschieben (de)aktivieren [zoomAndPan] 17: </text> 18: 19: <circle cx="100" cy="90" r="30" style="fill: #FF0; stroke: #00C"/> 20: 21: <text x="30" y="160" style="fill: #000"> 22: zoomAndPan kann die Werte magnify (=Standard) und disable annehmen. 23: </text> 24: 25: <a xlink:href=""> 26: <text x="30" y="180" style="fill: #F00" 27: onclick="svgDocument.rootElement.setAttribute('zoomAndPan','disable')"> 28: zoomAndPan auf disable setzen ... 29: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseover"/> 30: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseout"/> 31: </text> 32: </a> 33: 34: <a xlink:href=""> 35: <text x="30" y="200" style="fill: #F00" 36: onclick="svgDocument.rootElement.setAttribute('zoomAndPan','magnify')"> 37: zoomAndPan auf magnify setzen ... 38: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseover"/> 39: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseout"/> 40: </text> 41: </a> 42: 43: </svg>


zufallsfarben1.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <style type="text/css"> 18: <![CDATA[ 19: 20: text.t1 21: { 22: fill: #F00; 23: font-size: 12px; 24: } 25: 26: text.t2 27: { 28: fill: #00C; 29: font-size: 12px; 30: } 31: 32: ]]> 33: </style> 34: 35: 36: <script type="text/javascript"> 37: <![CDATA[ 38: 39: function Zufallsfarbe() 40: { 41: var r,g,b,rgb; 42: 43: r=Math.round(Math.random()*255); 44: g=Math.round(Math.random()*255); 45: b=Math.round(Math.random()*255); 46: rgb="rgb("+r+","+g+","+b+")"; 47: 48: // als rgb(r,g,b) direkt verwendbar fuer style-Objekt 49: return rgb; 50: } 51: 52: 53: function ZeigeFarbe(click_evt)


54: { 55: var svgdoc,rgbfarbe,hexfarbe,hex,hr,hg,hb,ausgabe; 56: 57: svgdoc=click_evt.target.ownerDocument; 58: 59: // Funktion Zufallsfarbe() aufrufen 60: rgbfarbe=Zufallsfarbe(); 61: 62: // RGB-Werte zur Anzeige in Hex-Schreibweise umwandeln 63: hex=rgbfarbe.substring(4,rgbfarbe.length-1); 64: hex=hex.split(","); 65: hr=parseInt(hex[0]).toString(16).toUpperCase(); 66: hr=(hr.length==1)?"0"+hr:hr; 67: hg=parseInt(hex[1]).toString(16).toUpperCase(); 68: hg=(hg.length==1)?"0"+hg:hg; 69: hb=parseInt(hex[2]).toString(16).toUpperCase(); 70: hb=(hb.length==1)?"0"+hb:hb; 71: hexfarbe="#"+hr+hg+hb; // #RRGGBB 72: 73: ausgabe=rgbfarbe+" | "+hexfarbe; 74: 75: // Kreisfarbe zuweisen sowie Farbwerte ausgeben 76: click_evt.target.style.setProperty("fill",rgbfarbe); 77: svgdoc.getElementById("farbwerte").firstChild.data=ausgabe; 78: } 79: 80: ]]> 81: </script> 82: 83: </defs> 84: 85: <text x="20" y="30" style="fill: #000; font-size: 24px"> 86: Zufallsfarben erzeugen</text> 87: 88: <circle cx="140" cy="150" r="80" style="fill: #FFF; stroke: #000" 89: onclick="ZeigeFarbe(evt)"/> 90: 91: <text x="100" y="270" class="t1">Kreis anklicken!</text> 92: 93: <text id="farbwerte" x="70" y="290" class="t2"> </text> 94: 95: </svg>


zufallsfarben2.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: onload="getSVGDoc(evt);FarbQuadrate(25)" onzoom="ZoomControl()"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: 16: <defs> 17: 18: <script xlink:href="tool_tip.js" type="text/javascript"/> 19: 20: 21: <script type="text/javascript"> 22: <![CDATA[ 23: 24: function Zufallsfarbe() 25: { 26: var r,g,b,rgb; 27: 28: r=Math.round(Math.random()*255); 29: g=Math.round(Math.random()*255); 30: b=Math.round(Math.random()*255); 31: rgb="rgb("+r+","+g+","+b+")"; 32: 33: // als rgb(r,g,b) direkt verwendbar fuer style-Objekt 34: return rgb; 35: } 36: 37:


38: function FarbQuadrate(kantenlaenge) 39: { 40: // Rechtecke mit Breite = Hoehe = kantenlaenge erzeugen 41: var fbreite,fhoehe,hanzahl,vanzahl,istart,jstart, 42: oben,links,zfarbe,rectobj,ttobj; 43: 44: fbreite=window.innerWidth; 45: fhoehe=window.innerHeight; 46: 47: hanzahl=parseInt(fbreite/kantenlaenge); 48: vanzahl=parseInt(fhoehe/kantenlaenge); 49: istart=Math.round((fbreite-hanzahl*kantenlaenge)/2); 50: jstart=Math.round((fhoehe-vanzahl*kantenlaenge)/2)+kantenlaenge; 51: 52: for(j=0;j<vanzahl-1;j++) 53: { 54: oben=j*kantenlaenge+jstart; 55: 56: for(i=0;i<hanzahl;i++) 57: { 58: zfarbe=Zufallsfarbe(); 59: links=i*kantenlaenge+istart; 60: 61: rectobj=svgdoc.createElement("rect"); 62: rectobj.setAttribute("x",links); 63: rectobj.setAttribute("y",oben); 64: rectobj.setAttribute("width",kantenlaenge); 65: rectobj.setAttribute("height",kantenlaenge); 66: rectobj.style.setProperty("fill",zfarbe); 67: rectobj.setAttribute("onmousemove","ShowTooltip(evt,'"+zfarbe+"')"); 68: if(j==0 || j==vanzahl-2 || i==0 || i==hanzahl-1) 69: rectobj.setAttribute("onmouseout","HideTooltip()"); 70: 71: svgroot.appendChild(rectobj); 72: } 73: } 74: 75: // Tooltip in den Vordergrund bringen 76: ttobj=svgdoc.getElementById("tooltip"); 77: svgroot.removeChild(ttobj); 78: svgroot.appendChild(ttobj); 79: } 80: 81: ]]> 82: </script> 83: 84: </defs> 85: 86: <text x="20" y="25" style="fill: #000; font-size: 24px"> 87: Zufallsfarben erzeugen</text> 88: 89:  90: <g id="tooltip" style="pointer-events: none"> 91: <rect id="ttr" x="0" y="0" rx="5" ry="5" width="100" height="16" 92: style="visibility: hidden"/> 93: <text id="ttt" x="0" y="0" style="visibility: hidden">dyn. Text</text> 94: </g> 95: 96: </svg>

SVG – Learning By Coding

Codebook

Addendum

(Stand: 2005-07-03)


Inhaltsverzeichnis baseVal_animVal.svg ................................................... 278 groupbyidfragment.svg ................................................. 279 embedded_sound.svg .................................................... 281 styleSheets_object.svg ................................................ 282 filter_ConvolveMatrix.svg ............................................. 284 cloneNode.svg ......................................................... 285 get_setCurrentTime.svg ................................................ 287 bildlinkfolge.svg ..................................................... 289 color-profile.svg ..................................................... 290 getSVGDocument.svg .................................................... 291 extern.svg zu getSVGDocument.svg ...................................... 292 animateClock.svg ...................................................... 293 browserEval.svg ....................................................... 294 create-methods.svg .................................................... 295 viewBox_animation.svg ................................................. 297 splitText_normalize.svg ............................................... 298 sXBL-simplebutton.svg ................................................. 299 rcc-xslt-simplebutton.svg ............................................. 301 rcc.xml zu rcc-xslt-simplebutton.svg .................................. 303 rcc.xsl zu rcc-xslt-simplebutton.svg .................................. 303 rcc.svg zu rcc-xslt-simplebutton.svg .................................. 305 color_currentColor.svg ................................................ 306 spiegeln_mit_scale.svg ................................................ 307 kalender.svg .......................................................... 308 file_infos.svg ........................................................ 310 file_infos.php zu file_infos.svg ...................................... 311 vectorEffect.svg ...................................................... 311 rotate_line.svg ....................................................... 312 flow_tropfen.svg ...................................................... 314 mobile_statisch.svg ................................................... 316 mobile_dynamisch.svg .................................................. 317 createEvent.svg ....................................................... 318 replaceChild.svg ...................................................... 319 geturl_variants.svg ................................................... 321 geturl_variants.php zu geturl_variants.svg ............................ 323 parsexml_gzip.svg ..................................................... 324 insertBefore.svg ...................................................... 327 knoten_loeschen.svg ................................................... 328 attr_node_methods.svg ................................................. 330 tic-tac-toe.svg ....................................................... 332 bezier-polynome.svg ................................................... 336 kreissegmente.svg ..................................................... 339 filter_DistantLight.svg ............................................... 341 css_selectors.svg ..................................................... 342 matrix_reverse.svg .................................................... 344 wallclock_sync.svg .................................................... 347


baseVal_animVal.svg

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:  8:  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: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc,circleobj,lineobj,textobj,timer; 22: 23: 24: function Init(load_evt) 25: { 26: // Objekte vordefinieren 27: svgdoc=load_evt.target.ownerDocument; 28: circleobj=svgdoc.getElementById("kreis"); 29: lineobj=svgdoc.getElementById("linie"); 30: textobj=svgdoc.getElementById("cxout"); 31: 32: // baseVal-Wert des Kreis-Attributes cx abfragen und anzeigen (Text) 33: if(circleobj.cx && circleobj.cx.baseVal) 34: textobj.firstChild.setData("cx="+circleobj.cx.baseVal.value); 35: else alert("Eigenschaft 'baseVal' existiert nicht!"); 36: } 37: 38: 39: function AnimControl() 40: { 41: // animVal-Wert des Kreis-Attributes cx abfragen und anzeigen (Text+Linie) 42: textobj.firstChild.setData("cx="+Math.round(circleobj.cx.animVal.value)); 43: lineobj.setAttribute('x2',circleobj.cx.animVal.value); 44: } 45: 46: 47: function AnimBegin() 48: { 49: // Timer-Intervall zum Aufruf der Funktion AnimControl() auf 100ms setzen 50: if(circleobj.cx && circleobj.cx.animVal) 51: timer=setInterval("AnimControl()",100); 52: else alert("Eigenschaft 'animVal' existiert nicht!"); 53: } 54: 55: 56: function AnimEnd() 57: { 58: // Timer entfernen 59: if(timer)clearInterval(timer); 60: } 61: 62: ]]> 63: </script>


64: 65: </defs> 66: 67: <text x="20" y="30" style="fill: #000; font-size: 24px"> 68: Werte baseVal und animVal abfragen</text> 69: <text x="20" y="50">Funktioniert mit ASV 6.0, aber nicht mit ASV 3.01.</text> 70: 71: <circle cx="100" cy="100" r="30" 72: style="fill: #FF0; stroke: #00C; stroke-dasharray: 5,5"/> 73: 74: <circle id="kreis" cx="100" cy="100" r="30" style="fill: #FF0; stroke: #00C"> 75: <animate attributeName="cx" attributeType="XML" from="100" to="400" dur="20s" 76: fill="freeze" begin="click" onbegin="AnimBegin()" onend="AnimEnd()"/> 77: </circle> 78: 79: <line id="linie" x1="100" y1="100" x2="100" y2="100" style="stroke: #F00"/> 80: 81: <text id="cxout" x="20" y="105" style="fill: #F00">cx=???</text> 82: 83: <text x="20" y="160">[Zum Starten der Animation den Kreis anklicken!]</text> 84: 85: </svg>

groupbyidfragment.svg

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:  8:  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: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc,svgroot,objekte,anzahl; 22: 23: 24: function Init(load_evt) 25: { 26: svgdoc=load_evt.target.ownerDocument; 27: svgroot=svgdoc.rootElement; 28: svgroot.addEventListener("mouseover",Over,false); 29: svgroot.addEventListener("mouseout",Out,false); 30: objekte=svgdoc.getElementsByTagName("*"); 31: anzahl=objekte.length; 32: } 33: 34:


35: function Over(mouseover_evt) 36: { 37: var tgt,curid,testid,obj,i; 38: 39: tgt=mouseover_evt.target; 40: 41: if(tgt.tagName=="circle" || tgt.tagName=="rect" || tgt.tagName=="polygon") 42: { 43: curid=tgt.getAttribute("id"); 44: curid=curid.substr(0,curid.indexOf("_")+1); 45: for(i=0;i<anzahl;i++) 46: { 47: obj=objekte.item(i); 48: testid=obj.getAttribute("id"); 49: testid=testid.substr(0,testid.indexOf("_")+1); 50: if(testid==curid)obj.setAttribute("opacity","0.3"); 51: } 52: } 53: } 54: 55: 56: function Out(mouseout_evt) 57: { 58: var tgt,curid,testid,obj,i; 59: 60: tgt=mouseout_evt.target; 61: 62: if(tgt.tagName=="circle" || tgt.tagName=="rect" || tgt.tagName=="polygon") 63: { 64: curid=tgt.getAttribute("id"); 65: curid=curid.substr(0,curid.indexOf("_")+1); 66: for(i=0;i<anzahl;i++) 67: { 68: obj=objekte.item(i); 69: testid=obj.getAttribute("id"); 70: testid=testid.substr(0,testid.indexOf("_")+1); 71: if(testid==curid)obj.setAttribute("opacity","1.0"); 72: } 73: } 74: } 75: 76: ]]> 77: </script> 78: 79: </defs> 80: 81: <text x="20" y="30" style="fill: #000; font-size: 24px"> 82: Elemente über ID-Fragmente gruppieren</text> 83: 84: <text x="20" y="50">Objekte reagieren auf mouseover / mouseout-Events 85: (Änderung der Opazität).</text> 86: 87: <circle id="or_1" cx="50" cy="90" r="10" fill="#F00"/> 88: <circle id="og_1" cx="100" cy="90" r="10" fill="#090"/> 89: <circle id="ob_1" cx="150" cy="90" r="10" fill="#00C"/> 90: 91: <rect id="or_2" x="40" y="130" width="20" height="20" fill="#F00"/> 92: <rect id="og_2" x="90" y="130" width="20" height="20" fill="#090"/> 93: <rect id="ob_2" x="140" y="130" width="20" height="20" fill="#00C"/> 94: 95: <polygon id="or_3" points="40,200 50,180 60,200" fill="#F00"/> 96: <polygon id="og_3" points="90,200 100,180 110,200" fill="#090"/> 97: <polygon id="ob_3" points="140,200 150,180 160,200" fill="#00C"/> 98: 99: <text x="230" y="115">ID-Belegung der Objekte:</text> 100: <text x="230" y="135" fill="#F00">id="or_1" | "or_2" | "or_3"</text> 101: <text x="230" y="155" fill="#090">id="og_1" | "og_2" | "og_3"</text> 102: <text x="230" y="175" fill="#00C">id="ob_1" | "ob_2" | "ob_3"</text> 103: 104: </svg>


embedded_sound.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: <text x="20" y="30" style="fill: #000; font-size: 24px"> 16: Eingebetteter Sound / a:audio (ASV)</text> 17: 18: <text x="30" y="60" style="fill: #000; font-size: 14px"> 19: Beim Anklicken des Dreiecks sollte ein kurzes MP3-Sample zu hören sein ... ;-) 20: </text> 21: 22:  23: <polygon id="start" points="30,80 30,100 50,90" style="fill: #0C0"> 24: <set attributeName="opacity" attributeType="CSS" to="0.5" begin="mouseover"/> 25: <set attributeName="stroke" attributeType="CSS" to="#000" begin="mouseover"/> 26: <set attributeName="opacity" attributeType="CSS" to="1.0" begin="mouseout"/> 27: <set attributeName="stroke" attributeType="CSS" to="none" begin="mouseout"/> 28: </polygon> 29: 30: <text x="60" y="95" style="fill: #000; font-size: 14px"> 31: Base64-kodierte MP3-Datei 32: </text> 33: 34: <a xlink:href="http://www.beatmode.com/free-loops/slayer-fun/" target="_top"> 35: <text x="30" y="125" style="fill: #00C; font-size: 14px"> 36: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 37: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 38: MP3-Quelle: beatmode.com [slayer-130-11.mp3] 39: </text> 40: </a> 41: 42:  46: 47: <a:audio volume="1" pan="0" begin="start.click" repeatCount="1" 48: xlink:href="data:audio/mp3;base64, 49: SUQzAwAAAAAHdgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\ ... 635: AAAAAAAAAAAAAAAAAAAAAAAAAA==\ 636: "/> 637: 638: </svg>


styleSheets_object.svg

1: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?> 2: <?xml-stylesheet href="extern.css" type="text/css"?> 3: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 4: "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [ 5: <!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink"> 6: ]> 7: 8:  9:  10: 11: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 12: onload="getSVGDoc(evt)"> 13: 14: <title>SVG - Learning By Coding</title> 15: <desc>SVG-Spezifikation in Beispielen</desc> 16: 17: <defs> 18: 19: <style type="text/css"> 20: <![CDATA[ 21: 22: rect 23: { 24: fill: #090; 25: opacity: 0.2; 26: } 27: 28: ]]> 29: </style> 30: 31: 32: <script type="text/javascript"> 33: <![CDATA[ 34: 35: var svgdoc,csscol; 36: 37: 38: function getSVGDoc(load_evt) 39: { 40: svgdoc=load_evt.target.ownerDocument; 41: csscol=svgdoc.styleSheets; 42: } 43: 44: 45: function getCSSInfos() 46: { 47: var cssobj1,cssobj2; 48: 49: if(csscol) 50: { 51: /* 52: - Prinzip: 53: svgDocument.styleSheets.item(x).cssRules.item(y) 54: x = Index der Stylesheets ab 0, y = Index der Regeln ab 0 55: 56: - Zugriff auf Eigenschaften: 57: objekt.selectorText 58: objekt.style.cssText 59: objekt.style.getPropertyValue('eigenschaft') 60: objekt.style.setProperty('eigenschaft','wert','prioritaet') 61: objekt.style.removeProperty('eigenschaft') 62: objekt.style.getPropertyPriority('eigenschaft')


63: 64: - Hinweise: 65: ASV 3.0x kennt styleSheets-Objekt nicht 66: ASV 6.0 preview 1 kann nur lesend darauf zugreifen 67: */ 68: 69: cssobj1=csscol.item(0).cssRules; // erstes Stylesheet (extern) 70: cssobj2=csscol.item(1).cssRules; // zweites Stylesheet (intern) 71: 72: alert("Anzahl Stylesheets: "+csscol.length+"\n\n" 73: +"Name des ersten Selektors im externen Stylesheet: " 74: +cssobj1.item(0).selectorText+"\n" 75: +"Abfrage von cssText: " 76: +cssobj1.item(0).style.cssText+"\n" 77: +"Abfrage des Wertes der Eigenschaft stroke: " 78: +cssobj1.item(0).style.getPropertyValue('stroke')+"\n\n" 79: +"Name des ersten Selektors im internen Stylesheet: " 80: +cssobj2.item(0).selectorText+"\n" 81: +"Abfrage von cssText: " 82: +cssobj2.item(0).style.cssText+"\n" 83: +"Abfrage des Wertes der Eigenschaft opacity: " 84: +cssobj2.item(0).style.getPropertyValue('opacity')+"\n\n" 85: +"Versuch des Setzens neuer Werte (nach Klick auf 'OK')\n" 86: +"Kreis: fill auf #F00 / Rechteck: opacity auf 1.0" 87: ); 88: 89: cssobj1.item(0).style.setProperty('fill','#F00','important'); 90: cssobj2.item(0).style.setProperty('opacity','1.0','important'); 91: 92: alert("Neuer fill-Wert des Kreises: " 93: +cssobj1.item(0).style.getPropertyValue('fill')+" (rot?)\n" 94: +"Neuer opacity-Wert des Rechtecks: " 95: +cssobj2.item(0).style.getPropertyValue('opacity')+" (dunkler?)\n\n" 96: +"Prioritaet der fill-Eigenschaft des Kreises: " 97: +cssobj1.item(0).style.getPropertyPriority('fill')+"\n" 98: +"Prioritaet der opacity-Eigenschaft des Rechtecks: " 99: +cssobj2.item(0).style.getPropertyPriority('opacity')+"\n\n" 100: +"fill-Eigenschaft des Rechtecks wird nun entfernt.\n" 101: +"Die Farbe sollte nach schwarz wechseln ..." 102: ); 103: 104: cssobj2.item(0).style.removeProperty('fill'); 105: } 106: else alert("Das styleSheets-Objekt\nist nicht verfuegbar!"); 107: } 108: 109: ]]> 110: </script> 111: 112: </defs> 113: 114: <text x="20" y="30" style="fill: #000; font-size: 24px"> 115: CSS-Zugriff mittels styleSheets-Objekt 116: </text> 117: 118: <circle cx="150" cy="100" r="30" onclick="getCSSInfos()"/> 119: <rect x="200" y="60" width="150" height="75" onclick="getCSSInfos()"/> 120: <text x="160" y="170">Kreis oder Rechteck anklicken!</text> 121: 122: </svg>


filter_ConvolveMatrix.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <defs> 13: 14: <filter id="conv" filterUnits="objectBoundingBox" x="0" y="0" 15: width="370" height="220"> 16: <feConvolveMatrix in="SourceGraphic" edgeMode="wrap" preserveAlpha="true" 17: order="15,1" kernelMatrix="1 0 1 0 1 0 1 0 1 0 1 0 1 0 1"/> 18:  23: </filter> 24: 25: </defs> 26: 27: <title>SVG - Learning By Coding</title> 28: <desc>SVG-Spezifikation in Beispielen</desc> 29: <text x="20" y="30" style="fill: #000; font-size: 24px"> 30: Filter-Element feConvolveMatrix</text> 31: 32: <image xlink:href="bilder/bild1.jpg" x="20" y="70" width="375" height="220" 33: style="filter: url(#conv)"/> 34: 35: </svg>


cloneNode.svg

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:  8:  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: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc,box,laenge,zx,zy,zfarbe; 22: 23: 24: function getSVGDoc(load_evt) 25: { 26: svgdoc=load_evt.target.ownerDocument; 27: box=svgdoc.getElementById("box"); 28: } 29: 30: 31: function CloneObj(click_evt,param) 32: { 33: var knoten; 34: 35: knoten=click_evt.target.cloneNode(param); 36: /* 37: param: 38: false = nur den aktuellen Knoten klonen (Kreis) 39: true = Knoten mit allen Kindknoten klonen (Rechteck) 40: */ 41: 42: Zufallsdaten(); 43: 44: if(knoten.tagName=="circle") 45: { 46: knoten.setAttribute("cx",zx); 47: knoten.setAttribute("cy",zy); 48: knoten.setAttribute("r",laenge/2);


49: } 50: else if(knoten.tagName=="rect") 51: { 52: knoten.setAttribute("x",zx); 53: knoten.setAttribute("y",zy); 54: knoten.setAttribute("width",laenge); 55: knoten.setAttribute("height",laenge); 56: } 57: 58: knoten.setAttribute("fill",Zufallsfarbe()); 59: knoten.setAttribute("stroke",Zufallsfarbe()); 60: knoten.removeAttribute("onclick"); 61: box.appendChild(knoten); 62: } 63: 64: 65: function Zufallsdaten() 66: { 67: var vonx,vony,bisx,bisy; 68: 69: laenge=Math.round(5+45*Math.random()); 70: vonx=50+(laenge/2); 71: vony=150+(laenge/2); 72: bisx=500; 73: bisy=400; 74: 75: zx=Math.round(vonx+(bisx-vonx)*Math.random()); 76: zy=Math.round(vony+(bisy-vony)*Math.random()); 77: } 78: 79: 80: function Zufallsfarbe() 81: { 82: var r,g,b,rgb; 83: 84: r=Math.round(Math.random()*255); 85: g=Math.round(Math.random()*255); 86: b=Math.round(Math.random()*255); 87: rgb="rgb("+r+","+g+","+b+")"; 88: 89: return rgb; 90: } 91: 92: ]]> 93: </script> 94: 95: </defs> 96: 97: <text x="20" y="30" style="fill: #000; font-size: 24px"> 98: Grafikobjekte mit Methode cloneNode() erzeugen</text> 99: 100: <circle id="kr" cx="30" cy="70" r="10" fill="#FC0" 101: onclick="CloneObj(evt,false)"> 102: <set attributeName="opacity" attributeType="XML" to="0.4" begin="mouseover"/> 103: <set attributeName="opacity" attributeType="XML" to="1.0" begin="mouseout"/> 104: <set attributeName="opacity" attributeType="XML" to="1.0" begin="click"/> 105: </circle> 106: 107: <rect id="re" x="60" y="60" width="20" height="20" fill="#00C" 108: onclick="CloneObj(evt,true)"> 109: <set attributeName="opacity" attributeType="XML" to="0.4" begin="mouseover"/> 110: <set attributeName="opacity" attributeType="XML" to="1.0" begin="mouseout"/> 111: <set attributeName="opacity" attributeType="XML" to="1.0" begin="click"/> 112: </rect> 113: 114: <text x="20" y="110" fill="#000">Kreis oder Rechteck anklicken! 115: <tspan fill="#F00"> 116: Der Kreis wird allein, das Rechteck mit set-Kindelementen geklont. 117: </tspan> 118: </text> 119: 120: <g id="box"> 121: <rect x="20" y="130" width="520" height="320" fill="none" stroke="#999"/> 122: </g> 123: 124: </svg>


get_setCurrentTime.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: onload="Laufzeit()"> 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 svgroot,laufzeit; 54: 55: 56: svgroot=document.documentElement; 57: laufzeit=svgroot.getElementById("laufzeit"); 58: 59: 60: function Laufzeit() 61: { 62: var curtime,std,min,sek; 63: 64: curtime=svgroot.getCurrentTime(); 65:


66: sek=curtime; 67: std=Math.floor(sek/3600); 68: sek-=std*3600; 69: min=Math.floor(sek/60); 70: sek-=min*60; 71: sek=Math.floor(sek); 72: 73: std=(std<10)?"0"+std:std; 74: min=(min<10)?"0"+min:min; 75: sek=(sek<10)?"0"+sek:sek; 76: 77: laufzeit.firstChild.data=std+":"+min+":"+sek; 78: setTimeout("Laufzeit()",1000); 79: } 80: 81: 82: function ZeitSetzen(t) 83: { 84: svgroot.setCurrentTime(t); 85: } 86: 87: ]]> 88: </script> 89: 90: </defs> 91: 92: <text class="headline" x="20" y="30">Die Methoden getCurrentTime() bzw. setCurrentTime()</text> 93: 94: <text x="20" y="60">Laufzeit des aktuellen Scripts:</text> 95: <text id="laufzeit" class="lz" x="20" y="90"> </text> 96: 97: <a xlink:href=""> 98: <text id="laufzeit" x="20" y="120" onclick="ZeitSetzen(0)"> 99: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 100: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 101: Zeit auf 00:00:00 setzen 102: </text> 103: </a> 104: 105: <a xlink:href=""> 106: <text id="laufzeit" x="250" y="120" onclick="ZeitSetzen(5415)"> 107: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 108: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 109: Zeit auf 01:30:15 setzen 110: </text> 111: </a> 112: 113: </svg>


bildlinkfolge.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <text x="20" y="30" style="fill: #000; font-size: 24px"> 16: Bild/Link-Folge (Animation des xlink:href-Attributes)</text> 17: <text x="20" y="50">3 Durchläufe</text> 18: <text x="20" y="65">Änderung von Bild und Link</text> 19: 20: <rect x="210" y="70" width="101" height="142" 21: style="fill: none; stroke: #F00; stroke-width: 1px"/> 22: 23: <a xlink:href="http://www.dotnet-magazin.de" target="_top"> 24: <animate attributeName="xlink:href" attributeType="XML" begin="0s" dur="30s" 25: keyTimes="0.167;0.334;0.501;0.668;0.835;1" fill="freeze" repeatCount="3" 26: values="http://www.dotnet-magazin.de; 27: http://www.derentwickler.de; 28: http://www.javamagazin.de; 29: http://www.linuxenterprise.de; 30: http://www.phpmag.de; 31: http://www.xmlmagazin.de"/> 32: 33: <image x="211" y="71" width="99" height="140" xlink:href="bilder/dotnet.jpg"> 34: <animate attributeName="xlink:href" attributeType="XML" begin="0s" dur="30s" 35: keyTimes="0.167;0.334;0.501;0.668;0.835;1" fill="freeze" repeatCount="3" 36: values="bilder/dotnet.jpg; 37: bilder/entwickler.jpg; 38: bilder/javamag.jpg; 39: bilder/linuxent.jpg; 40: bilder/phpmag.jpg; 41: bilder/xmlmag.jpg"/> 42: </image> 43: 44: </a> 45: 46:  52: 53: </svg>


color-profile.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17:  21: 22: <style type="text/css"> 23: <![CDATA[ 24: 25: /* color-profile als CSS-Eigenschaft: */ 26: 27: @color-profile 28: { 29: name: mycolor; 30: src: sRGB; 31: rendering-intent: auto; 32: 33: /* 34: Werte fuer rendering-intent: 35: auto | perceptual | relative-colorimetric | 36: saturation | absolute-colorimetric 37: */ 38: } 39: 40: ]]> 41: </style> 42: 43: </defs> 44: 45:  46: 47: <text x="20" y="30" style="fill: #000; font-size: 24px"> 48: ICC-Farbprofile (color-profile)</text> 49: <text x="40" y="80">Testfarben</text> 50: <text x="40" y="120">+icc-color()</text> 51: <text x="20" y="160"> 52: Hinweis: Beispiel funktioniert mit ASV 6, nicht mit ASV 3.0x</text> 53: 54: <rect x="110" y="60" width="30" height="30" 55: style="fill: yellow"/> 56: 57: <rect x="150" y="60" width="30" height="30" 58: style="fill: red"/> 59: 60: <rect x="190" y="60" width="30" height="30" 61: style="fill: green"/> 62: 63: <rect x="230" y="60" width="30" height="30"


64: style="fill: blue"/> 65: 66: <rect x="270" y="60" width="30" height="30" 67: style="fill: black"/> 68: 69:  70: 71: <rect x="110" y="100" width="30" height="30" 72: style="fill: yellow icc-color(mycolor, 0.8,0.9,0)"/> 73: 74: <rect x="150" y="100" width="30" height="30" 75: style="fill: red icc-color(mycolor, 0.5,0,0)"/> 76: 77: <rect x="190" y="100" width="30" height="30" 78: style="fill: green icc-color(mycolor, 0,0.5,0)"/> 79: 80: <rect x="230" y="100" width="30" height="30" 81: style="fill: blue icc-color(mycolor, 0,0,0.5)"/> 82: 83: <rect x="270" y="100" width="30" height="30" 84: style="fill: black icc-color(mycolor, 0.5,0.5,0.5)"/> 85: 86: </svg>

getSVGDocument.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <script type="text/javascript"> 18: <![CDATA[ 19: 20: function TestFkt(evt) 21: { 22: var svgdoc,extobj,extrect; 23: svgdoc=evt.target.ownerDocument; 24: 25: // Zugriff auf das eingebundene Dokument und das Rechteck 26: extobj=svgdoc.getElementById("extobj").getSVGDocument(); 27: extrect=extobj.getElementById("extrect"); 28: 29: // Farbe des eingebundenen Rechtecks abfragen 30: alert("Rechteck-Farbe: "+extrect.style.getPropertyValue("fill")); // red 31: 32: // Farbe des eingebundenen Rechtecks neu setzen 33: extrect.style.setProperty("fill","green"); 34: 35: // Farbe des eingebundenen Rechtecks erneut abfragen 36: alert("Rechteck-Farbe: "+extrect.style.getPropertyValue("fill")); // green


37: } 38: 39: ]]> 40: </script> 41: 42: </defs> 43: 44: <text x="20" y="30" style="fill: #000; font-size: 24px"> 45: DOM-Zugriff mit getSVGDocument()</text> 46: 47: <image id="extobj" xlink:href="extern.svg" x="20" y="50" width="100%" height="100%"/> 48:  52: 53: <a xlink:href="" onclick="TestFkt(evt)"> 54: <text x="20" y="130"> 55: Eingebundenes SVG-Dokument ansprechen und Farbe ändern ... 56: </text> 57: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 58: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 59: </a> 60: 61: <text x="20" y="150"> 62: [Hinweis: ASV 3.0x und 6.0pr1 zeigen Änderungen nur im DOM, aber nicht visuell!] 63: </text> 64: 65: </svg>

extern.svg zu getSVGDocument.svg 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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15:  16: <rect id="extrect" x="0" y="0" width="100" height="50" rx="5" style="fill: red"/> 17: 18: </svg>


animateClock.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: 16: <text x="20" y="30" style="fill: #000; font-size: 24px"> 17: Animationen steuern mit animateClock (ASV 3/6)</text> 18: 19: <circle cx="40" cy="70" r="20" style="fill: #F00"> 20: <animate attributeName="cx" attributeType="XML" from="40" to="500" 21: begin="0s" dur="30s" fill="freeze"> 22: <a:animateClock to="0s" begin="test1.click"/> 23: <a:animateClock to="15s" begin="test2.click"/> 24: <a:animateClock to="30s" begin="test3.click"/> 25: <a:animateClock by="5s" begin="test4.click"/> 26: <a:animateClock by="-5s" begin="test5.click"/> 27: </animate> 28: </circle> 29: 30: <line x1="40" y1="50" x2="40" y2="90" style="stroke: #00C"/> 31: <line x1="270" y1="50" x2="270" y2="90" style="stroke: #00C"/> 32: <line x1="500" y1="50" x2="500" y2="90" style="stroke: #00C"/> 33: <text x="30" y="100">[0s]</text> 34: <text x="260" y="100">[15s]</text> 35: <text x="490" y="100">[30s]</text> 36: 37: <text x="30" y="130" style="fill: #F00"><animateClock .../></text> 38: 39: <a id="test1" xlink:href=""> 40: <text x="60" y="150">to="0s"</text> 41: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 42: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 43: </a> 44: <a id="test2" xlink:href=""> 45: <text x="60" y="170">to="15s"</text> 46: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 47: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 48: </a> 49: <a id="test3" xlink:href=""> 50: <text x="60" y="190">to="30s"</text> 51: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 52: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 53: </a> 54: <a id="test4" xlink:href=""> 55: <text x="60" y="210">by="5s"</text> 56: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 57: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 58: </a>


59: <a id="test5" xlink:href=""> 60: <text x="60" y="230">by="-5s"</text> 61: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 62: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 63: </a> 64: 65: </svg>

browserEval.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <script type="text/javascript"> 18: <![CDATA[ 19: 20: var test=0; 21: 22: function getScreenInfos(evt) 23: { 24: var svgdoc,w,h,aw,ah,cd,textout; 25: svgdoc=evt.target.ownerDocument; 26: 27: if(typeof(browserEval)!="undefined" && test==0) 28: { 29: browserEval(w=screen.width); 30: browserEval(h=screen.height); 31: browserEval(aw=screen.availWidth); 32: browserEval(ah=screen.availHeight); 33: browserEval(cd=screen.colorDepth); 34: 35: textout=svgdoc.getElementById("textout").getElementsByTagName("tspan"); 36: textout.item(0).firstChild.nodeValue+=w; 37: textout.item(1).firstChild.nodeValue+=h; 38: textout.item(2).firstChild.nodeValue+=aw; 39: textout.item(3).firstChild.nodeValue+=ah; 40: textout.item(4).firstChild.nodeValue+=cd; 41: test++; 42: } 43: } 44: 45: ]]> 46: </script> 47: 48: </defs> 49: 50: <text x="20" y="30" style="fill: #000; font-size: 24px"> 51: Browser-Scriptzugriff mit browserEval() [ASV]</text> 52:


53: <g style="fill: #00C; font-size: 16px; font-weight: bold; font-family: monospace" 54: id="textout" <?xml:space="preserve"> 55: <text x="20" y="50"> 56: <tspan x="20" dy="1em">screen.width : </tspan> 57: <tspan x="20" dy="1em">screen.height : </tspan> 58: <tspan x="20" dy="1em">screen.availWidth : </tspan> 59: <tspan x="20" dy="1em">screen.availHeight : </tspan> 60: <tspan x="20" dy="1em">screen.colorDepth : </tspan> 61: </text> 62: </g> 63: 64: <a xlink:href="" onclick="getScreenInfos(evt)"> 65: <text x="20" y="160">Screen-Informationen abfragen</text> 66: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 67: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 68: </a> 69: 70: </svg>

create-methods.svg

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: <!ENTITY h "Hallo"> 6: ]> 7: 8:  9:  10: 11: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 12: onload="Create(evt)"> 13: 14: <title>SVG - Learning By Coding</title> 15: <desc>SVG-Spezifikation in Beispielen</desc> 16: 17: <defs> 18: 19: <script type="text/javascript"> 20: <![CDATA[ 21: 22: function Create(evt) 23: { 24: var svgdoc,svgroot,pi,df,en,et,ko,kr,cx,cy,ra,te,tx,ty,tc,tn; 25: 26: svgdoc=evt.target.ownerDocument; 27: svgroot=svgdoc.rootElement; 28: 29: // createProcessingInstruction() 30: pi=svgdoc.createProcessingInstruction("xml-stylesheet", 31: "href=\"extern.css\" type=\"text/css\"");


32: svgdoc.insertBefore(pi,svgroot); 33: 34: // createEntityReference() 35: en=svgdoc.createEntityReference("h"); 36: 37: // createCDATASection() 38: cd=svgdoc.createCDATASection("XML-Code: <svg>...</svg>"); 39: 40: // createComment() 41: ko=svgdoc.createComment("Kommentartext"); 42: 43: // createDocumentFragment() 44: df=svgdoc.createDocumentFragment(); 45: 46: df.appendChild(cd); 47: df.appendChild(ko); 48: 49: kr=svgdoc.createElement("circle"); // createElement() 50: cx=svgdoc.createAttribute("cx"); // createAttribute() 51: cx.nodeValue="100"; // Alternative: 52: kr.setAttributeNode(cx); // kr.setAttribute("cx","100") 53: cy=svgdoc.createAttribute("cy"); 54: cy.nodeValue="100"; 55: kr.setAttributeNode(cy); 56: ra=svgdoc.createAttribute("r"); 57: ra.nodeValue="20"; 58: kr.setAttributeNode(ra); 59: 60: df.appendChild(kr); 61: 62: te=svgdoc.createElement("text"); 63: tx=svgdoc.createAttribute("x"); 64: tx.nodeValue="30"; 65: te.setAttributeNode(tx); 66: ty=svgdoc.createAttribute("y"); 67: ty.nodeValue="60"; 68: te.setAttributeNode(ty); 69: tc=svgdoc.createAttribute("class"); 70: tc.nodeValue="xyz"; 71: te.setAttributeNode(tc); 72: te.appendChild(en); 73: tn=svgdoc.createTextNode(" Welt!"); // createTextNode() 74: te.appendChild(tn); 75: 76: df.appendChild(te); 77: 78: if(printNode)alert("Generierter SVG-Code:\n\n"+ 79: printNode(svgroot.previousSibling)+"\n\n"+printNode(df)); 80: svgdoc.rootElement.appendChild(df); 81: } 82: 83: ]]> 84: </script> 85: 86: </defs> 87: 88: <text x="20" y="30" style="fill: #000; font-size: 24px"> 89: Anwendung von "create"-DOM-Methoden 90: </text> 91: 92: <text x="30" y="150">Verwendete "create"-Methoden:</text> 93: <text x="30" y="155" style="fill: #00C"> 94: <tspan x="30" dy="1.2em">createAttribute()</tspan> 95: <tspan x="30" dy="1.2em">createCDATASection()</tspan> 96: <tspan x="30" dy="1.2em">createComment()</tspan> 97: <tspan x="30" dy="1.2em">createDocumentFragment()</tspan> 98: <tspan x="30" dy="1.2em">createElement()</tspan> 99: <tspan x="30" dy="1.2em">createEntityReference()</tspan> 100: <tspan x="30" dy="1.2em">createProcessingInstruction()</tspan> 101: <tspan x="30" dy="1.2em">createTextNode()</tspan> 102: <tspan x="30" dy="2em" style="fill: #000"> 103: Hinweis: Die mittels createProcessingInstruction() aus extern.css</tspan> 104: <tspan x="30" dy="1.2em" style="fill: #000"> 105: eingebundenen Formatierungen werden nur im ASV 6.0 angezeigt!</tspan> 106: </text> 107: 108: </svg>


viewBox_animation.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: width="500" height="500" viewBox="0 0 500 500" zoomAndPan="disable"> 12: 13: <animate attributeName="viewBox" attributeType="XML" begin="smiley.click" dur="10s" 14: values="0 0 500 500; 250 250 0 0; 0 0 500 500" repeatCount="3" fill="freeze"/> 15: 16: <title>SVG - Learning By Coding</title> 17: <desc>SVG-Spezifikation in Beispielen</desc> 18: 19: <text x="20" y="30" style="fill: #000; font-size: 24px"> 20: viewBox-Animation</text> 21: <text x="20" y="50" style="fill: #F00; font-size: 12px"> 22: [Smiley anclicken = 3 Wiederholungen]</text> 23: 24: <g id="smiley"> 25: 26:  27: 28:  29: <circle cx="250" cy="250" r="40" style="fill: #FF0; stroke: #000; 30: stroke-width: 2px"/> 31: 32:  33: <ellipse cx="235" cy="240" rx="5" ry="10" style="fill: #FFF; 34: stroke: #000; stroke-width: 2px"/> 35: <ellipse cx="265" cy="240" rx="5" ry="10" style="fill: #FFF; 36: stroke: #000; stroke-width: 2px"/> 37: 38:  39: <circle cx="237" cy="245" r="3" style="fill: #000"/> 40: <circle cx="263" cy="245" r="3" style="fill: #000"/> 41: 42:  43: <rect x="250" y="252" height="5" width="1" style="fill: #000; 44: stroke: #000; stroke-width: 5px; stroke-linejoin: round"/> 45: 46:  47: <path d="M 235,260 A 5,5 0 1,0 265,260" style="fill: #FF0; stroke: #F00; 48: stroke-width: 2px"/> 49: 50:  51: 52: </g> 53: 54: </svg>


splitText_normalize.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <script type="text/javascript"> 18: <![CDATA[ 19: 20: function SplitNorm(evt) 21: { 22: var svgdoc,txtobj; 23: svgdoc=evt.target.ownerDocument; 24: txtobj=svgdoc.getElementById("txt"); 25: 26: alert("- Ausgangszustand\n\n"+ 27: "Anzahl der Kindknoten von txtobj: "+txtobj.childNodes.length+ 28: "\ntxtobj.firstChild.nodeValue: "+txtobj.firstChild.nodeValue); 29: 30: // Textinhalt ab dem 5. Zeichen als neuen Textknoten abspalten 31: txtobj.firstChild.splitText(4); // Ergebnis = neuer Textknoten 32: alert("- nach txtobj.firstChild.splitText(4)\n\n"+ 33: "Anzahl der Kindknoten von txtobj: "+txtobj.childNodes.length+ 34: "\ntxtobj.firstChild.nodeValue: "+txtobj.firstChild.nodeValue+ 35: "\ntxtobj.lastChild.nodeValue: "+txtobj.lastChild.nodeValue); 36: 37: // Geschwister-Textknoten (siblings) zusammenfassen 38: txtobj.normalize(); 39: alert("- nach textobj.normalize()\n\n"+ 40: "Anzahl der Kindknoten von txtobj: "+txtobj.childNodes.length+ 41: "\ntxtobj.firstChild.nodeValue: "+txtobj.firstChild.nodeValue); 42: } 43: 44: ]]> 45: </script> 46: 47: </defs> 48:


49: <text x="20" y="30" style="fill: #000; font-size: 24px"> 50: DOM-Methoden splitText() und normalize()</text> 51: 52: <text id="txt" x="20" y="60" style="fill: #00C; font-size: 14px">TestText</text> 53: 54: <a xlink:href="" onclick="SplitNorm(evt)"> 55: <text x="20" y="80">Methoden aufrufen</text> 56: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 57: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 58: </a> 59: 60: </svg>

sXBL-simplebutton.svg

1: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?> 2:  6: 7:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" version="1.2" 11: xmlns:xbl="http://www.w3.org/2004/xbl" 12: xmlns:xlink="http://www.w3.org/1999/xlink" 13: xmlns:ev="http://www.w3.org/2001/xml-events" 14: xmlns:svglbc="http://www.datenverdrahten.de/svglbc"> 15: 16: <title>SVG - Learning By Coding</title> 17: <desc>SVG-Spezifikation in Beispielen</desc> 18: 19: <defs> 20: 21: <xbl:xbl> 22: 23: <xbl:definition name="svglbc:simplebutton"> 24: 25: <xbl:template> 26: 27:  28: <g> 29: <rect id="unten"/> 30: <rect id="oben"/> 31: <text id="txt"><xbl:content/></text> 32: </g> 33: 34: </xbl:template> 35: 36: <xbl:handlerGroup> 37:  38: <handler ev:event="xbl:bound" type="text/javascript"> 39: <![CDATA[ 40: 41: var svgdoc,el,st,ru,ro,tx,x,y,bb,bh,bf,th,tf,at; 42: 43: // Daten zum aktuellen simplebutton-Element abfragen 44: el=evt.target; 45: st=el.xblShadowTree; // statt el.shadowTree 46: 47: ru=st.getElementById("unten"); 48: ro=st.getElementById("oben"); 49: tx=st.getElementById("txt"); 50: 51: x=el.getAttribute("x"); // Button-x


52: y=el.getAttribute("y"); // Button-y 53: bb=el.getAttribute("bb"); // Button-Breite 54: bh=el.getAttribute("bh"); // Button-Hoehe 55: bf=el.getAttribute("bf"); // Button-Farbe 56: th=el.getAttribute("th"); // Text-Hoehe 57: tf=el.getAttribute("tf"); // Text-Farbe 58: at=el.getAttribute("at"); // Alert-Text (onclick) 59: 60: // Rechteck - unten 61: ru.setAttribute("x",parseFloat(x)+parseFloat(bb)/35); 62: ru.setAttribute("y",parseFloat(y)+parseFloat(bb)/35); 63: ru.setAttribute("width",bb); 64: ru.setAttribute("height",bh); 65: ru.setAttribute("rx","5"); 66: ru.setAttribute("fill","#CCC"); 67: 68: // Rechteck - oben 69: ro.setAttribute("x",x); 70: ro.setAttribute("y",y); 71: ro.setAttribute("width",bb); 72: ro.setAttribute("height",bh); 73: ro.setAttribute("fill",bf); 74: ro.setAttribute("rx","5"); 75: ro.setAttribute("onclick","alert('"+at+"')"); 76: ro.setAttribute("onmouseover","SetOp(evt,0.5)"); 77: ro.setAttribute("onmouseout","SetOp(evt,1.0)"); 78: 79: // Buttontext 80: tx.setAttribute("fill",tf); 81: tx.setAttribute("font-size",th); 82: tx.setAttribute("text-anchor","middle"); 83: tx.setAttribute("pointer-events","none"); 84: tx.setAttribute("x",parseFloat(x)+parseFloat(bb)/2); 85: tx.setAttribute("y",parseFloat(y)+parseFloat(bh)/2+parseFloat(th)/3); 86: 87: ]]> 88: </handler> 89: </xbl:handlerGroup> 90: 91: </xbl:definition> 92: 93: </xbl:xbl> 94: 95: 96: <script type="text/javascript"> 97: <![CDATA[ 98: 99: // separate Funktion zum Aufruf aus dem sXBL-Kontext 100: 101: function SetOp(evt,op) 102: { 103: var obj,cnodes,i; 104: obj=evt.target.parentNode; 105: cnodes=obj.childNodes; 106: for(i=0;i<cnodes.length;i++) 107: { 108: if(cnodes.item(i).nodeType==1)cnodes.item(i).setAttribute("opacity",op); 109: } 110: } 111: 112: ]]> 113: </script> 114: 115: </defs> 116: 117: <text x="20" y="30" style="fill: #000; font-size: 24px"> 118: sXBL - SVG's XML Binding Language (Ersatz für RCC)</text> 119: <text x="20" y="60" style="fill: #F00"> 120: - zurzeit noch nicht in SVG-Viewern implementiert</text> 121: 122: <a xlink:href="http://www.w3.org/TR/sXBL/" target="_top"> 123: <text x="20" y="80" style="fill: #00C">- Details im aktuellen sXBL-Working Draft 124: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 125: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 126: </text> 127: </a> 128: 129: <a xlink:href="../?code=rcc-simplebutton&znr=on" target="_top"> 130: <text x="20" y="100" style="fill: #00C">- siehe Beispiel rcc-simplebutton.svg 131: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>


132: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 133: </text> 134: </a> 135: 136:  137: <svglbc:simplebutton x="20" y="110" bb="100" bh="50" bf="#FCC" 138: tf="#000" th="12" at="Hallo Button 1!">Text 1</svglbc:simplebutton> 139: <svglbc:simplebutton x="170" y="90" bb="180" bh="90" bf="#CFC" 140: tf="#00C" th="36" at="Hallo Button 2!">Text 2</svglbc:simplebutton> 141: <svglbc:simplebutton x="100" y="230" bb="150" bh="80" bf="#CCF" 142: tf="#C00" th="24" at="Hallo Button 3!">Text 3</svglbc:simplebutton> 143: 144: </svg>

rcc-xslt-simplebutton.svg

1: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?> 2:  6: 7:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" version="1.2" 11: xmlns:xlink="http://www.w3.org/1999/xlink" 12: xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 13: xmlns:svglbc="http://www.datenverdrahten.de/svglbc"> 14: 15: <title>SVG - Learning By Coding</title> 16: <desc>SVG-Spezifikation in Beispielen</desc> 17: 18: <defs> 19: 20: <script type="text/javascript"> 21: <![CDATA[ 22: 23: function SetOp(evt,op) 24: { 25: var obj,cnodes,i; 26: obj=evt.target.parentNode; 27: cnodes=obj.childNodes; 28: for(i=0;i<cnodes.length;i++) 29: { 30: if(cnodes.item(i).nodeType==1)cnodes.item(i).setAttribute("opacity",op); 31: } 32: } 33: 34: ]]> 35: </script> 36: 37: </defs> 38: 39: <extensionDefs id="svglbc" namespace="http://www.datenverdrahten.de/svglbc"> 40: 41: <xsl:stylesheet id="simplebutton_xsl" version="1.0" 42: xmlns="http://www.w3.org/2000/svg" 43: xmlns:xlink="http://www.w3.org/1999/xlink" 44: xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 45: xmlns:svglbc="http://www.datenverdrahten.de/svglbc">


46: 47:  48: 49: <xsl:template match="svglbc:simplebutton"> 50: 51: <xsl:variable name="x" select="@x"/>  52: <xsl:variable name="y" select="@y"/>  53: <xsl:variable name="bb" select="@bb"/>  54: <xsl:variable name="bh" select="@bh"/>  55: <xsl:variable name="bf" select="@bf"/>  56: <xsl:variable name="th" select="@th"/>  57: <xsl:variable name="tf" select="@tf"/>  58: <xsl:variable name="at" select="@at"/>  59: 60: <g> 61:  62: <rect id="unten" 63: x="{$x + $bb div 35}" y="{$y + $bb div 35}" 64: width="{$bb}" height="{$bh}" rx="5" fill="#CCC"/> 65:  66: 67:  68: <rect id="oben" 69: x="{$x}" y="{$y}" width="{$bb}" height="{$bh}" 70: rx="5" fill="{$bf}" onclick="alert('{$at}')" 71: onmouseover="SetOp(evt,0.5)" onmouseout="SetOp(evt,1.0)"/> 72: 73:  74: <text id="txt" 75: x="{$x + $bb div 2}" y="{$y + $bh div 2 + $th div 3}" 76: fill="{$tf}" font-size="{$th}" text-anchor="middle" 77: pointer-events="none"><xsl:value-of select="."/></text> 78: </g> 79: 80: </xsl:template> 81: 82: </xsl:stylesheet> 83: 84: <elementDef name="simplebutton"> 85: <transformer xlink:href="#simplebutton_xsl" type="text/xsl"/> 86: </elementDef> 87: 88:  95: 96: </extensionDefs> 97: 98: <text x="20" y="30" style="fill: #000; font-size: 24px"> 99: RCC - Rendering Custom Content mit XSLT</text> 100: <text x="20" y="60" style="fill: #F00"> 101: - zurzeit noch nicht in SVG-Viewern implementiert</text> 102: 103: <a xlink:href="http://www.w3.org/TR/SVG12/" target="_top"> 104: <text x="20" y="80" style="fill: #00C">- Details im SVG 1.2-Working Draft 105: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 106: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 107: </text> 108: </a> 109: 110: <a xlink:href="../?code=rcc-simplebutton&znr=on" target="_top"> 111: <text x="20" y="100" style="fill: #00C">- siehe Beispiel rcc-simplebutton.svg 112: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 113: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 114: </text> 115: </a> 116: 117: <text x="20" y="150">- externe Umsetzung der XSL-Transformation:</text> 118: <a xlink:href="rcc_xslt/rcc.xml" target="_top"> 119: <text x="30" y="170">XML-Dokument 120: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 121: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 122: </text> 123: </a> 124: <a xlink:href="rcc_xslt/rcc.xsl" target="_top"> 125: <text x="130" y="170">XSL-Stylesheet


126: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 127: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 128: </text> 129: </a> 130: <a xlink:href="rcc_xslt/rcc.svg" target="_top"> 131: <text x="230" y="170">SVG-Ergebnis 132: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 133: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 134: </text> 135: </a> 136: 137:  138: <svglbc:simplebutton x="20" y="110" bb="100" bh="50" bf="#FCC" 139: tf="#000" th="12" at="Hallo Button 1!">Text 1</svglbc:simplebutton> 140: <svglbc:simplebutton x="170" y="90" bb="180" bh="90" bf="#CFC" 141: tf="#00C" th="36" at="Hallo Button 2!">Text 2</svglbc:simplebutton> 142: <svglbc:simplebutton x="100" y="230" bb="150" bh="80" bf="#CCF" 143: tf="#C00" th="24" at="Hallo Button 3!">Text 3</svglbc:simplebutton> 144: 145: </svg>

rcc.xml zu rcc-xslt-simplebutton.svg 1: <?xml version="1.0" encoding="ISO-8859-1" 2: 3:  4:  5: 6: <rcc xmlns:svglbc="http://www.datenverdrahten.de/svglbc"> 7: 8:  9: <svglbc:simplebutton x="20" y="110" bb="100" bh="50" bf="#FCC" 10: tf="#000" th="12" at="Hallo Button 1!">Text 1</svglbc:simplebutton> 11: <svglbc:simplebutton x="170" y="90" bb="180" bh="90" bf="#CFC" 12: tf="#00C" th="36" at="Hallo Button 2!">Text 2</svglbc:simplebutton> 13: <svglbc:simplebutton x="100" y="230" bb="150" bh="80" bf="#CCF" 14: tf="#C00" th="24" at="Hallo Button 3!">Text 3</svglbc:simplebutton> 15: 16: </rcc>

rcc.xsl zu rcc-xslt-simplebutton.svg 1: <?xml version="1.0" encoding="ISO-8859-1" 2: <xsl:stylesheet version="1.0" 3: xmlns="http://www.w3.org/2000/svg" 4: xmlns:xlink="http://www.w3.org/1999/xlink" 5: xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 6: xmlns:svglbc="http://www.datenverdrahten.de/svglbc" 7: exclude-result-prefixes="svglbc" 8: > 9: 10:  11:  12:  13: 14: <xsl:output 15: method="xml" 16: doctype-public="-//W3C//DTD SVG 1.0//EN" 17: doctype-system="http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" 18: encoding="ISO-8859-1" 19: standalone="no" 20: version="1.0" 21: media-type="image/svg+xml" 22: cdata-section-elements="script" 23: indent="yes" 24: /> 25: 26: <xsl:template match="rcc"> 27: 28: <xsl:comment> generiert von rcc.xsl mit XMLStarlet: xml tr rcc.xsl rcc.xml > rcc. svg </xsl:comment>


29: 30: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 31: 32: <defs> 33: 34: <script type="text/javascript"> 35: <![CDATA[ 36: 37: function SetOp(evt,op) 38: { 39: var obj,cnodes,i; 40: obj=evt.target.parentNode; 41: cnodes=obj.childNodes; 42: for(i=0;i<cnodes.length;i++) 43: { 44: if(cnodes.item(i).nodeType==1)cnodes.item(i).setAttribute("opacity",op); 45: } 46: } 47: 48: ]]> 49: </script> 50: 51: </defs> 52: 53: <text x="20" y="30" style="fill: #000; font-size: 24px"> 54: RCC - Rendering Custom Content mit XSLT</text> 55: <text x="20" y="60" style="fill: #F00"> 56: - zurzeit noch nicht in SVG-Viewern implementiert (externe Transformation)</text> 57: 58: <xsl:apply-templates/> 59: 60: </svg> 61: 62: </xsl:template> 63: 64: 65: <xsl:template match="svglbc:simplebutton"> 66: 67:  68: <xsl:variable name="x" select="@x"/>  69: <xsl:variable name="y" select="@y"/>  70: <xsl:variable name="bb" select="@bb"/>  71: <xsl:variable name="bh" select="@bh"/>  72: <xsl:variable name="bf" select="@bf"/>  73: <xsl:variable name="th" select="@th"/>  74: <xsl:variable name="tf" select="@tf"/>  75: <xsl:variable name="at" select="@at"/>  76: 77: <g> 78:  79: <rect id="unten" 80: x="{$x + $bb div 35}" y="{$y + $bb div 35}" 81: width="{$bb}" height="{$bh}" rx="5" fill="#CCC"/> 82: 83:  84: <rect id="oben" 85: x="{$x}" y="{$y}" width="{$bb}" height="{$bh}" 86: rx="5" fill="{$bf}" onclick="alert('{$at}')" 87: onmouseover="SetOp(evt,0.5)" onmouseout="SetOp(evt,1.0)"/> 88: 89:  90: <text id="txt" 91: x="{$x + $bb div 2}" y="{$y + $bh div 2 + $th div 3}" 92: fill="{$tf}" font-size="{$th}" text-anchor="middle" 93: pointer-events="none"><xsl:value-of select="."/></text> 94: </g> 95: 96: </xsl:template> 97: 98: </xsl:stylesheet>


rcc.svg zu rcc-xslt-simplebutton.svg

1: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?> 2: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 3:  4: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 5: <defs> 6: <script type="text/javascript"><![CDATA[ 7: 8: function SetOp(evt,op) 9: { 10: var obj,cnodes,i; 11: obj=evt.target.parentNode; 12: cnodes=obj.childNodes; 13: for(i=0;i<cnodes.length;i++) 14: { 15: if(cnodes.item(i).nodeType==1)cnodes.item(i).setAttribute("opacity",op); 16: } 17: } 18: 19: ]]></script> 20: </defs> 21: <text x="20" y="30" style="fill: #000; font-size: 24px"> 22: RCC - Rendering Custom Content mit XSLT</text> 23: <text x="20" y="60" style="fill: #F00"> 24: - zurzeit noch nicht in SVG-Viewern implementiert (externe Transformation)</text> 25: <g> 26: <rect id="unten" x="22.8571428571429" y="112.857142857143" width="100" height="50" rx="5" fill="#CCC"/> 27: <rect id="oben" x="20" y="110" width="100" height="50" rx="5" fill="#FCC" onclick="alert('Hallo Button 1!')" onmouseover="SetOp(evt,0.5)" onmouseout="SetOp(evt,1.0)"/> 28: <text id="txt" x="70" y="139" fill="#000" font-size="12" text-anchor="middle" pointer-events="none">Text 1</text> 29: </g> 30: <g> 31: <rect id="unten" x="175.142857142857" y="95.1428571428571" width="180" height="90" rx="5" fill="#CCC"/> 32: <rect id="oben" x="170" y="90" width="180" height="90" rx="5" fill="#CFC" onclick="alert('Hallo Button 2!')" onmouseover="SetOp(evt,0.5)" onmouseout="SetOp(evt,1.0)"/> 33: <text id="txt" x="260" y="147" fill="#00C" font-size="36" text-anchor="middle" pointer-events="none">Text 2</text> 34: </g> 35: <g> 36: <rect id="unten" x="104.285714285714" y="234.285714285714" width="150" height="80" rx="5" fill="#CCC"/> 37: <rect id="oben" x="100" y="230" width="150" height="80" rx="5" fill="#CCF" onclick="alert('Hallo Button 3!')" onmouseover="SetOp(evt,0.5)" onmouseout="SetOp(evt,1.0)"/> 38: <text id="txt" x="175" y="278" fill="#C00" font-size="24" text-anchor="middle" pointer-events="none">Text 3</text> 39: </g> 40: </svg>


color_currentColor.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <linearGradient id="lingra" color="#FF0"> 18: <stop offset="0%" stop-color="#F00"/> 19: <stop offset="50%" stop-color="currentColor"/> 20: <stop offset="100%" stop-color="#00C"/> 21: </linearGradient> 22: 23: <filter id="flood" color="#9F9" filterUnits="objectBoundingBox"> 24: <feFlood flood-color="currentColor" flood-opacity="0.8" result="floodout"/> 25: <feComposite in="floodout" in2="SourceGraphic" operator="in"/> 26: </filter> 27: 28: <filter id="spec" color="#FF0" filterUnits="userSpaceOnUse"> 29: <feSpecularLighting in="SourceGraphic" surfaceScale="2" specularConstant="3" 30: specularExponent="40" lighting-color="currentColor"> 31: <fePointLight x="220" y="295" z="20"/> 32: </feSpecularLighting> 33: </filter> 34: 35: </defs> 36: 37: <text x="20" y="30" style="fill: #000; font-size: 24px"> 38: Eigenschaft color und Wert currentColor</text> 39: <text x="20" y="50" style="fill: #000; font-size: 14px"> 40: verwendbar für fill, stroke, stop-color, flood-color, lighting-color</text> 41: 42: <g color="#F00"> 43: <rect x="20" y="80" width="100" height="50" fill="currentColor"/> 44: <circle cx="160" cy="105" r="25" fill="#FFF" stroke="currentColor"/> 45: </g> 46: 47: <g style="color: #00C"> 48: <rect x="20" y="180" width="100" height="50" style="fill: #FFC; stroke: currentColor"/> 49: <circle cx="160" cy="205" r="25" style="fill: currentColor; stroke: #F00"/>


50: </g> 51: 52: <g style="color: #FFF"> 53: <rect x="20" y="280" width="100" height="50" fill="url(#lingra)"/> 54: <circle cx="160" cy="305" r="25" fill="currentColor" filter="url(#flood)"/> 55: <circle cx="220" cy="305" r="25" fill="currentColor" filter="url(#spec)"/> 56: </g> 57: 58: <line x1="250" y1="80" x2="250" y2="370" style="stroke: #CCC; stroke-width: 2px"/> 59: <image xlink:href="bilder/color_currentColor.gif" x="310" y="80" width="222" height="254"/> 60: <text x="20" y="365" style="fill: #00C; font-size: 12px">aktuelles Ergebnis</text> 61: <text x="310" y="365" style="fill: #00C; font-size: 12px">erwartetes Ergebnis</text> 62: 63: </svg>

spiegeln_mit_scale.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <text x="20" y="30" style="fill: #000; font-size: 24px"> 16: Spiegeln mit scale(-1,1) | (1,-1) | (-1,-1) 17: </text> 18: 19: <text transform="translate(600,40) scale(-1,1)" x="300" y="40" 20: style="font-size: 18px; fill: #F00">1234567890</text> 21: 22: <text transform="translate(-100,180) scale(1,-1)" x="300" y="80" 23: style="font-size: 18px; fill: #F00">1234567890</text> 24: 25: <text transform="translate(600,250) scale(-1,-1)" x="300" y="120" 26: style="font-size: 18px; fill: #F00">1234567890</text> 27: 28: </svg>


kalender.svg

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:  8:  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: tspan, text 22: { 23: fill: #00C; 24: font-size: 16px; 25: font-weight: bold; 26: font-family: "Courier New", Courier, monospace; 27: } 28: 29: tspan > tspan 30: { 31: fill: #F00; 32: } 33: 34: ]]> 35: </style> 36: 37: <script type="text/javascript"> 38: <![CDATA[ 39: 40: var svgdoc,datum,monat,jahr; // globale Variablen 41: 42: 43: function Init(load_evt) 44: { 45: svgdoc=load_evt.target.ownerDocument; 46: 47: // Kalender des aktuellen Monats 48: datum=new Date(); 49: jahr=datum.getFullYear(); 50: monat=datum.getMonth()+1; 51: Ausgabe(Kalender(monat,jahr)); 52: } 53: 54: 55: function PrevNextMonth(pn) 56: { 57: // Kalender des vorherigen bzw. folgenden Monats 58: monat+=pn; 59: datum=new Date(jahr,monat-1,1);


60: jahr=datum.getFullYear(); 61: monat=datum.getMonth()+1; 62: Ausgabe(Kalender(monat,jahr)); 63: } 64: 65: 66: function Kalender(monat,jahr) 67: { 68: /* Ergebnis: zweidimensionales Array kalarr[0...5][0...6] 69: 70: Beispiel - 01/2005 71: 72: Mo Di Mi Do Fr Sa So 73: -------------------- 74: 1 2 --> 2 = kalarr[0][6] 75: 3 4 5 6 7 8 9 | 76: 10 11 12 13 14 15 16 | alle 6 Reihen 77: 17 18 19 20 21 22 23 | sind belegt 78: 24 25 26 27 28 29 30 | 79: 31 --> 31 = kalarr[5][0] 80: */ 81: 82: var tim,etim,tag,leer=String.fromCharCode(160), 83: tmparr=new Array(42),kalarr=new Array(6); 84: 85: tim=new Date(jahr,monat,0).getDate(); // Tage im Monat (28, 29, 30, 31) 86: etim=new Date(jahr,monat-1,1).getDay(); // ersten (Wochen-)Tag im Monat 87: if(etim==0)etim=7; // bestimmen: Mo = 1 ... So = 7 88: 89: for(i=0;i<42;i++) 90: { 91: // temporaeres Array mit Werten (ggf. mit Leerraum) belegen 92: if(i<etim-1 || i>tim+etim-2)tmparr[i]=leer+leer; 93: else 94: { 95: tag=(i-etim+2).toString(); 96: tag=(tag.length<2) ? leer+tag : tag; 97: tmparr[i]=tag; 98: } 99: } 100: 101: // Ergebnis-Array kalarr[][] aufbauen und zurueck geben 102: for(i=0,j=6;i<42;i+=7,j+=7)kalarr[i/7]=tmparr.slice(i,j+1); 103: return kalarr; 104: } 105: 106: 107: function Ausgabe(kalarr) 108: { 109: var monatjahr,mj,ausgabe,tspans,leer=String.fromCharCode(160); 110: 111: monatjahr=svgdoc.getElementById("monatjahr"); 112: ausgabe=svgdoc.getElementById("ausgabe"); 113: tspans=ausgabe.getElementsByTagName("tspan"); 114: 115: for(i=0;i<6;i++) 116: { 117: tspans.item(2*i).firstChild.nodeValue= 118: kalarr[i].slice(0,6).join(",").replace(/,/g,leer); 119: tspans.item(2*i+1).firstChild.nodeValue=leer+kalarr[i][6]; 120: } 121: 122: mj=(monat<10) ? "0"+monat+"/"+jahr : monat+"/"+jahr; 123: monatjahr.firstChild.nodeValue=mj; 124: } 125: 126: ]]> 127: </script> 128: 129: </defs> 130: 131: <text x="20" y="30" style="fill: #000; font-size: 24px; font-weight: normal; 132: font-family: sans-serif">SVG-Kalender</text> 133: 134: <a xlink:href="" onclick="PrevNextMonth(-1)"> 135: <text x="30" y="70"><< 136: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 137: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 138: </text> 139: </a>


140: 141: <text id="monatjahr" x="90" y="70"> </text> 142: 143: <a xlink:href="" onclick="PrevNextMonth(1)"> 144: <text x="200" y="70">>> 145: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 146: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 147: </text> 148: </a> 149: 150: <text x="30" y="90"><tspan>Mo Di Mi Do Fr Sa <tspan>So</tspan></tspan></text> 151: <text x="30" y="105">--------------------</text> 152: <text id="ausgabe" x="30" y="100"> 153: <tspan x="30" dy="1.2em"> <tspan> </tspan></tspan> 154: <tspan x="30" dy="1.2em"> <tspan> </tspan></tspan> 155: <tspan x="30" dy="1.2em"> <tspan> </tspan></tspan> 156: <tspan x="30" dy="1.2em"> <tspan> </tspan></tspan> 157: <tspan x="30" dy="1.2em"> <tspan> </tspan></tspan> 158: <tspan x="30" dy="1.2em"> <tspan> </tspan></tspan> 159: </text> 160: 161: </svg>

file_infos.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: onload="SVGFileInfos(evt)"> 12: 13: <title>SVG - Learning By Coding</title> 14: <desc>SVG-Spezifikation in Beispielen</desc> 15: 16: <defs> 17: <script xlink:href="file_infos.php" type="text/javascript"></script> 18: </defs> 19: 20: <text x="20" y="30" style="fill: #000; font-size: 24px"> 21: Dateiinformationen (PHP-Script als JavaScript-Quelle) 22: </text> 23: 24: <text x="30" y="50" style="fill: #00C; font-family: monospace; 25: font-size: 18px; font-weight: bold" xml:space="preserve"> 26: <tspan id="name" x="30" dy="1.2em">Dateiname: </tspan> 27: <tspan id="size" x="30" dy="1.2em">Dateigröße: </tspan> 28: <tspan id="last" x="30" dy="1.2em">Geändert: </tspan> 29: </text> 30: 31: <a xlink:href="file_infos_php.txt" target="_top"> 32: <text x="30" y="150" style="fill: #000; font-size: 11px; pointer-events: visible"> 33: PHP-Script zur Datenabfrage 34: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 35: <set attributeName="text-decoration" attributeType="CSS" to="underline" 36: begin="mouseover"/> 37: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 38: <set attributeName="text-decoration" attributeType="CSS" to="none"


39: begin="mouseout"/> 40: </text> 41: </a> 42: 43: </svg>

file_infos.php zu file_infos.svg 1: <?php 2: 3: // -------------------------------------------------- 4: // file_infos.php liefert Datei-Informationen als 5: // JavaScript-Code an das aufrufende SVG-Dokument aus 6: // -------------------------------------------------- 7: // by Dr. Thomas Meinike 10/04 8: // SVG - Learning By Coding 9: // http://www.datenverdrahten.de/svglbc/ 10: // -------------------------------------------------- 11: 12: header("Content-Type: text/javascript"); 13: $file_name="file_infos.svg"; 14: $file_size=filesize($file_name)." Bytes"; 15: $file_last=date("d.m.Y - H:i:s",filemtime($file_name)); 16: 17: ?> 18: 19: function SVGFileInfos(load_evt) 20: { 21: var svgdoc,file_name,file_last,file_size; 22: 23: svgdoc=load_evt.target.ownerDocument; 24: 25: file_name="<?=$file_name;?>"; 26: file_size="<?=$file_size;?>"; 27: file_last="<?=$file_last;?>"; 28: 29: svgdoc.getElementById("name").firstChild.nodeValue+=file_name; 30: svgdoc.getElementById("size").firstChild.nodeValue+=file_size; 31: svgdoc.getElementById("last").firstChild.nodeValue+=file_last; 32: }

vectorEffect.svg



13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <text x="20" y="30" style="fill: #000; font-size: 24px"> 16: Vektoreffekt "Schiene"</text> 17: 18: <text x="20" y="190" style="fill: #000; font-size: 14px"> 19: SVG 1.2 bietet spezielle Techniken für Vektoreffekte 20: (Element <tspan fill="#F00">vectorEffect</tspan>, siehe Code)</text> 21: 22:  23: <line x1="20" y1="150" x2="520" y2="150" 24: fill="none" stroke="#000" stroke-width="8"/> 25: <line x1="20" y1="150" x2="520" y2="150" 26: fill="none" stroke="#FFF" stroke-width="4" stroke-dasharray="10,2"/> 27: 28:  29: <path d="M24 126 C112.221 15.7232 148.151 115.252 240 124 C286.121 128.392 30: 280.354 73.8769 323 70 C393.552 63.5862 447.861 114.896 515 121" 31: fill="none" stroke="#000" stroke-width="8"/> 32: <path d="M24 126 C112.221 15.7232 148.151 115.252 240 124 C286.121 128.392 33: 280.354 73.8769 323 70 C393.552 63.5862 447.861 114.896 515 121" 34: fill="none" stroke="#FFF" stroke-width="4" stroke-dasharray="10,2"/> 35: 36:  52: 53: </svg>

rotate_line.svg

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:  8:  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: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc,c=0,d=20; 22: 23: 24: function getSVGDoc(load_evt) 25: { 26: svgdoc=load_evt.target.ownerDocument; 27: } 28: 29: 30: function Beschleunigen(repeat_evt) 31: { 32: c++; 33: 34: d=parseFloat(repeat_evt.target.getAttribute('dur'))/2; 35: repeat_evt.target.setAttribute('dur',d); 36: 37: svgdoc.getElementById('counter').firstChild.data=c; 38: svgdoc.getElementById('duration').firstChild.data=d; 39: } 40: 41: ]]> 42: </script> 43: 44: </defs> 45: 46: <text x="20" y="30" style="fill: #000; font-size: 24px"> 47: Rotierende Linie mit Beschleunigung</text> 48: 49:  50: <line x1="180" y1="100" x2="280" y2="200" style="stroke: #F00"> 51: 52: <animateTransform attributeName="transform" attributeType="XML" 53: type="rotate" from="0,230,150" to="360,230,150" begin="0s" dur="20s" 54: repeatDur="indefinite" fill="freeze" onrepeat="Beschleunigen(evt)"/> 55: 56: </line> 57: 58:  59: <circle cx="230" cy="150" r="1.5" style="fill: #00C"/> 60: <circle cx="230" cy="150" r="70.71" style="fill: none; stroke: #CCC"/> 61: 62:  63: <text x="20" y="60" style="fill: #000"> 64: Umdrehungen: <tspan id="counter" style="fill: #00C">0</tspan> | 65: dur = <tspan id="duration" style="fill: #00C">20</tspan> s 66: (Wert wird nach jedem Durchlauf halbiert)</text> 67: 68: </svg>


flow_tropfen.svg

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: <!ENTITY % svgExt "|flow"> 7: <!ELEMENT flow (flowRegion,flowDiv)> 8: <!ELEMENT flowRegion (region)> 9: <!ELEMENT flowDiv (flowPara*)> 10: <!ELEMENT flowPara (#PCDATA)> 11: <!ELEMENT region EMPTY> 12: <!ATTLIST region xlink:href CDATA #REQUIRED> 13: ]> 14: 15:  16:  17: 18: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 19: 20: <defs> 21: <style type="text/css"> 22: <![CDATA[ 23: 24: text 25: { 26: fill: #000; 27: font-size: 24px; 28: font-family: sans-serif; 29: } 30: 31: path 32: { 33: fill: #FFF; 34: stroke: #000; 35: stroke-width: 1px; 36: } 37: 38: flow 39: { 40: text-align: center; 41: } 42: 43: flowPara 44: { 45: fill: #00C; 46: font-size: 13px; 47: font-family: sans-serif; 48: } 49:


50: flowPara.umbruch 51: { 52: font-size: 8px; 53: } 54: 55: flowPara.umbruch1 56: { 57: font-size: 30px; 58: } 59: 60: ]]> 61: </style> 62: 63: </defs> 64: 65: <text x="20" y="30"> 66: Fließtext mit flow-Elementen (ASV 6) 67: </text> 68: 69: <path id="tropfen" d="M256.656 72 C256.656 72 375.676 252.442 375.676 345.37 70: C375.676 438.299 321.11 484 255.015 484 C188.92 484 136.324 438.299 136.324 345.37 71: C136.324 252.442 256.656 72 256.656 72 Z" transform="translate(-50,-20)"/> 72: 73: <flow> 74: 75: <flowRegion> 76: <region xlink:href="#tropfen"/> 77: </flowRegion> 78: 79: <flowDiv> 80: 81: <flowPara class="umbruch1"> </flowPara> 82: 83: <flowPara> 84: SVG 1.0 wurde 2001 vom W3C als offizielle Empfehlung verabschiedet. 85: </flowPara> 86: 87: <flowPara class="umbruch"> </flowPara> 88: 89: <flowPara> 90: Die Version 1.1 brachte 2003 Korrekturen und eine Modularisierung. 91: </flowPara> 92: 93: <flowPara class="umbruch"> </flowPara> 94: 95: <flowPara> 96: Mit der laut Roadmap Anfang 2005 zu erwartenden finalen Version 1.2 97: erweitern sich die Möglichkeiten für Illustratoren und Entwickler durch: 98: Fließtext und Mehrfachseiten, Multimediaerweiterungen, neue Zeichentechniken 99: und Effekte, RCC/sXBL, verbessertes Rendering und erweiterte DOM-Unterstützung. 100: </flowPara> 101: 102: <flowPara class="umbruch"> </flowPara> 103: 104: <flowPara> 105: Der Vortrag gibt einen Überblick zu diesen und weiteren Neuerungen. 106: </flowPara> 107: 108: </flowDiv> 109: 110: </flow> 111: 112: </svg>


mobile_statisch.svg

1: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?> 2: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" 3: "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd"> 4: 5:  6:  7: 8: <svg version="1.1" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg"> 9:  10: 11: <title>SVGT-Testbeispiel</title> 12: <desc>SVG-Tiny-Dokument für Handy Siemens S65 und vergleichbare Geräte</desc> 13: 14: <defs> 15:  20: <font horiz-adv-x="1233"> 21: <font-face font-family="Sera Sans Mono" units-per-em="2048" 22: panose-1="2 11 6 9 3 8 4 2 2 4" ascent="1901" descent="-483" alphabetic="0"/> 23: <missing-glyph d="M104 -362V1444H1128V-362H104ZM219 -248H1014V1329H219V-248Z"/> 24: <glyph unicode="H" glyph-name="H" d="M137 25: 1493H340V881H893V1493H1096V0H893V711H340V0H137V1493Z"/> 26: <glyph unicode="a" glyph-name="a" d="M702 563H641Q480 563 399 507T317 338Q317 27: 237 378 181T547 125Q699 125 786 230T874 522V563H702ZM1059 639V0H874V166Q815 28: 66 726 19T508 -29Q337 -29 235 67T133 326Q133 513 258 610T627 707H874V736Q873 29: 870 806 930T592 991Q498 991 402 964T215 885V1069Q317 1108 410 1127T592 1147Q731 30: 1147 829 1106T989 983Q1027 933 1043 860T1059 639Z"/> 31: <glyph unicode="l" glyph-name="l" d="M639 406Q639 282 684 219T819 32: 156H1034V0H801Q636 0 546 106T455 406V1423H160V1567H639V406Z"/> 33: <glyph unicode="o" glyph-name="o" d="M616 991Q476 991 404 882T332 559Q332 346 404 34: 237T616 127Q757 127 829 236T901 559Q901 773 829 882T616 991ZM616 1147Q849 1147 35: 972 996T1096 559Q1096 272 973 122T616 -29Q383 -29 260 121T137 559Q137 845 260 36: 996T616 1147Z"/> 37: <glyph unicode=" " glyph-name="space"/> 38: <glyph unicode="W" glyph-name="W" d="M0 1493H197L340 281L510 1083H721L893 39: 279L1036 1493H1233L1010 0H819L616 887L414 0H223L0 1493Z"/> 40: <glyph unicode="e" glyph-name="e" d="M1112 606V516H315V510Q315 327 410 227T680 41: 127Q768 127 864 155T1069 240V57Q964 14 867 -7T678 -29Q417 -29 270 127T123 42: 559Q123 827 267 987T651 1147Q865 1147 988 1002T1112 606ZM928 660Q924 822 852 43: 906T643 991Q510 991 424 903T322 659L928 660Z"/> 44: <glyph unicode="t" glyph-name="t" d="M614 1438V1120H1032V977H614V369Q614 245 661 45: 196T825 147H1032V0H807Q600 0 515 83T430 369V977H131V1120H430V1438H614Z"/> 46: <glyph unicode="!" glyph-name="exclam" d="M516 1493H719V838L698 481H537L516 47: 838V1493ZM516 254H719V0H516V254Z"/> 48: </font> 49: </defs> 50: 51:  52: <text x="20" y="30" font-size="24">SVG-Tiny für Handys (statisch)</text> 53: 54: <g transform="translate(20,50)"> 55: <rect fill="#FFFFFF" x="0" y="0" width="132" height="176" stroke="#000000"/> 56: <text x="20" y="25" font-family="Sera Sans Mono" font-size="14" fill="#FF0000"> 57: Hallo Welt!</text> 58: <rect x="50" y="40" width="30" height="30" fill="#0000FF"/> 59: <circle cx="50" cy="70" r="10" fill="#FFFF00" stroke="#000000"/>


60: <polygon points="60,100 70,80 80,100" fill="#009900"/> 61: <rect x="15" y="120" width="0" height="10" fill="#FFCC33"> 62: <animate attributeName="width" attributeType="XML" begin="0s" dur="10s" 63: fill="freeze" from="0" to="50"/> 64: </rect> 65: <rect x="15" y="135" width="0" height="10" fill="#FF6699"> 66: <animate attributeName="width" attributeType="XML" begin="0s" dur="10s" 67: fill="freeze" from="0" to="75"/> 68: </rect> 69: <rect x="15" y="150" width="0" height="10" fill="#99CCFF"> 70: <animate attributeName="width" attributeType="XML" begin="0s" dur="10s" 71: fill="freeze" from="0" to="100"/> 72: </rect> 73: </g> 74: 75: </svg>

mobile_dynamisch.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <text x="20" y="30" font-size="24">SVG-Tiny für Handys (dynamisch)</text> 16: 17: 


27: 28: <image xlink:href="http://svgmob.datenverdrahten.de/gw/?cc=BG" 29: x="20" y="50" width="132" height="176"/> 30: 31: <image xlink:href="http://svgmob.datenverdrahten.de/gw/?cc=BB" 32: x="160" y="50" width="132" height="176"/> 33: 34: <image xlink:href="http://svgmob.datenverdrahten.de/gw/?cc=HF" 35: x="20" y="235" width="132" height="176"/> 36: 37: <image xlink:href="http://svgmob.datenverdrahten.de/gw/?cc=LG" 38: x="160" y="235" width="132" height="176"/> 39: 40: </svg>

createEvent.svg

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:  8:  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: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc,svgobj,check=false; 22: 23: 24: function Init(load_evt) 25: { 26: svgdoc=load_evt.target.ownerDocument; 27: svgobj=svgdoc.getElementById("zielkreis"); 28: } 29: 30: 31: function NewEvent(click_evt) 32: { 33: var newevt; 34: 35: // DOM-Theorie 36: /* 37: newevt=svgdoc.createEvent("MouseEvents"); 38: newevt.initMouseEvent( 39: "click",true,true,svgdoc,1,0,0,0,0,false,false,false,false,0,null); 40: 41: // initMouseEvent-Argumente: 42: // typeArg,canBubbleArg,cancelableArg,viewArg,detailArg,screenXArg, 43: // screenYArg,clientXArg,clientYArg,ctrlKeyArg,altKeyArg,shiftKeyArg,


44: // metaKeyArg,buttonArg,relatedTargetArg 45: 46: check=svgobj.dispatchEvent(newevt); 47: if(check)alert("click-Event wurde erzeugt und ausgelöst."); 48: */ 49: 50: // ASV6-Praxis 51: var ver=getSVGViewerVersion(); 52: if(ver.indexOf("Adobe")!=-1 && ver.indexOf("6.0")!=-1) 53: { 54: newevt=svgdoc.createEvent("click"); 55: alert(newevt+" : "+newevt.type); // [object CustomEvent] : click 56: check=svgobj.dispatchEvent(newevt); 57: if(check)alert("click-Event wurde erzeugt und ausgelöst."); 58: } 59: else alert("createEvent() funktioniert nur mit dem ASV 6.0!"); 60: } 61: 62: 63: function TestFunc() 64: { 65: svgobj.setAttribute("fill","#FF0"); 66: } 67: 68: ]]> 69: </script> 70: 71: </defs> 72: 73: <text x="20" y="30" style="fill: #000; font-size: 24px"> 74: Ereignisse mit createEvent() erzeugen [ASV 6.0]</text> 75: 76: <circle cx="120" cy="90" r="20" fill="#F00" onclick="NewEvent(evt)"/> 77: <circle id="zielkreis" cx="220" cy="90" r="20" fill="#090" onclick="TestFunc()"/> 78: 79: <text x="20" y="140"> 80: <tspan x="20" dy="1.2em"> 81: Anklicken des roten Kreises erzeugt neues click-Ereignis,</tspan> 82: <tspan x="20" dy="1.2em"> 83: welches die für den grünen Kreis definierte Funktion</tspan> 84: <tspan x="20" dy="1.2em"> 85: mittels dispatchEvent() aufruft [Füllfarbe wird gelb].</tspan> 86: </text> 87: 88: </svg>

replaceChild.svg



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: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc; 22: 23: 24: function Init(load_evt) 25: { 26: svgdoc=load_evt.target.ownerDocument; 27: setTimeout("ObjekteErsetzen()",5000); 28: } 29: 30: 31: function ObjekteErsetzen() 32: { 33: var rects,rect_anz,rect_obj,rect_x,rect_y,rect_b,rect_h, 34: circle_obj,circle_x,circle_y,circle_r,circle_f; 35: 36: rects=svgdoc.getElementsByTagName("rect"); 37: rect_anz=rects.length; 38: 39: for(i=rect_anz-1;i>=0;i--) 40: { 41: // aktuelles rect-Object abfragen 42: rect_obj=rects.item(i); 43: rect_x=rect_obj.getAttribute("x")*1; 44: rect_y=rect_obj.getAttribute("y")*1; 45: rect_b=rect_obj.getAttribute("width")*1; 46: rect_h=rect_obj.getAttribute("height")*1; 47: 48: // Eigenschaften fuer neues circle-Objekt ermitteln 49: circle_f=rect_obj.getAttribute("fill"); 50: circle_x=rect_x+rect_b/2; 51: circle_y=rect_y+rect_h/2; 52: circle_r=Math.min(rect_b,rect_h)/2; 53: 54: // neues circle-Objekt aufbauen 55: circle_obj=svgdoc.createElement("circle"); 56: circle_obj.setAttribute("cx",circle_x); 57: circle_obj.setAttribute("cy",circle_y); 58: circle_obj.setAttribute("r",circle_r); 59: circle_obj.setAttribute("fill",circle_f); 60: 61: // aktuelles rect-Object durch neues circle-Objekt ersetzen 62: rect_obj.parentNode.replaceChild(circle_obj,rect_obj); 63: } 64: } 65: 66: ]]> 67: </script> 68: 69: </defs> 70: 71: <text x="20" y="30" style="fill: #000; font-size: 24px"> 72: Knoten mit replaceChild() ersetzen</text> 73: <text x="20" y="50"> 74: Nach 5 Sekunden werden die rect-Elemente durch circle-Elemente ersetzt.</text> 75: 76: <rect x="100" y="70" width="40" height="20" fill="#FF0"/> 77: <rect x="120" y="90" width="60" height="30" fill="#F00"/> 78: <rect x="150" y="120" width="80" height="40" fill="#090"/> 79: <rect x="190" y="160" width="100" height="50" fill="#00C"/> 80: <rect x="240" y="210" width="120" height="60" fill="#000"/> 81: 82: </svg>


geturl_variants.svg

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:  8:  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: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc,ret_arr,dt_out,ip_out,ho_out,ua_out,err; 22: 23: 24: function Init(load_evt) 25: { 26: svgdoc=load_evt.target.ownerDocument; 27: 28: dt_out=svgdoc.getElementById("dt").firstChild; 29: ip_out=svgdoc.getElementById("ip").firstChild; 30: ho_out=svgdoc.getElementById("ho").firstChild; 31: ua_out=svgdoc.getElementById("ua").firstChild; 32: } 33: 34: 35: function GetData(m) 36: { 37: err=false; 38: ret_arr=null; 39: 40: if(m=="str")getURL("geturl_variants.php?method=str",callback_str); 41: if(m=="arr")getURL("geturl_variants.php?method=arr",callback_arr); 42: if(m=="xml")getURL("geturl_variants.php?method=xml",callback_xml); 43: } 44: 45: 46: function callback_str(urlRequestStatus) 47: { 48: if(urlRequestStatus.success && urlRequestStatus.content!="Error!") 49: { 50: ret_arr=urlRequestStatus.content.split("|"); 51: GetResults(); 52: } 53: else err=true; 54: } 55: 56: 57: function callback_arr(urlRequestStatus) 58: {


59: if(urlRequestStatus.success && urlRequestStatus.content!="Error!") 60: { 61: eval("ret_arr="+urlRequestStatus.content); 62: GetResults(); 63: } 64: else err=true; 65: } 66: 67: 68: function callback_xml(urlRequestStatus) 69: { 70: if(urlRequestStatus.success && urlRequestStatus.content!="Error!") 71: { 72: xmldoc=parseXML(urlRequestStatus.content).documentElement; 73: if(xmldoc) 74: { 75: ret_arr=new Array(); 76: ret_arr[0]=xmldoc.getElementsByTagName("dt").item(0).firstChild.nodeValue; 77: ret_arr[1]=xmldoc.getElementsByTagName("ip").item(0).firstChild.nodeValue; 78: ret_arr[2]=xmldoc.getElementsByTagName("ho").item(0).firstChild.nodeValue; 79: ret_arr[3]=xmldoc.getElementsByTagName("ua").item(0).firstChild.nodeValue; 80: } 81: GetResults(); 82: } 83: else err=true; 84: } 85: 86: 87: function GetResults() 88: { 89: if(typeof(ret_arr)=="object" && ret_arr!=null && !err) 90: { 91: dt_out.nodeValue="Zeitpunkt: "+ret_arr[0]; 92: ip_out.nodeValue="IP-Adresse: "+ret_arr[1]; 93: ho_out.nodeValue="Hostname: "+ret_arr[2]; 94: ua_out.nodeValue="User-Agent: "+ret_arr[3]; 95: } 96: else alert("Es ist ein Fehler aufgetreten!"); 97: } 98: 99: ]]> 100: </script> 101: 102: </defs> 103: 104: <text x="20" y="30" style="fill: #000; font-size: 24px"> 105: getURL()-Varianten zur externen Datenabfrage 106: </text> 107: 108: <text x="30" y="50" style="fill: #00C; font-family: monospace; 109: font-size: 14px; font-weight: bold" xml:space="preserve"> 110: <tspan id="dt" x="30" dy="1.2em">Zeitpunkt: ...</tspan> 111: <tspan id="ip" x="30" dy="1.2em">IP-Adresse: ...</tspan> 112: <tspan id="ho" x="30" dy="1.2em">Hostname: ...</tspan> 113: <tspan id="ua" x="30" dy="1.2em">User-Agent: ...</tspan> 114: </text> 115: 116: <text x="30" y="150" style="fill: #F00; font-size: 12px"> 117: getURL()-Aufrufe mit Rückgabe ...</text> 118: 119: <a xlink:href="" onclick="GetData('str')"> 120: <text x="30" y="170">› als einfacher String mit Separator-Zeichen 121: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 122: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 123: </text> 124: </a> 125: 126: <a xlink:href="" onclick="GetData('arr')"> 127: <text x="30" y="190">› als new Array(...)-String 128: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 129: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 130: </text> 131: </a> 132: 133: <a xlink:href="" onclick="GetData('xml')"> 134: <text x="30" y="210">› als XML-Dokument 135: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 136: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 137: </text> 138: </a>


139: 140: <a xlink:href="geturl_variants_php.txt" target="_top"> 141: <text x="30" y="245">PHP-Script zur Datenabfrage 142: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseover"/> 143: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/> 144: </text> 145: </a> 146: 147: </svg>

geturl_variants.php zu geturl_variants.svg 1: <?php 2: 3: /* 4: // ---------------------------------------------------- 5: // geturl_variants.php liefert Daten an die callback()- 6: // JavaScript-Funktionen im aufrufende SVG-Dokument aus 7: // Demonstration unterschiedlicher Rueckgabe-Techniken 8: // ---------------------------------------------------- 9: // by Dr. Thomas Meinike 01/05 10: // SVG - Learning By Coding 11: // http://www.datenverdrahten.de/svglbc/ 12: // ---------------------------------------------------- 13: 14: Beispiel-Rueckgaben: 15: 16: method str: 17: ----------- 18: 15.01.2005 - 19:13:48|127.0.0.1|localhost|Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0) 19: 20: method arr: 21: ----------- 22: new Array("15.01.2005 - 19:14:53","127.0.0.1","localhost","Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)") 23: 24: method xml: 25: ----------- 26: <?xml version="1.0" encoding="ISO-8859-1" 27: <somedata> 28: <dt>15.01.2005 - 19:15:21</dt> 29: <ip>127.0.0.1</ip> 30: <ho>localhost</ho> 31: <ua>Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)</ua> 32: </somedata> 33: 34: */ 35: 36: if(isset($_GET["method"]))$method=$_GET["method"]; 37: else $method=""; 38: 39: $methods=array("str","arr","xml"); 40: 41: $sep="|"; // Separator-Zeichen fuer einfache String-Rueckgabe 42: 43: if(isset($_SERVER) && in_array($method,$methods)) 44: { 45: if(empty($_SERVER["HTTP_REFERER"])) 46: { 47: $ip=$_SERVER["REMOTE_ADDR"]; 48: $ho=gethostbyaddr($ip); 49: $ua=$_SERVER["HTTP_USER_AGENT"]; 50: $dt=date("d.m.Y - H:i:s"); 51: } 52: else 53: { 54: $ip="unknown"; 55: $ho="unknown"; 56: $ua="unknown"; 57: $dt="unknown"; 58: } 59: 60: // str: Rueckgabe als einfacher String mit Separator-Zeichen 61: if($method=="str")$ret=$dt.$sep.$ip.$sep.$ho.$sep.$ua;


62: 63: // arr: String-Rueckgabe in JavaScript-Array-Schreibweise 64: elseif($method=="arr")$ret='new Array("'.$dt.'","'.$ip.'","'.$ho.'","'.$ua.'")'; 65: 66: // xml: Rueckgabe als XML-Dokument 67: elseif($method=="xml") 68: { 69: $ret="xml version=\"1.0\" encoding=\"ISO-8859-1\"\n"; 70: $ret.="<somedata>\n"; 71: $ret.=" <dt>$dt</dt>\n"; 72: $ret.=" <ip>$ip</ip>\n"; 73: $ret.=" <ho>$ho</ho>\n"; 74: $ret.=" <ua>$ua</ua>\n"; 75: $ret.="</somedata>\n"; 76: } 77: print $ret; 78: } 79: else print "Error!"; 80: 81: ?>

parsexml_gzip.svg

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:  8:  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: line


22: { 23: stroke: #000; 24: stroke-width: 1px 25: } 26: 27: g text 28: { 29: font-family: Arial,Helvetica,sans-serif; 30: font-size: 10px; 31: } 32: 33: ]]> 34: </style> 35: 36: 37: <script type="text/javascript"> 38: <![CDATA[ 39: 40: var svgdoc,svgroot,xmldoc,xdaten,ydaten,anzahl,ver; 41: 42: 43: function getSVGDoc(load_evt) 44: { 45: svgdoc=load_evt.target.ownerDocument; 46: svgroot=svgdoc.documentElement; 47: ver=getSVGViewerVersion(); 48: } 49: 50: 51: function XMLDaten() 52: { 53: if(ver.indexOf("Adobe")!=-1) 54: { 55: getURL("xmldaten.svgz",callback); 56: } 57: } 58: 59: 60: function callback(urlRequestStatus) 61: { 62: if(urlRequestStatus.success) 63: { 64: xmldoc=parseXML(urlRequestStatus.content); 65: xdaten=xmldoc.getElementsByTagName("x"); 66: ydaten=xmldoc.getElementsByTagName("y"); 67: anzahl=xdaten.length; 68: if(anzahl==ydaten.length)FunktionZeichnen(); 69: } 70: } 71: 72: 73: function FunktionZeichnen() 74: { 75: var startx=300,starty=200,fx=10,fy=50,x,y,wertepaar="",punkte="",elemobj; 76: 77: // x,y-Daten grafisch darstellen - Daten aufbereiten 78: for(i=0;i<anzahl;i+=10) 79: { 80: x=xdaten.item(i).firstChild.nodeValue; 81: y=ydaten.item(i).firstChild.nodeValue; 82: 83: wertepaar=(startx+x*fx).toString()+","+(starty-y*fy).toString()+" "; 84: punkte+=wertepaar; 85: } 86: 87: // Funktionsgraph mittels polyline erzeugen 88: elemobj=svgdoc.createElement("polyline"); 89: elemobj.setAttribute("points",punkte); 90: elemobj.setAttribute("stroke","#090"); 91: elemobj.setAttribute("stroke-width","1.5px"); 92: elemobj.setAttribute("fill","none"); 93: svgroot.appendChild(elemobj); 94: 95: // Link bzw. Text aus-/einblenden 96: svgdoc.getElementById("aktion").style.setProperty("visibility","hidden"); 97: svgdoc.getElementById("info").style.setProperty("visibility","visible"); 98: } 99: 100: ]]> 101: </script>


102: 103: </defs> 104: 105: <text x="20" y="30" style="fill: #000; font-size: 24px"> 106: parseXML()</text> 107: <text x="20" y="50" style="fill: #000; font-size: 14px"> 108: mit GZip-komprimierten Daten (svgz)</text> 109: 110:  111: <line x1="50" y1="200" x2="547" y2="200"/> 112: <line x1="300" y1="50" x2="300" y2="350"/> 113: <line x1="540" y1="195" x2="550" y2="200"/> 114: <line x1="540" y1="205" x2="550" y2="200"/> 115: <line x1="295" y1="60" x2="300" y2="50"/> 116: <line x1="300" y1="50" x2="305" y2="60"/> 117: 118:  119: <g> 120: <line x1="100" y1="200" x2="100" y2="205"/> 121: <line x1="150" y1="200" x2="150" y2="205"/> 122: <line x1="200" y1="200" x2="200" y2="205"/> 123: <line x1="250" y1="200" x2="250" y2="205"/> 124: <line x1="350" y1="200" x2="350" y2="205"/> 125: <line x1="400" y1="200" x2="400" y2="205"/> 126: <line x1="450" y1="200" x2="450" y2="205"/> 127: <line x1="500" y1="200" x2="500" y2="205"/> 128: 129: <text x="93" y="215">-20</text> 130: <text x="143" y="215">-15</text> 131: <text x="193" y="215">-10</text> 132: <text x="243" y="215">-5</text> 133: <text x="347" y="215">5</text> 134: <text x="395" y="215">10</text> 135: <text x="445" y="215">15</text> 136: <text x="495" y="215">20</text> 137: <text x="555" y="203" style="font-size: 12px">x</text> 138: </g> 139: 140:  141: <g> 142: <line x1="295" y1="100" x2="300" y2="100"/> 143: <line x1="295" y1="150" x2="300" y2="150"/> 144: <line x1="295" y1="250" x2="300" y2="250"/> 145: <line x1="295" y1="300" x2="300" y2="300"/> 146: 147: <text x="297" y="40" style="font-size: 12px">y</text> 148: <text x="287" y="103">2</text> 149: <text x="287" y="153">1</text> 150: <text x="284" y="253">-1</text> 151: <text x="284" y="303">-2</text> 152: </g> 153: 154: <g id="aktion"> 155: <a xlink:href="" onclick="XMLDaten()"> 156: <text x="185" y="380" style="fill: #00C; font-size: 14px"> 157: XML-Daten laden / Funktion zeichnen 158: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/> 159: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/> 160: </text> 161: </a> 162: </g> 163: 164: <g id="info" style="visibility: hidden"> 165: <text x="210" y="380" style="fill: #00C; font-size: 14px"> 166: Funktion: y = sin(2 x) + 2 sin(x) 167: </text> 168: </g> 169: 170: <text x="100" y="390" style="fill: #F00; font-size: 12px"> 171: <tspan x="100" dy="1.2em">Es werden 200 KB komprimierte XML-Daten geladen 172: (unkomprimiert 1.2 MB).</tspan> 173: <tspan x="100" dy="1.2em">Von den 44000 x,y-Datensätzen werden 4400 Paare 174: mittels polyline-Element</tspan> 175: <tspan x="100" dy="1.2em">grafisch dargestellt.</tspan> 176: </text> 177: 178: </svg>


insertBefore.svg

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:  8:  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: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc; 22: 23: 24: function Init(load_evt) 25: { 26: svgdoc=load_evt.target.ownerDocument; 27: setTimeout("ObjekteEinfuegen()",5000); 28: } 29: 30: 31: function ObjekteEinfuegen() 32: { 33: var rects,rect_anz,rect_obj,rect_x,rect_y,rect_b,rect_h, 34: circle_obj,circle_x,circle_y,circle_r,circle_f; 35: 36: rects=svgdoc.getElementsByTagName("rect"); 37: rect_anz=rects.length; 38: 39: for(i=0;i<rect_anz;i++) 40: { 41: // aktuelles rect-Object abfragen 42: rect_obj=rects.item(i); 43: rect_x=rect_obj.getAttribute("x")*1; 44: rect_y=rect_obj.getAttribute("y")*1; 45: rect_b=rect_obj.getAttribute("width")*1; 46: rect_h=rect_obj.getAttribute("height")*1; 47: 48: // Eigenschaften fuer neues circle-Objekt ermitteln 49: circle_x=rect_x+rect_b; 50: circle_y=rect_y; 51: circle_r=Math.min(rect_b,rect_h)/2; 52: circle_f=rect_obj.getAttribute("fill"); 53: 54: // neues circle-Objekt aufbauen 55: circle_obj=svgdoc.createElement("circle"); 56: circle_obj.setAttribute("cx",circle_x);


57: circle_obj.setAttribute("cy",circle_y); 58: circle_obj.setAttribute("r",circle_r); 59: circle_obj.setAttribute("fill",circle_f); 60: circle_obj.setAttribute("opacity","0.6"); 61: 62: // neues circle-Objekt vor aktuellem rect-Object einfuegen 63: rect_obj.parentNode.insertBefore(circle_obj,rect_obj); 64: } 65: } 66: 67: ]]> 68: </script> 69: 70: </defs> 71: 72: <text x="20" y="30" style="fill: #000; font-size: 24px"> 73: Knoten mit insertBefore() einfügen</text> 74: <text x="20" y="50"> 75: Nach 5 Sekunden werden (im DOM-Baum) vor den rect-Elementen 76: circle-Elemente eingefügt.</text> 77: 78: <rect x="100" y="70" width="40" height="20" fill="#FF0"/> 79: <rect x="120" y="90" width="60" height="30" fill="#F00"/> 80: <rect x="150" y="120" width="80" height="40" fill="#090"/> 81: <rect x="190" y="160" width="100" height="50" fill="#00C"/> 82: <rect x="240" y="210" width="120" height="60" fill="#000"/> 83: 84: </svg>

knoten_loeschen.svg

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:  8:  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: rect 22: { 23: stroke: white; 24: } 25: 26: ]]> 27: </style>


28: 29: 30: <script type="text/javascript"> 31: <![CDATA[ 32: 33: var svgdoc,svgroot,t1=true,t2=true; 34: 35: 36: function Init(load_evt) 37: { 38: svgdoc=load_evt.target.ownerDocument; 39: svgroot=svgdoc.rootElement; 40: } 41: 42: 43: function Test1() 44: { 45: if(t1) 46: { 47: var obj,clone,start,ende,diff; 48: obj=svgdoc.getElementById("gruppe1"); 49: 50: start=svgroot.getCurrentTime(); // Zeitmessung starten 51: 52: // Gruppe ohne Kindknoten klonen und den Elementknoten 53: // selbst durch das geklonte Objekt ersetzen 54: clone=obj.cloneNode(false); 55: obj.parentNode.replaceChild(clone,obj); 56: 57: ende=svgroot.getCurrentTime(); // Zeitmessung stoppen 58: 59: diff=Math.round((ende-start)*1000); // Zeitdifferenz ausgeben 60: svgdoc.getElementById("test1").firstChild.nodeValue=" ("+diff+" ms)"; 61: 62: t1=false; 63: } 64: } 65: 66: 67: function Test2() 68: { 69: if(t2) 70: { 71: var obj,anz,start,ende,diff; 72: obj=svgdoc.getElementById("gruppe2"); 73: 74: start=svgroot.getCurrentTime(); // Zeitmessung starten 75: 76: // alle Kindknoten der Gruppe in einer Schleife entfernen 77: anz=obj.childNodes.length; 78: for(i=0;i<anz;i++)obj.removeChild(obj.lastChild); 79: 80: ende=svgroot.getCurrentTime(); // Zeitmessung stoppen 81: 82: diff=Math.round((ende-start)*1000); // Zeitdifferenz ausgeben 83: svgdoc.getElementById("test2").firstChild.nodeValue=" ("+diff+" ms)"; 84: 85: t2=false; 86: } 87: } 88: 89: ]]> 90: </script> 91: 92: </defs> 93: 94: <text x="20" y="30" style="fill: #000; font-size: 24px"> 95: Knoten aus dem DOM-Baum löschen (Technik-Vergleich)</text> 96: <text x="20" y="45"> 97: einfacher Performance-Test mit jeweils 150 rect-Elementen</text> 98: 99: <text x="20" y="70" style="font-size: 11px; fill: #00C"> 100: <tspan x="20" dy="1.2em" style="fill: #000">Technik 1:</tspan> 101: <tspan x="20" dy="1.2em">clone=obj.cloneNode(false);</tspan> 102: <tspan x="20" dy="1.2em">obj.parentNode.replaceChild(clone,obj);</tspan> 103: </text> 104: 105: <text x="20" y="140" style="font-size: 11px; fill: #00C"> 106: <tspan x="20" dy="1.2em" style="fill: #000">Technik 2:</tspan> 107: <tspan x="20" dy="1.2em">anz=obj.childNodes.length;</tspan>


108: <tspan x="20" dy="1.2em"> 109: for(i=0;i<anz;i++)obj.removeChild(obj.lastChild);</tspan> 110: </text> 111: 112: <a xlink:href=""> 113: <text x="290" y="95" onclick="Test1()">Test 1 114: <set attributeName="fill" attributeType="CSS" 115: to="#F00" begin="mouseover" end="mouseout"/> 116: <tspan id="test1" fill="#00C"> </tspan> 117: </text> 118: </a> 119: 120: <a xlink:href=""> 121: <text x="290" y="165" onclick="Test2()">Test 2 122: <set attributeName="fill" attributeType="CSS" 123: to="#F00" begin="mouseover" end="mouseout"/> 124: <tspan id="test2" fill="#00C"> </tspan> 125: </text> 126: </a> 127: 128: <text x="20" y="220"> 129: Fazit: Zum Entfernen (sehr) großer Knotenmengen bietet sich Technik 1 an.</text> 130: 131:  132: <g id="gruppe1"> 133: <rect x="20" y="60" width="10" height="10" fill="#FF0"/> ... 282: <rect x="260" y="110" width="10" height="10" fill="#000"/> 283: </g> 284: 285:  286: <g id="gruppe2"> 287: <rect x="20" y="130" width="10" height="10" fill="#FF0"/> ... 436: <rect x="260" y="180" width="10" height="10" fill="#000"/> 437: </g> 438: 439: </svg>

attr_node_methods.svg

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:  8:  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: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc,r1,r2,styleattr; 22: 23: 24: function Init(load_evt)


25: { 26: // Objekt-Variablen initialisieren 27: svgdoc=load_evt.target.ownerDocument; 28: r1=svgdoc.getElementById("r1"); 29: r2=svgdoc.getElementById("r2"); 30: 31: // style-Attribut fuer linkes Rechteck (r1) dynamisch erzeugen 32: styleattr=svgdoc.createAttribute("style"); 33: styleattr.nodeValue="fill: #FF0; stroke: #00C; opacity: 0.8"; 34: r1.setAttributeNode(styleattr); 35: } 36: 37: 38: function GRSAttrNode(click_evt) 39: { 40: // style-Attribut lesen/entfernen/zuweisen 41: if(click_evt.target.id=="r1" && r1.hasAttribute("style")) 42: { 43: styleattr=r1.getAttributeNode("style"); 44: r1.removeAttributeNode(styleattr); 45: r2.setAttributeNode(styleattr); 46: } 47: else if(click_evt.target.id=="r2" && r2.hasAttribute("style")) 48: { 49: styleattr=r2.getAttributeNode("style"); 50: r2.removeAttributeNode(styleattr); 51: r1.setAttributeNode(styleattr); 52: } 53: } 54: 55: ]]> 56: </script> 57: 58: </defs> 59: 60: <text x="20" y="30" style="fill: #000; font-size: 24px"> 61: Methoden get/remove/setAttributeNode()</text> 62: <text x="20" y="50">Anklicken des jeweils gelben Rechtecks wendet 63: die Methoden auf das style-Attribut an.</text> 64: 65: <rect id="r1" x="170" y="70" width="50" height="50" onclick="GRSAttrNode(evt)"/> 66: <rect id="r2" x="240" y="70" width="50" height="50" onclick="GRSAttrNode(evt)"/> 67: 68: </svg>


tic-tac-toe.svg

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:  8:  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:  19: 20: <symbol id="zu"> 21: <rect x="0" y="0" width="100" height="100" style="fill: #FFF; stroke: #000"/> 22: <line x1="0" y1="0" x2="100" y2="100" style="stroke: #999"/> 23: <line x1="100" y1="0" x2="0" y2="100" style="stroke: #999"/> 24: </symbol> 25: 26: <symbol id="s1"> 27: <rect x="0" y="0" width="100" height="100" style="fill: #FFF; stroke: #000"/> 28: <path fill="#F00" stroke="#000" stroke-width="0.3px" 29: transform="translate(-60,-10) scale(6)" 30: d="M14.2,3.8C15.6,5.6 17.1,7.4 18.8,9.0C20.2,7.3 21.5,5.4 22.7,3.4 31: C23.5,3.3 24.4,3.1 25.2,3.5C25.6,4.2 25.0,5.0 24.8,5.6C23.8,7.6 22.6,9.5 32: 21.1,11.2C22.5,12.7 24.2,13.7 25.8,15.0C26.4,15.5 25.8,17.0 25.1,16.8 33: C24.5,16.4 24.1,17.5 23.6,16.8C21.8,15.8 20.1,14.8 18.5,13.5C17.1,15.0 34: 15.4,16.2 13.7,17.2C13.0,17.6 12.1,17.3 11.4,17.1C11.6,16.7 11.6,16.4 35: 11.2,16.2C10.4,15.4 11.6,14.9 12.2,14.5C13.5,13.6 14.8,12.6 16.0,11.5 36: C14.5,10.3 13.5,8.7 12.5,7.2C12.1,6.6 11.7,5.9 11.3,5.2C11.7,4.6 12.1,3.6 37: 13.1,4.0C13.3,3.5 13.7,3.5 14.2,3.8Z"/> 38: </symbol> 39: 40: <symbol id="s2"> 41: <rect x="0" y="0" width="100" height="100" style="fill: #FFF; stroke: #000"/> 42: <path fill="#00C" stroke="#000" stroke-width="0.3px" 43: transform="translate(-60,-10) scale(6)" 44: d="M14.2,3.8C15.6,5.6 17.1,7.4 18.8,9.0C20.2,7.3 21.5,5.4 22.7,3.4 45: C23.5,3.3 24.4,3.1 25.2,3.5C25.6,4.2 25.0,5.0 24.8,5.6C23.8,7.6 22.6,9.5 46: 21.1,11.2C22.5,12.7 24.2,13.7 25.8,15.0C26.4,15.5 25.8,17.0 25.1,16.8 47: C24.5,16.4 24.1,17.5 23.6,16.8C21.8,15.8 20.1,14.8 18.5,13.5C17.1,15.0 48: 15.4,16.2 13.7,17.2C13.0,17.6 12.1,17.3 11.4,17.1C11.6,16.7 11.6,16.4 49: 11.2,16.2C10.4,15.4 11.6,14.9 12.2,14.5C13.5,13.6 14.8,12.6 16.0,11.5


50: C14.5,10.3 13.5,8.7 12.5,7.2C12.1,6.6 11.7,5.9 11.3,5.2C11.7,4.6 12.1,3.6 51: 13.1,4.0C13.3,3.5 13.7,3.5 14.2,3.8Z"/> 52: </symbol> 53: 54:  55: 56: 57: <script type="text/javascript"> 58: <![CDATA[ 59: 60: var svgdoc,spielfeld,infoobj,sp1obj,sp2obj,use_elements; 61: var spieler1,spieler2,sp1=0,sp2=0,t=0,count=0,beg=1; 62: var ns="http://www.w3.org/1999/xlink",attr="xlink:href"; 63: var ttt=[[0,0,0],[0,0,0],[0,0,0]]; 64: 65: 66: function getSVGDoc(load_evt) 67: { 68: svgdoc=load_evt.target.ownerDocument; 69: spielfeld=svgdoc.getElementById("spielfeld"); 70: infoobj=svgdoc.getElementById("info"); 71: sp1obj=svgdoc.getElementById("sp1"); 72: sp2obj=svgdoc.getElementById("sp2"); 73: use_elements=spielfeld.getElementsByTagName("use"); 74: NeuesSpiel(); 75: } 76: 77: 78: function Zug(click_evt) 79: { 80: var obj,feldid,i,j; 81: 82: obj=click_evt.currentTarget; 83: feldid=obj.getAttribute("id"); 84: i=feldid.charAt(1)-1; 85: j=feldid.charAt(2)-1; 86: count++; 87: 88: if(spieler1 && obj.getAttribute(attr)=="#zu" && t==0) 89: { 90: ttt[i][j]+=1; 91: obj.setAttributeNS(ns,attr,"#s1"); 92: if(Check()==1) 93: { 94: infoobj.firstChild.nodeValue="Spieler 1 hat gewonnen!"; 95: sp1++; 96: sp1obj.firstChild.nodeValue=sp1; 97: LauscherAus(); 98: } 99: else 100: { 101: spieler1=false; 102: spieler2=true; 103: infoobj.style.setProperty("fill","#00C"); 104: infoobj.firstChild.nodeValue="Spieler 2 ist am Zug ..."; 105: } 106: } 107: else if(spieler2 && obj.getAttribute(attr)=="#zu" && t==0) 108: { 109: ttt[i][j]+=10; 110: obj.setAttributeNS(ns,attr,"#s2"); 111: if(Check()==2) 112: { 113: infoobj.firstChild.nodeValue="Spieler 2 hat gewonnen!"; 114: sp2++; 115: sp2obj.firstChild.nodeValue=sp2; 116: LauscherAus(); 117: } 118: else 119: { 120: spieler1=true; 121: spieler2=false; 122: infoobj.style.setProperty("fill","#F00"); 123: infoobj.firstChild.nodeValue="Spieler 1 ist am Zug ..."; 124: } 125: } 126: 127: if(t==0 && count==9) 128: { 129: infoobj.style.setProperty("fill","#000");


130: infoobj.firstChild.nodeValue="Unentschieden!"; 131: LauscherAus(); 132: } 133: } 134: 135: 136: function Check() 137: { 138: var rsd=new Array(8),i; 139: 140: // Reihen 141: rsd[0]=ttt[0][0]+ttt[0][1]+ttt[0][2]; 142: rsd[1]=ttt[1][0]+ttt[1][1]+ttt[1][2]; 143: rsd[2]=ttt[2][0]+ttt[2][1]+ttt[2][2]; 144: 145: // Spalten 146: rsd[3]=ttt[0][0]+ttt[1][0]+ttt[2][0]; 147: rsd[4]=ttt[0][1]+ttt[1][1]+ttt[2][1]; 148: rsd[5]=ttt[0][2]+ttt[1][2]+ttt[2][2]; 149: 150: // Diagonalen 151: rsd[6]=ttt[0][0]+ttt[1][1]+ttt[2][2]; 152: rsd[7]=ttt[0][2]+ttt[1][1]+ttt[2][0]; 153: 154: for(i=0;i<8;i++) 155: { 156: // Test Spieler 1 157: if(rsd[i]==3) 158: { 159: t=1; 160: break; 161: } 162: // Test Spieler 2 163: else if(rsd[i]==30) 164: { 165: t=2; 166: break; 167: } 168: } 169: return t; 170: } 171: 172: 173: function NeuesSpiel() 174: { 175: AllesVerstecken(); 176: infoobj.firstChild.nodeValue="Spieler "+beg+" ist am Zug ..."; 177: 178: if(beg==1) 179: { 180: beg=2; 181: spieler1=true; 182: spieler2=false; 183: infoobj.style.setProperty("fill","#F00"); 184: } 185: else if(beg==2) 186: { 187: beg=1; 188: spieler1=false; 189: spieler2=true; 190: infoobj.style.setProperty("fill","#00C"); 191: } 192: 193: t=0; 194: count=0; 195: ttt=[[0,0,0],[0,0,0],[0,0,0]]; 196: LauscherAn(); 197: } 198: 199: 200: function AllesVerstecken() 201: { 202: for(i=0;i<use_elements.length;i++) 203: use_elements.item(i).setAttributeNS(ns,attr,"#zu"); 204: } 205: 206: 207: function LauscherAn() 208: { 209: for(i=0;i<use_elements.length;i++)


210: use_elements.item(i).addEventListener("click",Zug,false); 211: } 212: 213: 214: function LauscherAus() 215: { 216: for(i=0;i<use_elements.length;i++) 217: use_elements.item(i).removeEventListener("click",Zug,false); 218: } 219: 220: ]]> 221: </script> 222: 223: </defs> 224: 225: <text x="20" y="30" style="fill: #000; font-size: 24px"> 226: Spiel Tic-Tac-Toe</text> 227: 228: <text id="info" x="20" y="55" style="fill: #F00; font-size: 14px"> 229: Spieler 1 ist am Zug ...</text> 230: 231: <text id="info" x="195" y="55" style="fill: #000; font-size: 14px"> 232: <tspan id="sp1" style="fill: #F00">0</tspan> 233: <tspan style="fill: #000">:</tspan> 234: <tspan id="sp2" style="fill: #00C">0</tspan> 235: </text> 236: 237: <a xlink:href="" onclick="NeuesSpiel()"> 238: <text x="245" y="55" style="fill: #000; font-size: 14px"> 239: Neues Spiel 240: <set attributeName="fill" attributeType="CSS" to="#090" 241: begin="mouseover" end="mouseout"/> 242: </text> 243: </a> 244: 245: <g id="spielfeld"> 246:  247: <use id="f11" xlink:href="#zu" x="20" y="70"/> 248: <use id="f12" xlink:href="#zu" x="120" y="70"/> 249: <use id="f13" xlink:href="#zu" x="220" y="70"/> 250:  251: <use id="f21" xlink:href="#zu" x="20" y="170"/> 252: <use id="f22" xlink:href="#zu" x="120" y="170"/> 253: <use id="f23" xlink:href="#zu" x="220" y="170"/> 254:  255: <use id="f31" xlink:href="#zu" x="20" y="270"/> 256: <use id="f32" xlink:href="#zu" x="120" y="270"/> 257: <use id="f33" xlink:href="#zu" x="220" y="270"/> 258: </g> 259: 260: </svg>


bezier-polynome.svg

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:  8:  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: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc,g1,g2,ta,p1,p2,p3; 22: 23: 24: function Init(load_evt) 25: { 26: svgdoc=load_evt.target.ownerDocument; 27: 28: g1=svgdoc.getElementById("g1"); 29: g2=svgdoc.getElementById("g2"); 30: p1=svgdoc.getElementById("p1"); 31: p2=svgdoc.getElementById("p2"); 32: p3=svgdoc.getElementById("p3"); 33: ta=svgdoc.getElementById("ta"); 34: 35: p1.setAttribute("points",Linear_Bezier(130,200,330,200)); 36: p2.setAttribute("points",Quadratic_Bezier(130,200,280,100,330,200)); 37: p3.setAttribute("points",Cubic_Bezier(130,200,280,100,180,300,330,200)); 38: } 39: 40: 41: function Linear_Bezier(x0,y0,x1,y1) 42: { 43: // C(t) = (1-t)*P0 + t*P1 | t = [0...1] 44: 45: var x,y,t,tm,dt=0.005,data=""; 46: 47: for(t=0;t<=1;t+=dt) 48: {


49: tm=1-t; 50: x=tm*x0 + t*x1; 51: y=tm*y0 + t*y1; 52: data+=x+","+y; 53: if(t<1)data+=" "; 54: } 55: 56: return data; 57: } 58: 59: 60: function Quadratic_Bezier(x0,y0,x1,y1,x2,y2) 61: { 62: // C(t) = (1-t)^2*P0 + 2t(1-t)*P1 + t^2*P2 | t = [0...1] 63: 64: var x,y,t,tm,t0,t1,t2,dt=0.005,data=""; 65: 66: for(t=0;t<=1;t+=dt) 67: { 68: tm=1-t; 69: t0=Math.pow(tm,2); 70: t1=2*t*tm; 71: t2=Math.pow(t,2); 72: x=t0*x0 + t1*x1 + t2*x2; 73: y=t0*y0 + t1*y1 + t2*y2; 74: data+=x+","+y; 75: if(t<1)data+=" "; 76: } 77: 78: return data; 79: } 80: 81: 82: function Cubic_Bezier(x0,y0,x1,y1,x2,y2,x3,y3) 83: { 84: // C(t) = (1-t)^3*P0 + 3t(1-t)^2*P1 + 3(1-t)t^2*P2 + t^3*P3 | t = [0...1] 85: 86: var x,y,t,tm,t0,t1,t2,t3,dt=0.005,data=""; 87: 88: for(t=0;t<=1;t+=dt) 89: { 90: tm=1-t; 91: t0=Math.pow(tm,3); 92: t1=3*t*Math.pow(tm,2); 93: t2=3*tm*Math.pow(t,2); 94: t3=Math.pow(t,3); 95: x=t0*x0 + t1*x1 + t2*x2 + t3*x3; 96: y=t0*y0 + t1*y1 + t2*y2 + t3*y3; 97: data+=x+","+y; 98: if(t<1)data+=" "; 99: } 100: 101: return data; 102: } 103: 104: ]]> 105: </script> 106: </defs> 107: 108: <text x="20" y="30" style="fill: #000; font-size: 24px"> 109: Bézier-Kurven darstellen / berechnen</text> 110: 111:  112: <g id="g1" visibility="hidden" style="fill: none; stroke: #00C"> 113:  114: <path d="M130,200 L330,200"/> 115:  116: <path d="M130,200 Q280,100 330,200"/> 117:  118: <path d="M130,200 C280,100 180,300 330,200"/> 119: </g> 120: 121:  122: <g id="g2" visibility="hidden" style="fill: none; stroke: #F00"> 123: <polyline id="p1" points=""/> 124: <polyline id="p2" points=""/> 125: <polyline id="p3" points=""/> 126: </g> 127: 128: 


129: <g id="ta" visibility="hidden" 130: style="stroke: gray; stroke-width: 1px; stroke-dasharray: 2,4"> 131: <line x1="130" y1="200" x2="280" y2="100"/> 132: <line x1="330" y1="200" x2="180" y2="300"/> 133: </g> 134: 135:  136: <circle cx="130" cy="200" r="2.5" style="fill: #F00"/> 137: <text x="125" y="215">P0 (Startpunkt)</text> 138: <circle cx="330" cy="200" r="2.5" style="fill: #FB0"/> 139: <text x="325" y="215">P3 (Zielpunkt)</text> 140: 141:  142: <circle cx="280" cy="100" r="2.5" style="fill: #090"/> 143: <text x="275" y="115">P1 (Anfasser 1)</text> 144: <circle cx="180" cy="300" r="2.5" style="fill: #00C"/> 145: <text x="175" y="315">P2 (Anfasser 2)</text> 146: 147: <a xlink:href="http://de.wikipedia.org/wiki/B%C3%A9zierkurve" target="_blank"> 148: <text x="20" y="50">Grundlagen bei Wikipedia 149: <set attributeName="fill" to="#090" begin="mouseover" end="mouseout"/> 150: </text> 151: </a> 152: 153: <a xlink:href="" onclick="g1.setAttribute('visibility','visible'); 154: g2.setAttribute('visibility','hidden');ta.setAttribute('visibility','visible')"> 155: <text x="70" y="380">SVG-Pfadsyntax 156: <set attributeName="fill" to="#00C" begin="mouseover" end="mouseout"/> 157: </text> 158: </a> 159: 160: <a xlink:href="" onclick="g2.setAttribute('visibility','visible'); 161: g1.setAttribute('visibility','hidden');ta.setAttribute('visibility','visible')"> 162: <text x="200" y="380">Bézier-Polynome 163: <set attributeName="fill" to="#F00" begin="mouseover" end="mouseout"/> 164: </text> 165: </a> 166: 167: <a xlink:href="" onclick="g2.setAttribute('visibility','hidden'); 168: g1.setAttribute('visibility','hidden');ta.setAttribute('visibility','hidden')"> 169: <text x="330" y="380">Kurven ausblenden 170: <set attributeName="fill" to="#FB0" begin="mouseover" end="mouseout"/> 171: </text> 172: </a> 173: 174: </svg>


kreissegmente.svg

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:  8:  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: <script type="text/javascript"> 19: <![CDATA[ 20: 21: var svgdoc,svgroot; 22: 23: 24: function Init(load_evt) 25: { 26: svgdoc=load_evt.target.ownerDocument; 27: svgroot=svgdoc.rootElement; 28: 29: Kreisdiagramm(380,170,100,[10,60,30],["red","yellow","blue"]); 30: 31: /* Ergebnis: 32: <path d="..." fill="..."/> mit 33: d="M380,170 L380.00,70.00 A100,100 0 0,1 438.78,89.10 Z" fill="red" 34: d="M380,170 L438.78,89.10 A100,100 0 1,1 284.89,200.90 Z" fill="yellow" 35: d="M380,170 L284.89,200.90 A100,100 0 0,1 380.00,70.00 Z" fill="blue" 36: */ 37: } 38: 39: 40: function Kreisdiagramm(cx,cy,r,daten,farben) 41: { 42: var datanz,arcflags,winkel,aktwinkel,punkte,d,fill,pfad,i,j; 43: 44: datanz=daten.length;


45: 46: winkel=new Array(datanz+1); 47: winkel[0]=0; 48: for(i=1;i<datanz+1;i++)winkel[i]=daten[i-1]/100*360; 49: 50: punkte=new Array(datanz+1); 51: for(i=0;i<datanz+1;i++) 52: { 53: aktwinkel=0; 54: for(j=0;j<=i;j++)aktwinkel+=winkel[j]; 55: punkte[i]=new Object(); 56: aktwinkel=aktwinkel*2*Math.PI/360; 57: punkte[i].x=(Math.sin(aktwinkel)*r+cx).toFixed(2); 58: punkte[i].y=(cy-Math.cos(aktwinkel)*r).toFixed(2); 59: } 60: 61: for(i=0;i<datanz;i++) 62: { 63: arcflags=(winkel[i+1]<=180) ? "0,1" : "1,1"; 64: d="M"+cx+","+cy+" L"+punkte[i].x+","+punkte[i].y+" A"+r+","+r+ 65: " 0 "+arcflags+" "+punkte[i+1].x+","+punkte[i+1].y+" Z"; 66: fill=farben[i]; 67: 68: pfad=svgdoc.createElement("path"); 69: pfad.setAttribute("d",d); 70: pfad.setAttribute("fill",fill); 71: svgroot.appendChild(pfad); 72: } 73: } 74: 75: ]]> 76: </script> 77: 78: </defs> 79: 80: <text x="20" y="30" style="fill: #000; font-size: 24px"> 81: Kreisegmente zeichnen / berechnen</text> 82: 83: <circle cx="130" cy="170" r="100" style="fill: none; stroke: #000"/> 84: <line x1="130" y1="170" x2="130" y2="70" style="stroke: #999"/> 85: <line x1="130" y1="170" x2="188.78" y2="89.10" style="stroke: #00C"/> 86: <line x1="130" y1="89.10" x2="188.78" y2="89.10" style="stroke: #00C"/> 87: <line x1="130" y1="170" x2="130" y2="89.10" style="stroke: #00C"/> 88: 89: <path d="M130,170 L130,70 A100,100 0 0,1 188.78,89.10 Z" 90: style="fill: #F00; opacity: 0.05"/> 91: <path d="M130,70 A100,100 0 0,1 188.78 89.10" 92: style="fill: none; stroke: #F00; stroke-width: 2px"/> 93: <path d="M130,150 A10,10 0 0,1 143,153" 94: style="fill: none; stroke: #00C; stroke-width: 2px"/> 95: 96: <circle cx="130" cy="170" r="2" style="fill: #00C"/> 97: <circle cx="130" cy="70" r="2" style="fill: #00C"/> 98: <circle cx="188.78" cy="89.10" r="2" style="fill: #F00"/> 99: <circle cx="130" cy="89.10" r="2" style="fill: #090"/> 100: 101: <g style="font-family: monospace; font-weight: bold; font-size: 12px"> 102: <text x="112" y="181" style="fill: #00C">cx,cy</text> 103: <text x="112" y="61" style="fill: #00C">x1,y1</text> 104: <text x="195" y="90" style="fill: #F00">x2,y2</text> 105: <text x="160" y="138" style="fill: #00C">r</text> 106: <text x="148" y="85" style="fill: #00C">Δx</text> 107: <text x="112" y="130" style="fill: #00C">Δy</text> 108: <text x="131" y="159" style="fill: #00C">α</text> 109: </g> 110: 111: <g style="font-family: monospace; font-weight: bold; font-size: 16px"> 112: <text x="30" y="310" style="fill: #F00"> 113: x2 = cx + Δx = cx + r·sin α</text> 114: <text x="30" y="325" style="fill: #F00"> 115: y2 = cy - Δy = cy - r·cos α</text> 116: <text x="30" y="360" style="fill: #000"> 117: Kreissegment <= 180°</text> 118: <text x="30" y="375" style="fill: #00C"> 119: <path d="Mcx,cy Lx1,y1 Ar,r 0 0,1 x2,y2 Z" ... /></text> 120: <text x="30" y="400" style="fill: #000"> 121: Kreissegment > 180°</text> 122: <text x="30" y="415" style="fill: #00C"> 123: <path d="Mcx,cy Lx1,y1 Ar,r 0 1,1 x2,y2 Z" ... /></text> 124: </g>


125: 126: <a xlink:href="../?doc=piechart&znr=on" target="_top"> 127: <text x="30" y="450" style="font-size: 12px; fill: #000"> 128: [siehe Beispiel Kreis-Diagramm] 129: <set attributeName="fill" attributeType="CSS" to="#F00" 130: begin="mouseover" end="mouseout"/> 131: <set attributeName="text-decoration" attributeType="CSS" 132: to="underline" begin="mouseover" end="mouseout"/> 133: </text> 134: </a> 135: 136: </svg>

filter_DistantLight.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <defs> 13: 14: <filter id="distant" filterUnits="userSpaceOnUse" x="20" y="70" width="375" height="220"> 15: <feColorMatrix result="out1" in="SourceGraphic" type="luminanceToAlpha"/> 16: <feDiffuseLighting result="out2" in="out1" lighting-color="#FFF" 17: diffuseConstant="1.4" kernelUnitLength="1,1" surfaceScale="3"> 18: <feDistantLight azimuth="40" elevation="30"/> 19: </feDiffuseLighting> 20: <feComposite in2="out2" in="SourceGraphic" operator="arithmetic" 21: k1="1" k2="0.3" k3="0.4" k4="0"/> 22: </filter> 23: 24: </defs> 25: 26: <title>SVG - Learning By Coding</title> 27: <desc>SVG-Spezifikation in Beispielen</desc> 28: <text x="20" y="30" style="fill: #000; font-size: 24px"> 29: Filter-Element feDistantLight</text> 30: 31: <image xlink:href="bilder/bild1.jpg" x="20" y="70" width="375" height="220" 32: style="filter: url(#distant)"/> 33: 34: </svg>


css_selectors.svg

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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 11: 12: <title>SVG - Learning By Coding</title> 13: <desc>SVG-Spezifikation in Beispielen</desc> 14: 15: <defs> 16: 17: <style type="text/css"> 18: <![CDATA[ 19: 20: /* 21: Universal-Selektor: Alle Elemente des Dokuments werden zunaechst 22: unsichtbar (und spaeter wieder sichtbar) gemacht. 23: */ 24: * 25: { 26: visibility: hidden; 27: } 28: 29: /* 30: Elementtyp-Selektor: Rechtecke erhalten gelbe Fuellfarbe. 31: */ 32: rect 33: { 34: fill: #FF0; 35: } 36: 37: /* 38: Elementtyp-Selektor: Kreise erhalten rote Fuellfarbe. 39: */ 40: circle 41: { 42: fill: #F00; 43: } 44: 45: /* 46: Selektoren-Gruppierung: Deckkraft wird fuer Rechtecke 47: und Kreise auf 80% gesetzt (d. h. 20% Transparenz). 48: */ 49: rect,circle 50: { 51: opacity: 0.8; 52: } 53: 54: /* 55: Nachfahren-Selektor mit Selektoren-Gruppierung kombiniert:


56: Alle darzustellenden Elemente werden wieder sichtbar gemacht 57: (Aufhebung der visibility-Vorgabe des Universal-Selektors). 58: */ 59: svg rect,circle,text,line,image 60: { 61: visibility: visible; 62: } 63: 64: /* 65: Attribut-Selektor: Kreise mit Attribut cx="240" erhalten 66: gruene Fuellfarbe. 67: */ 68: circle[cx="240"] 69: { 70: fill: #090; 71: } 72: 73: /* 74: Attribut-Selektor: Kreise mit Attribut cx="90" und Attribut cy="130" 75: erhalten hellblaue Fuellfarbe. 76: */ 77: circle[cx="90"][cy="130"] 78: { 79: fill: #9CF; 80: } 81: 82: /* 83: Nachbar-Selektor: Rechtecke die nach Kreisen unterhalb desselben 84: Elternelements folgen, erhalten blaue Fuellfarbe. 85: */ 86: circle + rect 87: { 88: fill: #00C; 89: } 90: 91: /* 92: Kind-Selektor: Rechtecke, die unmittelbare Kindelemente der Gruppe 93: mit ID="gruppe1" sind, erhalten graue Fuellfarbe. 94: */ 95: g#gruppe1 > rect 96: { 97: fill: #CCC; 98: } 99: 100: /* 101: Nachfahren-Selektor: Rechtecke, die unterhalb vom g-Element mit 102: der ID="gruppe2" liegen, erhalten eine hellgruene Fuellfarbe. 103: */ 104: g#gruppe2 rect 105: { 106: fill: #CFC; 107: } 108: 109: /* 110: ID-Selektor: Inhalte der Gruppe mit ID="gruppe2" erhalten roten Rand. 111: */ 112: g#gruppe2 113: { 114: stroke: #F00; 115: } 116: 117: /* 118: ID-Selektor mit Pseudo-Klasse: Das erste direkt folgende Rechteck-Kindelement 119: unterhalb der Gruppe mit der ID="gruppe1" erhaelt blauen gestrichelten Rand. 120: */ 121: g#gruppe1 > rect:first-child 122: { 123: stroke: #00C; 124: stroke-dasharray: 3,5; 125: } 126: 127: /* 128: Klassen-Selektor: Kreise mit der Klasse "extrakreis" erhalten 129: keine Fuellfarbe und einen schwarzen Rand. 130: */ 131: circle.extrakreis 132: { 133: fill: none; 134: stroke: #000; 135: }


136: 137: ]]> 138: </style> 139: 140: </defs> 141: 142: <text x="20" y="30" style="fill: #000; font-size: 24px"> 143: Ausgewählte CSS-Selektoren im Einsatz</text> 144: <text x="20" y="45">Details als Kommentare im Code</text> 145: 146: <circle cx="40" cy="80" r="20"/> 147: <circle cx="90" cy="80" r="20"/> 148: <circle class="extrakreis" cx="140" cy="80" r="20"/> 149: <circle cx="190" cy="80" r="20"/> 150: <circle cx="240" cy="80" r="20"/> 151: 152: <circle cx="40" cy="130" r="20"/> 153: <circle cx="90" cy="130" r="20"/> 154: <circle cx="140" cy="130" r="20"/> 155: <circle class="extrakreis" cx="190" cy="130" r="20"/> 156: <circle cx="240" cy="130" r="20"/> 157: 158: <circle cx="40" cy="180" r="20"/> 159: <rect x="70" y="160" width="40" height="40"/> 160: <rect x="120" y="160" width="40" height="40"/> 161: <rect x="170" y="160" width="40" height="40"/> 162: <circle cx="240" cy="180" r="20"/> 163: 164: <g id="gruppe1"> 165: <rect x="20" y="210" width="40" height="40"/> 166: <rect x="70" y="210" width="40" height="40"/> 167: <g id="gruppe2"> 168: <rect x="120" y="210" width="40" height="40"/> 169: <rect x="170" y="210" width="40" height="40"/> 170: </g> 171: <rect x="220" y="210" width="40" height="40"/> 172: </g> 173: 174: <line x1="285" y1="60" x2="285" y2="280" style="stroke: #CCC; stroke-width: 2px"/> 175: <image xlink:href="bilder/css_selectors.png" x="310" y="60" width="244" height="194"/> 176: <text x="20" y="275" style="fill: #00C; font-size: 12px">aktuelles Ergebnis</text> 177: <text x="310" y="275" style="fill: #00C; font-size: 12px">erwartetes Ergebnis</text> 178: 179: </svg>

matrix_reverse.svg


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:  8:  9: 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 11: onload="Init(evt);MatrixReverse(2.101802,0.954189,-1.331028,0.347296,20,30)"> 12: 13:  34: 35: <title>SVG - Learning By Coding</title> 36: <desc>SVG-Spezifikation in Beispielen</desc> 37: 38: <defs> 39: 40: <script type="text/javascript"> 41: <![CDATA[ 42: 43: var svgdoc; 44: 45: 46: function Init(load_evt) 47: { 48: svgdoc=load_evt.target.ownerDocument; 49: } 50: 51: 52: function SetRadio(click_evt) 53: { 54: svgdoc.getElementById("radi").setAttribute("cx", click_evt.target.getAttribute("cx")); 55: svgdoc.getElementById("radi").setAttribute("cy", click_evt.target.getAttribute("cy")); 56: } 57: 58: 59: function MatrixReverse(a,b,c,d,e,f) 60: { 61: /* 62: Zu den mathematischen Details der Umsetzung siehe: 63: http://svglbc.datenverdrahten.de/info/matrix_reverse1.htm 64: http://svglbc.datenverdrahten.de/info/matrix_reverse2.htm 65: */ 66: 67: var tx, // translate_x 68: ty, // translate_y 69: ro, // rotate_winkel 70: scx, // scale_x 71: scy, // scale_y 72: skx, // skew_x_winkel 73: sky, // skew_y_winkel 74: tanskx, // Tangens von skx 75: tansky=0, // Tangens von sky (waehlbar, Definitionsbereich beachten!)


76: cosro, // Cosinus von ro 77: sinro, // Sinus von ro 78: konst1, // Konstante 79: konst2, // Konstante 80: stellen=6, // Anzahl Nachkommastellen 81: eingabe, // transform-Attributwert vorher (Matrix) 82: ausgabe; // transform-Attributwert nachher (Komponenten) 83: 84: konst1=a*a*tansky*tansky+a*a-2*a*b*tansky+b*b; 85: konst2=Math.sqrt(1/konst1); 86: if(a<0 || b<0)konst2=-konst2; 87: 88: tanskx=(a*c+b*d-a*d*tansky-b*c*tansky+a*c*tansky*tansky)/konst1; 89: 90: skx=(Math.atan(tanskx)*180/Math.PI).toFixed(stellen); 91: sky=0; 92: // sofern tansky != 0 sky-Berechnung anpassen 93: // sky=(Math.atan(tansky)*180/Math.PI).toFixed(stellen); 94: 95: scx=(konst1*konst2).toFixed(stellen); 96: scy=((a*d-b*c)*konst2).toFixed(stellen); 97: 98: tx=e; 99: ty=f-e*tansky; 100: 101: cosro=a*konst2; 102: ro=(Math.acos(cosro)*180/Math.PI).toFixed(stellen); 103: // alternativ Winkel ro aus sinro ermitteln 104: // sinro=(b-a*tansky)*konst2; 105: // ro=(Math.asin(sinro)*180/Math.PI).toFixed(stellen); 106: 107: // Wert des transform-Attributes zusammensetzen und ausgeben 108: // (Reihenfolge der Abarbeitung von rechts nach links) 109: eingabe="matrix("+a+","+b+","+c+","+d+","+e+","+f+")"; 110: ausgabe="skewY("+sky+") translate("+tx+","+ty+") rotate("+ro+ 111: ") scale("+scx+","+scy+") skewX("+skx+")"; 112: 113: svgdoc.getElementById("input").firstChild.nodeValue= 114: "transform=\""+eingabe+"\""; 115: svgdoc.getElementById("output").firstChild.nodeValue= 116: "transform=\""+ausgabe+"\""; 117: 118: // Transformationen mit Rechtecken testen 119: svgdoc.getElementById("mat").setAttribute("transform",eingabe); 120: svgdoc.getElementById("rev").setAttribute("transform",ausgabe); 121: } 122: 123: ]]> 124: </script> 125: 126: </defs> 127: 128: <text x="20" y="30" style="fill: #000; font-size: 24px"> 129: Matrix-Transformationen in Komponenten zerlegen</text> 130: 131: <text id="input" x="20" y="60" font-size="14" fill="#00C"> </text> 132: <text id="output" x="20" y="80" font-size="14" fill="#F00"> </text> 133: <text x="20" y="120" font-size="12px" fill="#000">Hinweis: Die ausgehend vom 134: grünen Rechteck transformierten Rechtecke (rot + blau) sollten dieselbe Lage 135: einnehmen.</text> 136: 137:  138: <rect id="rev" x="200" y="150" width="100" height="50" fill="none" stroke="#F00"/> 139:  140: <rect id="mat" x="200" y="150" width="100" height="50" fill="none" stroke="#00C" 141: stroke-dasharray="10,10"/> 142:  143: <rect x="200" y="150" width="100" height="50" fill="none" stroke="#090"/> 144: 145:  146: <text x="45" y="155">Beispiel 1</text> 147: <text x="45" y="175">Beispiel 2</text> 148: <text x="45" y="195">Beispiel 3</text> 149: <text x="45" y="215">Beispiel 4</text> 150: <text x="45" y="235">Beispiel 5</text> 151: <text x="45" y="255">Beispiel 6</text> 152: 153: <circle id="radi" cx="30" cy="150" r="2" fill="#000"/> 154:


155: <circle cx="30" cy="150" r="5" fill="none" stroke="#000" pointer-events="all" onclick= 156: "SetRadio(evt);MatrixReverse(2.101802,0.954189,-1.331028,0.347296,20,30)"/> 157: 158: <circle cx="30" cy="170" r="5" fill="none" stroke="#000" pointer-events="all" onclick= 159: "SetRadio(evt);MatrixReverse(0.922671,0.385587,-0.317494,0.94826,0,0)"/> 160: 161: <circle cx="30" cy="190" r="5" fill="none" stroke="#000" pointer-events="all" onclick= 162: "SetRadio(evt);MatrixReverse(1.019499,0.207055,1.070792,1.159111,40.769400, -23.107890)"/> 163: 164: <circle cx="30" cy="210" r="5" fill="none" stroke="#000" pointer-events="all" onclick= 165: "SetRadio(evt);MatrixReverse(0.606,0.350,-0.350,0.606,80,40)"/> 166: 167: <circle cx="30" cy="230" r="5" fill="none" stroke="#000" pointer-events="all" onclick= 168: "SetRadio(evt);MatrixReverse(-0.814408,-0.580292,0.969382,-0.245558,450,375)"/> 169: 170: <circle cx="30" cy="250" r="5" fill="none" stroke="#000" pointer-events="all" onclick= 171: "SetRadio(evt);MatrixReverse(0.971193,-0.238295,0.196019,0.9806,100,130)"/> 172: 173: </svg>

wallclock_sync.svg

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:  8:  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: <script type="text/javascript"> 19: <![CDATA[


20: 21: function Init(load_evt) 22: { 23: var svgdoc,lz,sz,kr,an,nd,udutc,ndutc_plus10s,wc; 24: 25: // SVG-Objekte zuweisen 26: svgdoc=load_evt.target.ownerDocument; 27: lz=svgdoc.getElementById("ladezeit"); 28: sz=svgdoc.getElementById("startzeit"); 29: kr1=svgdoc.getElementById("kreis1"); 30: kr2=svgdoc.getElementById("kreis2"); 31: 32: // Informationen zu Datum/Zeit abfragen 33: nd=new Date(); 34: ndutc=getUTCDateTime(nd); 35: ndutc_plus10s=getUTCDateTime(new Date(nd.getTime()+10000)); 36: wc="wallclock("+ndutc_plus10s+")"; 37: 38: // Textausgaben 39: lz.firstChild.nodeValue+=ndutc; 40: sz.firstChild.nodeValue+="Ladezeit + 10s = "+wc; 41: 42: // Animation fuer Kreis 1 mit begin="10s" erzeugen 43: an=svgdoc.createElement("animate"); 44: an.setAttribute("attributeName","cx"); 45: an.setAttribute("attributeType","XML"); 46: an.setAttribute("begin","10s"); 47: an.setAttribute("dur","10s"); 48: an.setAttribute("from","50"); 49: an.setAttribute("to","430"); 50: an.setAttribute("fill","freeze"); 51: kr1.appendChild(an); 52: 53: // Animation fuer Kreis 2 in mit begin="wallclock(...)" erzeugen 54: an=svgdoc.createElement("animate"); 55: an.setAttribute("attributeName","cx"); 56: an.setAttribute("attributeType","XML"); 57: an.setAttribute("begin",wc); 58: an.setAttribute("dur","10"); 59: an.setAttribute("from","50"); 60: an.setAttribute("to","430"); 61: an.setAttribute("fill","freeze"); 62: kr2.appendChild(an); 63: } 64: 65: 66: function getUTCDateTime(dt) 67: { 68: var dd,mm,yyyy,hh,mi,ss; 69: 70: dd=dt.getUTCDate(); 71: dd=(dd<10)?"0"+dd:dd; 72: mm=dt.getUTCMonth()+1; 73: mm=(mm<10)?"0"+mm:mm; 74: yyyy=dt.getUTCFullYear(); 75: hh=dt.getUTCHours(); 76: hh=(hh<10)?"0"+hh:hh; 77: mi=dt.getUTCMinutes(); 78: mi=(mi<10)?"0"+mi:mi; 79: ss=dt.getUTCSeconds(); 80: ss=(ss<10)?"0"+ss:ss; 81: 82: // UTC-Format YYYY-MM-DDThh:mm:ssZ erzeugen 83: return yyyy+"-"+mm+"-"+dd+"T"+hh+":"+mi+":"+ss+"Z"; 84: } 85: 86: 87: function AnimInfo(click_evt) 88: { 89: if(printNode)alert("Erzeugtes animate-Element:\n\n"+ 90: printNode(click_evt.target.firstChild)); 91: else alert("printNode()-Methode nicht verfuegbar."); 92: } 93: 94: ]]> 95: </script> 96: 97: </defs> 98: 99: <text x="20" y="30" style="font-size: 24px">


100: Wallclock-Synchronisation mit UTC-Zeitwerten nach ISO 8601</text> 101: 102: <text x="30" y="55" style="font-size: 12px; fill: #000"> 103: Beide Kreise sollten sich nach 10s in Bewegung setzen: der grüne mit 104: begin="10s", der rote mit begin="wallclock(...)".</text> 105: <text id="ladezeit" x="30" y="80" 106: style="font-size: 14px; fill: #00C">Ladezeit (UTC): </text> 107: <text id="startzeit" x="30" y="100" 108: style="font-size: 14px; fill: #F00">Startzeit (UTC): </text> 109: <text x="30" y="260" style="font-size: 12px; fill: #000"> 110: Zur Abfrage von Details zu den erzeugten animate-Elementen 111: Kreise anklicken!</text> 112: 113: <circle id="kreis1" cx="50" cy="150" r="20" fill="#090" onclick="AnimInfo(evt)"/> 114: <circle id="kreis2" cx="50" cy="210" r="20" fill="#F00" onclick="AnimInfo(evt)"/> 115: 116: </svg>

Documents

SVG - Learning By Coding