Chris Pollett > Students >
Julie

    ( Print View )

    [Bio]

    [CS297Proposal]

    [Del1]

    [Del2]

    [Del3]

    [Del4]

    [CS 297 Report-PDF]

    [CS 298 Proposal]

    [CS 298 Final Demo]

    [CS 298 Presentation-PDF]

    [CS 298 Report-PDF]

                          

























Stylesheet translation of an SVG shape to VML.

The purpose of this deliverable is to translate an SVG rectangle that contains a gradient fill to a VML image with an equivalent gradient using XSLT. This translation is limited to one gradient combination that has only two colors, red and green. This translation supports only linear gradient. You can view the SVG image using Microsoft IE with the Adobe SVG Viewer plug-in.

Image below: SVG

Stylesheet Demo

Image below: VML

VML

Source Code for the Stylesheet and SVG

gradient-xsl.xsl

<?xml version="1.0" ?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:v="urn:schemas-microsoft-com:vml">

<xsl:template match="/">
  <html xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
  <style type="text/css">
    v\:*{behavior:url(#default#VML);}
  </style>
  </head>
  <body>
    <xsl:for-each select="/">
    <xsl:apply-templates select="svg"/>
  </xsl:for-each>
  </body>
  </html>
 </xsl:template>

  <xsl:template match="svg">
  <xsl:variable name="left">
      <xsl:value-of select="rect/@x" />
    </xsl:variable>

    <xsl:variable name="top">
      <xsl:value-of select="rect/@y" />
    </xsl:variable>

    <xsl:variable name="width">
      <xsl:value-of select="rect/@width" />
    </xsl:variable>

    <xsl:variable name="height">
      <xsl:value-of select="rect/@height" />
    </xsl:variable>

  <xsl:variable name="color">
    <xsl:value-of select="defs/linearGradient/stop[1]/@stop-color" />
  </xsl:variable>

  <xsl:variable name="color2">
    <xsl:value-of select="defs/linearGradient/stop[2]/@stop-color" />
  </xsl:variable>

  <!--DRAW VML-->

  <xsl:element name="v:rect">
      <xsl:attribute name="style">width:
          <xsl:value-of select="$width"/>;height:
          <xsl:value-of select="$height"/>;top:
          <xsl:value-of select="$top"/>;left:
          <xsl:value-of select="$left"/>
        </xsl:attribute>
      <xsl:attribute name="stroke">true</xsl:attribute>
      <xsl:attribute name="strokecolor">white</xsl:attribute>


      <xsl:element name="v:fill">
        <xsl:attribute name="type">gradient</xsl:attribute>
        <xsl:attribute name="angle">90</xsl:attribute>
        <xsl:attribute name="color"><xsl:value-of select="$color"/>
        </xsl:attribute>
        <xsl:attribute name="color2"><xsl:value-of select="$color2"/>
        </xsl:attribute>
        <xsl:attribute name="focus">100%</xsl:attribute>
      </xsl:element>
    </xsl:element>

  </xsl:template>

  </xsl:stylesheet>

svg-gradient.svg

<?xml version="1.0" ?>
<svg>
  <rect x="40" y="25" width="300" height="75" style="fill:url(#gradient1)"></rect>
  <defs>
    <linearGradient id="gradient1">
      <stop offset="0%" stop-color="red"/>
      <stop offset="100%" stop-color="green"/>
    </linearGradient>
  </defs>
</svg>