]> git.stg.codes - stg.git/blob - doc/xslt/slides/keynote/xsltsl/svg.xsl
Merge remote-tracking branch 'origin/stg-2.409' into ticket26
[stg.git] / doc / xslt / slides / keynote / xsltsl / svg.xsl
1 <xsl:stylesheet version='1.0'
2   xmlns:xsl='http://www.w3.org/1999/XSL/Transform'
3   xmlns:svg='http://xsltsl.org/svg'
4   xmlns:doc="http://xsltsl.org/xsl/documentation/1.0"
5   exclude-result-prefixes="doc">
6
7   <xsl:variable name='svg-public-id' select='"-//W3C//DTD SVG 20010904//EN"'/>
8   <xsl:variable name='svg-system-id' select='"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"'/>
9
10   <doc:reference xmlns="">
11     <referenceinfo>
12       <releaseinfo role="meta">
13         $Id: svg.xsl 3991 2004-11-10 06:51:55Z balls $
14       </releaseinfo>
15       <author>
16         <surname>Ball</surname>
17         <firstname>Steve</firstname>
18       </author>
19       <copyright>
20         <year>2002</year>
21         <holder>Steve Ball</holder>
22       </copyright>
23     </referenceinfo>
24
25     <title>SVG Stylesheet</title>
26
27     <partintro>
28       <section>
29         <title>Introduction</title>
30
31         <para>This module provides templates for creating SVG images.</para>
32       </section>
33     </partintro>
34   </doc:reference>
35
36   <doc:template name="svg:aqua-button-defs" xmlns="">
37     <refpurpose>Aqua-style Button</refpurpose>
38
39     <refdescription>
40       <para>Part of the mechanism to create an Aqua-style button.  Include a call to this template in your SVG document's <sgmltag>defs</sgmltag> element.  This template only needs to be included once.  Use this in conjunction with <sgmltag>svg:aqua-button</sgmltag>.</para>
41
42       <para>The default values for color1, color2 and color3 result in a grey button.</para>
43     </refdescription>
44
45     <refparameter>
46       <variablelist>
47         <varlistentry>
48           <term>prefix</term>
49           <listitem>
50             <para>A prefix to append to the identifiers used, so that they don't clash with other identifiers.  Default: "aqua-".</para>
51           </listitem>
52         </varlistentry>
53         <varlistentry>
54           <term>color1</term>
55           <listitem>
56             <para>The base colour of the button.  Default: "#d9d9d9".</para>
57           </listitem>
58         </varlistentry>
59         <varlistentry>
60           <term>color2</term>
61           <listitem>
62             <para>A "background" colour for the button.  Should be a darker colour than color1.  Default: "#a9a9a9".</para>
63           </listitem>
64         </varlistentry>
65         <varlistentry>
66           <term>color3</term>
67           <listitem>
68             <para>A highlight colour for the button.  Should be a lighter colour than color1.  Default: "#f9f9f9".</para>
69           </listitem>
70         </varlistentry>
71       </variablelist>
72     </refparameter>
73
74     <refreturn>
75       <para>Returns SVG result-tree-fragment.</para>
76     </refreturn>
77   </doc:template>
78
79   <xsl:template name="svg:aqua-button-defs">
80     <xsl:param name="prefix" select='"aqua-"'/>
81     <xsl:param name="color1" select='"#d9d9d9"'/>
82     <xsl:param name="color2" select='"#a9a9a9"'/>
83     <xsl:param name="color3" select='"#f9f9f9"'/>
84
85     <linearGradient id='{$prefix}gradient' x1='0%' y1='0%' x2='0%' y2='100%'>
86       <stop offset='0%' stop-color='{$color2}'/>
87       <stop offset='100%' stop-color='{$color1}'/>
88     </linearGradient>
89     <linearGradient id='{$prefix}highlight-gradient' x1='0%' y1='0%' x2='0%' y2='100%'>
90       <stop offset='0%' stop-color='#ffffff'/>
91       <stop offset='75%' stop-color='{$color3}' stop-opacity='0'/>
92       <stop offset='100%' stop-color='{$color3}' stop-opacity='0'/>
93     </linearGradient>
94     <linearGradient id='{$prefix}revhighlight-gradient' x1='0%' y1='100%' x2='0%' y2='0%'>
95       <stop offset='0%' stop-color='#ffffff'/>
96       <stop offset='50%' stop-color='{$color3}' stop-opacity='0'/>
97       <stop offset='100%' stop-color='{$color3}' stop-opacity='0'/>
98     </linearGradient>
99     <linearGradient id='{$prefix}corner-left-gradient' x1='0%' y1='0%' x2='100%' y2='100%'>
100       <stop offset='0%' stop-color='#000000'/>
101       <stop offset='100%' stop-color='{$color3}' stop-opacity='0'/>
102     </linearGradient>
103     <linearGradient id='{$prefix}corner-right-gradient' x1='100%' y1='0%' x2='0%' y2='100%'>
104       <stop offset='0%' stop-color='#000000'/>
105       <stop offset='100%' stop-color='{$color3}' stop-opacity='0'/>
106     </linearGradient>
107
108     <filter id='{$prefix}filter-blur' filterUnits='userSpaceOnUse' x='0' y='0' width='200' height='100'>
109       <feGaussianBlur in='SourceGraphic' stdDeviation='2'/>
110     </filter>
111     <filter id='{$prefix}drop-shadow' y='-5' height='100'>
112       <feColorMatrix type='matrix' in='SourceAlpha' result='inglow'
113         values='.5 .5 .5 1 0
114                 .5 .5 .5 1 0
115                 .5 .5 .5 1 0
116                 0 0 0 1 0'/>
117       <feBlend mode='multiply' in2='SourceGraphic' in='inglow' result='innerglow'/>
118
119       <feGaussianBlur stdDeviation='4' in='SourceAlpha' result='shadow'/>
120       <feColorMatrix type='matrix' in='shadow' result='lightshadow'
121         values='.33 .33 .33 1 0
122                 .33 .33 .33 1 0
123                 .33 .33 .33 1 0
124                 0 0 0 1 0'/>
125       <feOffset in='lightshadow' dx='0' dy='3' result='dropshadow'/>
126       <feMerge>
127         <feMergeNode in='dropshadow'/>
128         <feMergeNode in='innerglow'/>
129       </feMerge>
130     </filter>
131
132   </xsl:template>
133
134   <doc:template name="svg:aqua-button" xmlns="">
135     <refpurpose>Aqua-style Button</refpurpose>
136
137     <refdescription>
138       <para>Part of the mechanism to create an Aqua-style button.  Include a call to this template in your SVG document where you want a button to appear.  This template can be used many times in a single SVG document.  Use this in conjunction with <sgmltag>svg:aqua-button-defs</sgmltag>.</para>
139     </refdescription>
140
141     <refparameter>
142       <variablelist>
143         <varlistentry>
144           <term>prefix</term>
145           <listitem>
146             <para>A prefix to append to the identifiers used, so that they don't clash with other identifiers.  Default: "aqua-".</para>
147           </listitem>
148         </varlistentry>
149       </variablelist>
150     </refparameter>
151
152     <refreturn>
153       <para>Returns SVG result-tree-fragment.</para>
154     </refreturn>
155   </doc:template>
156
157   <xsl:template name='svg:aqua-button'>
158     <xsl:param name="prefix" select='"aqua-"'/>
159
160     <g filter='url(#{$prefix}drop-shadow)'>
161       <clipPath id='{$prefix}main-shape'>
162         <path clip-rule='evenodd'
163                 d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
164       </clipPath>
165       <path fill="url(#{$prefix}gradient)" stroke="none"
166                 d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
167       <path clip-path='url(#{$prefix}main-shape)' fill='url(#{$prefix}corner-left-gradient)' stroke='none' filter='url(#{$prefix}filter-blur)'
168                 d="M50,57 L13,57 A35,35 -90 0,1 50,30 z" />
169       <path clip-path='url(#{$prefix}main-shape)' fill='url(#{$prefix}corner-right-gradient)' stroke='none' filter='url(#{$prefix}filter-blur)'
170                 d="M150,30 A35,35 90 0,1 190,57 L150,57 z" />
171       <path fill="url(#{$prefix}highlight-gradient)" stroke="none" stroke-width='1'
172                 d="M50,65 C20,65 20,35 50,35 L150,35 C180,35 180,65 150,65 z" />
173       <path filter='url(#{$prefix}filter-blur)' fill="url(#{$prefix}revhighlight-gradient)" stroke="none"
174                 d="M50,85 C10,85 10,35 50,35 L150,35 C190,35 190,85 150,85 z" />
175     </g>
176   </xsl:template>
177 </xsl:stylesheet>