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 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")!=-1 && 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]
