mirror of https://github.com/moparisthebest/xeps
1 line
6.9 KiB
XML
1 line
6.9 KiB
XML
<xsl:stylesheet version='1.0'
|
|
xmlns:xsl='http://www.w3.org/1999/XSL/Transform'
|
|
xmlns:svg='http://xsltsl.org/svg'
|
|
xmlns:doc="http://xsltsl.org/xsl/documentation/1.0"
|
|
exclude-result-prefixes="doc">
|
|
|
|
<xsl:variable name='svg-public-id' select='"-//W3C//DTD SVG 20010904//EN"'/>
|
|
<xsl:variable name='svg-system-id' select='"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"'/>
|
|
|
|
<doc:reference xmlns="">
|
|
<referenceinfo>
|
|
<releaseinfo role="meta">
|
|
$Id$
|
|
</releaseinfo>
|
|
<author>
|
|
<surname>Ball</surname>
|
|
<firstname>Steve</firstname>
|
|
</author>
|
|
<copyright>
|
|
<year>2002</year>
|
|
<holder>Steve Ball</holder>
|
|
</copyright>
|
|
</referenceinfo>
|
|
|
|
<title>SVG Stylesheet</title>
|
|
|
|
<partintro>
|
|
<section>
|
|
<title>Introduction</title>
|
|
|
|
<para>This module provides templates for creating SVG images.</para>
|
|
</section>
|
|
</partintro>
|
|
</doc:reference>
|
|
|
|
<doc:template name="svg:aqua-button-defs" xmlns="">
|
|
<refpurpose>Aqua-style Button</refpurpose>
|
|
|
|
<refdescription>
|
|
<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>
|
|
|
|
<para>The default values for color1, color2 and color3 result in a grey button.</para>
|
|
</refdescription>
|
|
|
|
<refparameter>
|
|
<variablelist>
|
|
<varlistentry>
|
|
<term>prefix</term>
|
|
<listitem>
|
|
<para>A prefix to append to the identifiers used, so that they don't clash with other identifiers. Default: "aqua-".</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term>color1</term>
|
|
<listitem>
|
|
<para>The base colour of the button. Default: "#d9d9d9".</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term>color2</term>
|
|
<listitem>
|
|
<para>A "background" colour for the button. Should be a darker colour than color1. Default: "#a9a9a9".</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
<varlistentry>
|
|
<term>color3</term>
|
|
<listitem>
|
|
<para>A highlight colour for the button. Should be a lighter colour than color1. Default: "#f9f9f9".</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
</variablelist>
|
|
</refparameter>
|
|
|
|
<refreturn>
|
|
<para>Returns SVG result-tree-fragment.</para>
|
|
</refreturn>
|
|
</doc:template>
|
|
|
|
<xsl:template name="svg:aqua-button-defs">
|
|
<xsl:param name="prefix" select='"aqua-"'/>
|
|
<xsl:param name="color1" select='"#d9d9d9"'/>
|
|
<xsl:param name="color2" select='"#a9a9a9"'/>
|
|
<xsl:param name="color3" select='"#f9f9f9"'/>
|
|
|
|
<linearGradient id='{$prefix}gradient' x1='0%' y1='0%' x2='0%' y2='100%'>
|
|
<stop offset='0%' stop-color='{$color2}'/>
|
|
<stop offset='100%' stop-color='{$color1}'/>
|
|
</linearGradient>
|
|
<linearGradient id='{$prefix}highlight-gradient' x1='0%' y1='0%' x2='0%' y2='100%'>
|
|
<stop offset='0%' stop-color='#ffffff'/>
|
|
<stop offset='75%' stop-color='{$color3}' stop-opacity='0'/>
|
|
<stop offset='100%' stop-color='{$color3}' stop-opacity='0'/>
|
|
</linearGradient>
|
|
<linearGradient id='{$prefix}revhighlight-gradient' x1='0%' y1='100%' x2='0%' y2='0%'>
|
|
<stop offset='0%' stop-color='#ffffff'/>
|
|
<stop offset='50%' stop-color='{$color3}' stop-opacity='0'/>
|
|
<stop offset='100%' stop-color='{$color3}' stop-opacity='0'/>
|
|
</linearGradient>
|
|
<linearGradient id='{$prefix}corner-left-gradient' x1='0%' y1='0%' x2='100%' y2='100%'>
|
|
<stop offset='0%' stop-color='#000000'/>
|
|
<stop offset='100%' stop-color='{$color3}' stop-opacity='0'/>
|
|
</linearGradient>
|
|
<linearGradient id='{$prefix}corner-right-gradient' x1='100%' y1='0%' x2='0%' y2='100%'>
|
|
<stop offset='0%' stop-color='#000000'/>
|
|
<stop offset='100%' stop-color='{$color3}' stop-opacity='0'/>
|
|
</linearGradient>
|
|
|
|
<filter id='{$prefix}filter-blur' filterUnits='userSpaceOnUse' x='0' y='0' width='200' height='100'>
|
|
<feGaussianBlur in='SourceGraphic' stdDeviation='2'/>
|
|
</filter>
|
|
<filter id='{$prefix}drop-shadow' y='-5' height='100'>
|
|
<feColorMatrix type='matrix' in='SourceAlpha' result='inglow'
|
|
values='.5 .5 .5 1 0
|
|
.5 .5 .5 1 0
|
|
.5 .5 .5 1 0
|
|
0 0 0 1 0'/>
|
|
<feBlend mode='multiply' in2='SourceGraphic' in='inglow' result='innerglow'/>
|
|
|
|
<feGaussianBlur stdDeviation='4' in='SourceAlpha' result='shadow'/>
|
|
<feColorMatrix type='matrix' in='shadow' result='lightshadow'
|
|
values='.33 .33 .33 1 0
|
|
.33 .33 .33 1 0
|
|
.33 .33 .33 1 0
|
|
0 0 0 1 0'/>
|
|
<feOffset in='lightshadow' dx='0' dy='3' result='dropshadow'/>
|
|
<feMerge>
|
|
<feMergeNode in='dropshadow'/>
|
|
<feMergeNode in='innerglow'/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
</xsl:template>
|
|
|
|
<doc:template name="svg:aqua-button" xmlns="">
|
|
<refpurpose>Aqua-style Button</refpurpose>
|
|
|
|
<refdescription>
|
|
<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>
|
|
</refdescription>
|
|
|
|
<refparameter>
|
|
<variablelist>
|
|
<varlistentry>
|
|
<term>prefix</term>
|
|
<listitem>
|
|
<para>A prefix to append to the identifiers used, so that they don't clash with other identifiers. Default: "aqua-".</para>
|
|
</listitem>
|
|
</varlistentry>
|
|
</variablelist>
|
|
</refparameter>
|
|
|
|
<refreturn>
|
|
<para>Returns SVG result-tree-fragment.</para>
|
|
</refreturn>
|
|
</doc:template>
|
|
|
|
<xsl:template name='svg:aqua-button'>
|
|
<xsl:param name="prefix" select='"aqua-"'/>
|
|
|
|
<g filter='url(#{$prefix}drop-shadow)'>
|
|
<clipPath id='{$prefix}main-shape'>
|
|
<path clip-rule='evenodd'
|
|
d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
|
|
</clipPath>
|
|
<path fill="url(#{$prefix}gradient)" stroke="none"
|
|
d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" />
|
|
<path clip-path='url(#{$prefix}main-shape)' fill='url(#{$prefix}corner-left-gradient)' stroke='none' filter='url(#{$prefix}filter-blur)'
|
|
d="M50,57 L13,57 A35,35 -90 0,1 50,30 z" />
|
|
<path clip-path='url(#{$prefix}main-shape)' fill='url(#{$prefix}corner-right-gradient)' stroke='none' filter='url(#{$prefix}filter-blur)'
|
|
d="M150,30 A35,35 90 0,1 190,57 L150,57 z" />
|
|
<path fill="url(#{$prefix}highlight-gradient)" stroke="none" stroke-width='1'
|
|
d="M50,65 C20,65 20,35 50,35 L150,35 C180,35 180,65 150,65 z" />
|
|
<path filter='url(#{$prefix}filter-blur)' fill="url(#{$prefix}revhighlight-gradient)" stroke="none"
|
|
d="M50,85 C10,85 10,35 50,35 L150,35 C190,35 190,85 150,85 z" />
|
|
</g>
|
|
</xsl:template>
|
|
</xsl:stylesheet>
|