<xsl:stylesheet version = "2.0">
    <xsl:output method = "xml" omit-xml-declaration = "no" indent = "yes" version = "1.0" doctype-system = "-//W3C//DTD SVG 1.0//EN" doctype-public = "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"/>
    <xsl:template match = "/gnomons">
        <svg viewBox = "0 0 10 10">
            <defs>
                <g id = "shape" transform = "scale(2)">
                    <path d = "M 0,-.2 l .4,0 a .1,0.09 0 0 1 .1,.1 l -.1,.3 a 0.13,0.13 0 0 1 -.1,.1 l -.2,0 a 0.13,0.13 0 0 1 -.1,-.1 l -.1,-.3 a .1,0.09 0 0 1 .1,-.1 "/>
                </g>
            </defs>
            <g>
                <xsl:apply-templates select = "gnomon"/>
            </g>
        </svg>
    </xsl:template>
    <xsl:template match = "gnomon">
        <xsl:variable name = "shape-colour" select = "@colour"/>
        <xsl:variable name = "shape-x" select = "@x"/>
        <xsl:variable name = "shape-y" select = "@y"/>
        <xsl:variable name = "light-rotation" select = "@azimuth"/>
        <g>
            <radialGradient id = "lightingBase{position()}" cx = "50%" cy = "50%" fx = "50%" fy = "15%" r = "75%"/>
            <radialGradient id = "light{position()}" xlink:href = "#lightingBase{position()}" gradientTransform = "rotate({$light-rotation}+180,0.5,0.5)">
                <stop stop-color = "rgb(255,255,255)" stop-opacity = ".7" offset = "0%"/>
                <stop stop-color = "rgb(255,255,255)" stop-opacity = ".3" offset = "85%"/>
                <stop stop-color = "rgb(255,255,255)" stop-opacity = "0" offset = "100%"/>
            </radialGradient>
            <radialGradient id = "shade{position()}" xlink:href = "#lightingBase{position()}" gradientTransform = "rotate({$light-rotation},0.5,0.5)">
                <stop stop-color = "rgb(0,0,0)" stop-opacity = "1" offset = "0%"/>
                <stop stop-color = "rgb(0,0,0)" stop-opacity = ".8" offset = "85%"/>
                <stop stop-color = "rgb(0,0,0)" stop-opacity = "0" offset = "100%"/>
            </radialGradient>
            <use xlink:href = "#shape" x = "{$shape-x}" y = "{$shape-y}" fill = "{$shape-colour}"/>
            <use xlink:href = "#shape" x = "{$shape-x}" y = "{$shape-y}" fill = "url(#shade{position()})" opacity = "0.3"/>
            <use xlink:href = "#shape" x = "{$shape-x}" y = "{$shape-y}" fill = "url(#light{position()})"/>
        </g>
    </xsl:template>
</xsl:stylesheet>