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]
