SVG – Learning by Coding

[ klassen_tauschen.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 03/03 thomas@handmadecode.de     -->
  9: 
 10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 11:   onload="getSVGDoc(evt)">
 12: 
 13:   <title>SVG Learning By Coding</title>
 14:   <desc>SVG-Spezifikation in Beispielen</desc>
 15: 
 16:   <defs>
 17: 
 18:     <style type="text/css">
 19:       <![CDATA[
 20: 
 21:       *
 22:       {
 23:         font-familysans-serif;
 24:         font-size12px;
 25:       }
 26: 
 27:       .gelb
 28:       {
 29:         fill#FF0;
 30:       }
 31: 
 32:       .rot
 33:       {
 34:         fill#F00;
 35:       }
 36: 
 37:       .gruen
 38:       {
 39:         fill#090;
 40:       }
 41: 
 42:       .blau
 43:       {
 44:         fill#00C;
 45:       }
 46: 			
 47:       ]]>
 48:     </style>
 49: 
 50:     <script type="text/javascript">
 51:       <![CDATA[
 52: 
 53:       var svgdoc,svgroot;
 54: 
 55: 
 56:       function getSVGDoc(load_evt)
 57:       {
 58:         svgdoc=load_evt.target.ownerDocument;
 59:         svgroot=svgdoc.documentElement;
 60:       }
 61: 
 62: 
 63:       function KlassenTauschen(klasse_alt,klasse_neu)
 64:       {
 65:         var obj=getElementsByClassName(klasse_alt);
 66: 
 67:         for(i=0;i<obj.length;i++)
 68:         {
 69:           obj[i].setAttribute("class",klasse_neu);
 70:         }
 71:       }
 72: 
 73: 
 74:       function getElementsByClassName(class_name)
 75:       {
 76:         var inp_obj,ret_obj=new Array(),j=0,akt_class="",test_str="";
 77: 
 78:         inp_obj=svgroot.getElementsByTagName("*");
 79:         for(i=0;i<inp_obj.length;i++)
 80:         {
 81:           akt_class=inp_obj.item(i).getAttribute("class");
 82:           if(!akt_class)akt_class="";
 83:           if(akt_class.indexOf(class_name)!=-1)
 84:           {
 85:             teststr=","+akt_class.split(" ").join(",")+",";
 86:             if(teststr.indexOf(","+class_name+",")!=-1)
 87:             {
 88:               ret_obj[j]=inp_obj.item(i);
 89:               j++;
 90:             }
 91:           }
 92:         }
 93:         return ret_obj;
 94:       }
 95: 
 96:       ]]>
 97:     </script>
 98: 
 99:   </defs>
100: 
101:   <text x="20" y="30" style="fill: #000; font-size: 24px">
102:     CSS-Klassen tauschen</text>
103: 
104:   <circle class="rot" cx="80" cy="80" r="20"/>
105:   <circle class="blau" cx="140" cy="80" r="20"/>
106:   <circle class="rot" cx="200" cy="80" r="20"/>
107: 
108:   <circle class="blau" cx="80" cy="140" r="20"/>
109:   <circle class="blau" cx="140" cy="140" r="20"/>
110:   <circle class="blau" cx="200" cy="140" r="20"/>
111: 
112:   <circle class="rot" cx="80" cy="200" r="20"/>
113:   <circle class="blau" cx="140" cy="200" r="20"/>
114:   <circle class="rot" cx="200" cy="200" r="20"/>
115: 
116:   <a xlink:href="" cursor="pointer" onclick="return false">
117:     <text x="70" y="260" onclick="KlassenTauschen('rot','gruen');KlassenTauschen('blau','gelb')">
118:       rot &#8211;&#8250; grün + blau &#8211;&#8250; gelb
119:       <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
120:       <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
121:     </text>
122:   </a>
123: 
124:   <a xlink:href="" cursor="pointer" onclick="return false">
125:     <text x="70" y="280" onclick="KlassenTauschen('gruen','rot');KlassenTauschen('gelb','blau')">
126:       grün &#8211;&#8250; rot + gelb &#8211;&#8250; blau
127:       <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
128:       <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
129:     </text>
130:   </a>
131: 
132: </svg>

[zum Anfang]