SVG – Learning by Coding

[ groupbyidfragment.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 06/04 thomas@handmadecode.de     -->
  9: 
 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 11:   onload="Init(evt)">
 12: 
 13:   <title>SVG Learning By Coding</title>
 14:   <desc>SVG-Spezifikation in Beispielen</desc>
 15: 
 16:   <defs>
 17: 
 18:     <style type="text/css">
 19:       <![CDATA[
 20: 
 21:       *
 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,svgroot,objekte,anzahl;
 35: 
 36: 
 37:         function Init(load_evt)
 38:         {
 39:           svgdoc=load_evt.target.ownerDocument;
 40:           svgroot=svgdoc.rootElement;
 41:           svgroot.addEventListener("mouseover",Over,false);
 42:           svgroot.addEventListener("mouseout",Out,false);
 43:           objekte=svgdoc.getElementsByTagName("*");
 44:           anzahl=objekte.length;
 45:         }
 46: 
 47: 
 48:         function Over(mouseover_evt)
 49:         {
 50:           var tgt,curid,testid,obj,i;
 51: 
 52:           tgt=mouseover_evt.target;
 53: 
 54:           if(tgt.tagName=="circle" || tgt.tagName=="rect" || tgt.tagName=="polygon")
 55:           {
 56:             curid=tgt.getAttribute("id");
 57:             curid=curid.substr(0,curid.indexOf("_")+1);
 58:             for(i=0;i<anzahl;i++)
 59:             {
 60:               obj=objekte.item(i);
 61:               testid=obj.getAttribute("id");
 62:               testid=testid.substr(0,testid.indexOf("_")+1);
 63:               if(testid==curid)obj.setAttribute("opacity","0.3");
 64:             }
 65:           }
 66:         }
 67: 
 68: 
 69:         function Out(mouseout_evt)
 70:         {
 71:           var tgt,curid,testid,obj,i;
 72: 
 73:           tgt=mouseout_evt.target;
 74: 
 75:           if(tgt.tagName=="circle" || tgt.tagName=="rect" || tgt.tagName=="polygon")
 76:           {
 77:             curid=tgt.getAttribute("id");
 78:             curid=curid.substr(0,curid.indexOf("_")+1);
 79:             for(i=0;i<anzahl;i++)
 80:             {
 81:               obj=objekte.item(i);
 82:               testid=obj.getAttribute("id");
 83:               testid=testid.substr(0,testid.indexOf("_")+1);
 84:               if(testid==curid)obj.setAttribute("opacity","1.0");
 85:             }
 86:           }
 87:         }
 88: 
 89:       ]]>
 90:     </script>
 91: 
 92:   </defs>
 93: 
 94:   <text x="20" y="30" style="fill: #000; font-size: 24px">
 95:     Elemente über ID-Fragmente gruppieren</text>
 96: 
 97:   <text x="20" y="50">Objekte reagieren auf mouseover mouseout-Events
 98:    (Änderung der Opazität).</text>
 99: 
100:   <circle id="or_1" cx="50" cy="90" r="10" fill="#F00"/>
101:   <circle id="og_1" cx="100" cy="90" r="10" fill="#090"/>
102:   <circle id="ob_1" cx="150" cy="90" r="10" fill="#00C"/>
103: 
104:   <rect id="or_2" x="40" y="130" width="20" height="20" fill="#F00"/>
105:   <rect id="og_2" x="90" y="130" width="20" height="20" fill="#090"/>
106:   <rect id="ob_2" x="140" y="130" width="20" height="20" fill="#00C"/>
107: 
108:   <polygon id="or_3" points="40,200 50,180 60,200" fill="#F00"/>
109:   <polygon id="og_3" points="90,200 100,180 110,200" fill="#090"/>
110:   <polygon id="ob_3" points="140,200 150,180 160,200" fill="#00C"/>
111: 
112:   <text x="230" y="115">ID-Belegung der Objekte:</text>
113:   <text x="230" y="135" fill="#F00">id="or_1" "or_2" "or_3"</text>
114:   <text x="230" y="155" fill="#090">id="og_1" "og_2" "og_3"</text>
115:   <text x="230" y="175" fill="#00C">id="ob_1" "ob_2" "ob_3"</text>
116: 
117: </svg>

[zum Anfang]