SVG – Learning by Coding

[ sXBL-simplebutton.svg --> Grafik anzeigen ]

  1: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
  2: <!--
  3: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.2//EN" 
  4:   "http://www.w3.org/Graphics/SVG/1.2/DTD/svg12.dtd">
  5: -->
  6: 
  7: <!-- SVG Learning By Coding http://www.datenverdrahten.de/svglbc/ -->
  8: <!--    AuthorDrThomas Meinike 09/04 thomas@handmadecode.de     -->
  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><!-- statt extensionDefs -->
 22: 
 23:       <xbl:definition name="svglbc:simplebutton"><!-- statt elementDef -->
 24: 
 25:         <xbl:template><!-- statt prototype -->
 26: 
 27:           <!-- Gruppe aus zwei Rechtecken und einem Textelement -->
 28:           <g>
 29:             <rect id="unten"/>
 30:             <rect id="oben"/>
 31:             <text id="txt"><xbl:content/></text><!-- statt refContent -->
 32:           </g>
 33: 
 34:         </xbl:template>
 35: 
 36:         <xbl:handlerGroup><!-- statt script -->
 37:           <!-- Element handler ist neu in SVG 1.2 -->
 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&amp;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:   <!-- Aufruf der selbst definierten Element-Objekte -->
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>

[zum Anfang]