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>