SVG – Learning by Coding
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: <!-- Author: Dr. Thomas 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&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]
