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]
