SVG – Learning by Coding

[ rcc-xslt-simplebutton.svg --> Grafik anzeigen ]

  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: <!--    AuthorDrThomas 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-familysans-serif;
 26:         font-size12px;
 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--->
 65:         <xsl:variable name="y" select="@y"/>   <!-- Button--->
 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 Parameterauswertungfill="{$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&amp;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]