SVG – Learning by Coding

[ createEvent.svg --> Grafik anzeigen ]

  1: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
  2: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  3:   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
  4:   <!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink">
  5: ]>
  6: 
  7: <!-- SVG Learning By Coding http://www.datenverdrahten.de/svglbc/ -->
  8: <!--    AuthorDrThomas Meinike 01/05 thomas@handmadecode.de     -->
  9: 
 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 11:   onload="Init(evt)">
 12: 
 13:   <title>SVG Learning By Coding</title>
 14:   <desc>SVG-Spezifikation in Beispielen</desc>
 15: 
 16:   <defs>
 17: 
 18:     <style type="text/css">
 19:       <![CDATA[
 20: 
 21:       *
 22:       {
 23:         font-familysans-serif;
 24:         font-size12px;
 25:       }
 26: 
 27:       ]]>
 28:     </style>
 29: 
 30: 
 31:     <script type="text/javascript">
 32:       <![CDATA[
 33: 
 34:       var svgdoc,svgobj,check=false;
 35: 
 36: 
 37:       function Init(load_evt)
 38:       {
 39:         svgdoc=load_evt.target.ownerDocument;
 40:         svgobj=svgdoc.getElementById("zielkreis");
 41:       }
 42: 
 43: 
 44:       function NewEvent(click_evt)
 45:       {
 46:         var newevt;
 47: 
 48:         // DOM-Theorie
 49:         /*
 50:           newevt=svgdoc.createEvent("MouseEvents");
 51:           newevt.initMouseEvent(
 52:             "click",true,true,svgdoc,1,0,0,0,0,false,false,false,false,0,null);
 53: 
 54:           // initMouseEvent-Argumente:
 55:           // typeArg,canBubbleArg,cancelableArg,viewArg,detailArg,screenXArg,
 56:           // screenYArg,clientXArg,clientYArg,ctrlKeyArg,altKeyArg,shiftKeyArg,
 57:           // metaKeyArg,buttonArg,relatedTargetArg
 58:        
 59:           check=svgobj.dispatchEvent(newevt);
 60:           if(check)alert("click-Event wurde erzeugt und ausgelöst.");
 61:         */
 62: 
 63:         // ASV6-Praxis
 64:         var ver=getSVGViewerVersion();
 65:         if(ver.indexOf("Adobe")!=-&& ver.indexOf("6.0")!=-1)
 66:         {
 67:           newevt=svgdoc.createEvent("click");
 68:           alert(newevt+" : "+newevt.type); // [object CustomEvent] : click
 69:           check=svgobj.dispatchEvent(newevt);
 70:           if(check)alert("click-Event wurde erzeugt und ausgelöst.");
 71:         }
 72:         else alert("createEvent() funktioniert nur mit dem ASV 6.0!");
 73:       }
 74: 
 75: 
 76:       function TestFunc()
 77:       {
 78:         svgobj.setAttribute("fill","#FF0");
 79:       }
 80: 
 81:       ]]>
 82:     </script>
 83: 
 84:   </defs>
 85: 
 86:   <text x="20" y="30" style="fill: #000; font-size: 24px">
 87:     Ereignisse mit createEvent() erzeugen [ASV 6.0]</text>
 88: 
 89:   <circle cx="120" cy="90" r="20" fill="#F00" onclick="NewEvent(evt)"/>
 90:   <circle id="zielkreis" cx="220" cy="90" r="20" fill="#090" onclick="TestFunc()"/>
 91: 
 92:   <text x="20" y="140">
 93:     <tspan x="20" dy="1.2em">
 94:       Anklicken des roten Kreises erzeugt neues click-Ereignis,</tspan>
 95:     <tspan x="20" dy="1.2em">
 96:       welches die für den grünen Kreis definierte Funktion</tspan>
 97:     <tspan x="20" dy="1.2em">
 98:       mittels dispatchEvent() aufruft [Füllfarbe wird gelb].</tspan>
 99:   </text>
100: 
101: </svg>

[zum Anfang]