SVG – Learning by Coding

[ rcc-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 05/04 thomas@handmadecode.de     -->
  9: 
 10: <svg xmlns="http://www.w3.org/2000/svg" version="1.2"
 11:      xmlns:xlink="http://www.w3.org/1999/xlink"
 12:      xmlns:ev="http://www.w3.org/2001/xml-events"
 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 namespace="http://www.datenverdrahten.de/svglbc">
 40: 
 41:     <elementDef name="simplebutton">
 42: 
 43:       <prototype>
 44: 
 45:         <!-- Gruppe aus zwei Rechtecken und einem Textelement -->
 46:         <g>
 47:           <rect id="unten"/>
 48:           <rect id="oben"/>
 49:           <text id="txt"><refContent/></text>
 50:         </g>
 51: 
 52:       </prototype>
 53: 
 54:       <script ev:event="SVGBindEnd" type="text/javascript">
 55:         <![CDATA[     
 56: 
 57:         var ver=getSVGViewerVersion();
 58: 
 59:         if(ver.indexOf("Adobe")!=-&& ver.indexOf("6.0")!=-1)
 60:         {
 61:           var svgdoc,el,st,ru,ro,tx,x,y,bb,bh,bf,th,tf,at;
 62: 
 63:           // Daten zum aktuellen simplebutton-Element abfragen
 64:           el=evt.target;
 65:           st=el.shadowTree;
 66: 
 67:           ru=st.getElementById("unten");
 68:           ro=st.getElementById("oben");
 69:           tx=st.getElementById("txt");
 70: 
 71:           x=el.getAttribute("x");   // Button-x
 72:           y=el.getAttribute("y");   // Button-y
 73:           bb=el.getAttribute("bb"); // Button-Breite
 74:           bh=el.getAttribute("bh"); // Button-Hoehe
 75:           bf=el.getAttribute("bf"); // Button-Farbe
 76:           th=el.getAttribute("th"); // Text-Hoehe
 77:           tf=el.getAttribute("tf"); // Text-Farbe
 78:           at=el.getAttribute("at"); // Alert-Text (onclick)
 79: 
 80:           // Rechteck - unten
 81:           ru.setAttribute("x",parseFloat(x)+parseFloat(bb)/35);
 82:           ru.setAttribute("y",parseFloat(y)+parseFloat(bb)/35);
 83:           ru.setAttribute("width",bb);
 84:           ru.setAttribute("height",bh);
 85:           ru.setAttribute("rx","5");
 86:           ru.setAttribute("fill","#CCC");
 87: 
 88:           // Rechteck - oben
 89:           ro.setAttribute("x",x);
 90:           ro.setAttribute("y",y);
 91:           ro.setAttribute("width",bb);
 92:           ro.setAttribute("height",bh);
 93:           ro.setAttribute("fill",bf);
 94:           ro.setAttribute("rx","5");
 95:           ro.setAttribute("onclick","alert('"+at+"')");
 96:           ro.setAttribute("onmouseover","SetOp(evt,0.5)");
 97:           ro.setAttribute("onmouseout","SetOp(evt,1.0)");
 98:  
 99:           // Buttontext
100:           tx.setAttribute("fill",tf);
101:           tx.setAttribute("font-size",th);
102:           tx.setAttribute("text-anchor","middle");
103:           tx.setAttribute("pointer-events","none");
104:           tx.setAttribute("x",parseFloat(x)+parseFloat(bb)/2);
105:           tx.setAttribute("y",parseFloat(y)+parseFloat(bh)/2+parseFloat(th)/3);
106:         }
107: 
108:         ]]>
109:       </script>
110: 
111:     </elementDef>
112: 
113:   </extensionDefs>
114: 
115:   <text x="20" y="30" style="fill: #000; font-size: 24px">
116:     RCC Rendering Custom Content (ASV 6.0)</text>
117:   <text x="20" y="50">[sonst erscheint keine Ausgabe]</text>
118:   <a xlink:href="bilder/rcc-simplebutton.gif" target="svgbox">
119:     <text x="350" y="50" style="fill: #F00">Ergebnis als Rastergrafik ...
120:       <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseover"/>
121:       <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseout"/>
122:     </text>
123:   </a>
124: 
125:   <!-- Aufruf der selbst definierten Element-Objekte -->
126:   <svglbc:simplebutton x="20" y="110" bb="100" bh="50" bf="#FCC"
127:     tf="#000" th="12" at="Hallo Button 1!">Text 1</svglbc:simplebutton>
128:   <svglbc:simplebutton x="170" y="90" bb="180" bh="90" bf="#CFC"
129:     tf="#00C" th="36" at="Hallo Button 2!">Text 2</svglbc:simplebutton>
130:   <svglbc:simplebutton x="100" y="230" bb="150" bh="80" bf="#CCF"
131:     tf="#C00" th="24" at="Hallo Button 3!">Text 3</svglbc:simplebutton>
132: 
133: </svg>

[zum Anfang]