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:xlink="http://www.w3.org/1999/xlink"
12: xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
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: <style type="text/css">
21: <![CDATA[
22:
23: *
24: {
25: font-family: sans-serif;
26: font-size: 12px;
27: }
28:
29: ]]>
30: </style>
31:
32:
33: <script type="text/javascript">
34: <![CDATA[
35:
36: function SetOp(evt,op)
37: {
38: var obj,cnodes,i;
39: obj=evt.target.parentNode;
40: cnodes=obj.childNodes;
41: for(i=0;i<cnodes.length;i++)
42: {
43: if(cnodes.item(i).nodeType==1)cnodes.item(i).setAttribute("opacity",op);
44: }
45: }
46:
47: ]]>
48: </script>
49:
50: </defs>
51:
52: <extensionDefs id="svglbc" namespace="http://www.datenverdrahten.de/svglbc">
53:
54: <xsl:stylesheet id="simplebutton_xsl" version="1.0"
55: xmlns="http://www.w3.org/2000/svg"
56: xmlns:xlink="http://www.w3.org/1999/xlink"
57: xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
58: xmlns:svglbc="http://www.datenverdrahten.de/svglbc">
59:
60: <!-- mit Parameterauswertung: <xsl:param name="shadowcol"/> -->
61:
62: <xsl:template match="svglbc:simplebutton">
63:
64: <xsl:variable name="x" select="@x"/> <!-- Button-x -->
65: <xsl:variable name="y" select="@y"/> <!-- Button-y -->
66: <xsl:variable name="bb" select="@bb"/> <!-- Button-Breite -->
67: <xsl:variable name="bh" select="@bh"/> <!-- Button-Hoehe -->
68: <xsl:variable name="bf" select="@bf"/> <!-- Button-Farbe -->
69: <xsl:variable name="th" select="@th"/> <!-- Text-Hoehe -->
70: <xsl:variable name="tf" select="@tf"/> <!-- Text-Farbe -->
71: <xsl:variable name="at" select="@at"/> <!-- Alert-Text (onclick) -->
72:
73: <g>
74: <!-- Rechteck - unten -->
75: <rect id="unten"
76: x="{$x + $bb div 35}" y="{$y + $bb div 35}"
77: width="{$bb}" height="{$bh}" rx="5" fill="#CCC"/>
78: <!-- mit Parameterauswertung: fill="{$shadowcol}" -->
79:
80: <!-- Rechteck - oben -->
81: <rect id="oben"
82: x="{$x}" y="{$y}" width="{$bb}" height="{$bh}"
83: rx="5" fill="{$bf}" onclick="alert('{$at}')"
84: onmouseover="SetOp(evt,0.5)" onmouseout="SetOp(evt,1.0)"/>
85:
86: <!-- Buttontext -->
87: <text id="txt"
88: x="{$x + $bb div 2}" y="{$y + $bh div 2 + $th div 3}"
89: fill="{$tf}" font-size="{$th}" text-anchor="middle"
90: pointer-events="none"><xsl:value-of select="."/></text>
91: </g>
92:
93: </xsl:template>
94:
95: </xsl:stylesheet>
96:
97: <elementDef name="simplebutton">
98: <transformer xlink:href="#simplebutton_xsl" type="text/xsl"/>
99: </elementDef>
100:
101: <!-- alternativ mit zusaetzlichen Parametern:
102: <elementDef name="simplebutton">
103: <transformer xlink:href="#simplebutton_xsl" type="text/xsl">
104: <param name="shadowcol" value="#CCC"/>
105: <param name="..." value="..."/>
106: </transformer>
107: </elementDef> -->
108:
109: </extensionDefs>
110:
111: <text x="20" y="30" style="fill: #000; font-size: 24px">
112: RCC - Rendering Custom Content mit XSLT</text>
113: <text x="20" y="60" style="fill: #F00">
114: - zurzeit noch nicht in SVG-Viewern implementiert</text>
115:
116: <a xlink:href="http://www.w3.org/TR/SVG12/" target="_top">
117: <text x="20" y="80" style="fill: #00C">- Details im SVG 1.2-Working Draft
118: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
119: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
120: </text>
121: </a>
122:
123: <a xlink:href="../?code=rcc-simplebutton&znr=on" target="_top">
124: <text x="20" y="100" style="fill: #00C">- siehe Beispiel rcc-simplebutton.svg
125: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
126: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseout"/>
127: </text>
128: </a>
129:
130: <text x="20" y="150">- externe Umsetzung der XSL-Transformation:</text>
131: <a xlink:href="rcc_xslt/rcc.xml" target="_top">
132: <text x="30" y="170">XML-Dokument
133: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
134: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
135: </text>
136: </a>
137: <a xlink:href="rcc_xslt/rcc.xsl" target="_top">
138: <text x="130" y="170">XSL-Stylesheet
139: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
140: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
141: </text>
142: </a>
143: <a xlink:href="rcc_xslt/rcc.svg" target="_top">
144: <text x="230" y="170">SVG-Ergebnis
145: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
146: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
147: </text>
148: </a>
149:
150: <!-- Aufruf der selbst definierten Element-Objekte -->
151: <svglbc:simplebutton x="20" y="110" bb="100" bh="50" bf="#FCC"
152: tf="#000" th="12" at="Hallo Button 1!">Text 1</svglbc:simplebutton>
153: <svglbc:simplebutton x="170" y="90" bb="180" bh="90" bf="#CFC"
154: tf="#00C" th="36" at="Hallo Button 2!">Text 2</svglbc:simplebutton>
155: <svglbc:simplebutton x="100" y="230" bb="150" bh="80" bf="#CCF"
156: tf="#C00" th="24" at="Hallo Button 3!">Text 3</svglbc:simplebutton>
157:
158: </svg>
[zum Anfang]