使用SVG和XSL创建动态图像

如果你要使用XML来表示GIF或者JPEG这样的图形格式，那是很费力的。现在如果你使用Scalable Vector Graphics (SVG，可伸缩矢量图形)，问题就会简单很多。SVG是一种XML的语言规范，只要使用一点点XSL，就可以自定义创建动态的SVG图像。

SVG模板

这种技术基于创建一个SVG模板，然后修改里面的内容以创建一个新的SVG图像。一开始，你需要一个基本的图像。你可以使用很多工具，比如WebDraw和JASC。其实，你还可以用任何的文本编辑器，因为所有的SVG图像都只是XML。

清单 1展示了一个很简单的SVG按钮，我们将把它作为开始的模板。如果你将它导入到SVG浏览器，你会看到一个简单的蓝色按钮，按钮上的文字为“Button”。如果你点击它，你会链接到Builder.com的主页上。

清单 1: button.svg

<?xml version="1.0"?>
     <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" _
       "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
     <svg width="200" height="50">
      <a xlink:href="http://www.builder.com">
      <rect x="3" y="6" width="193" height="37"   
       style="fill:rgb(0,0,255);stroke:rgb(0,0,0);stroke-width:1"/>
      <text x="26px" y="17px" transform="translate(13      12)"
       style="fill:rgb(0,0,0);font-size:24;font-family:Arial">Button</text>
      </a>
     </svg>

XML源数据

我们现在要把这个SVG文档转换成XSL模板。模板把这个图像分成两部分：静态部分是XSL模板，动态部分是XML文档，用于驱动转换。这个图像有两个部分是动态影响的，URL和按钮上的文字。清单 2 展示了动态源数据，它是一个新的XML文件。

清单 2: custombutton.xml

<?xml version="1.0" ?>
     <button>
      <text>Google</text>
     <url>http://www.google.com</url>
</button>

就像你看到的一样，这个新按钮的文字会变成“Google”，并且链接到这个著名的搜索引擎。下一步是将SVG图像转换成XSL模板。本质上来说，我们是做个链接，动态改变按钮文字，并且将它们从XML文档中传入。清单 3是这个XSL模板的例子。

清单 3: button.xsl

<?xml version="1.0" encoding="ISO-8859-1"?>
     <xsl:stylesheet
       xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"
       xmlns:xlink="http://www.w3.org/1999/xlink" >
       <xsl:output method="xml" encoding="ISO-8859-1"  indent="yes" />
       <xsl:template match="/">
         <svg width="200" height="50">
           <a>
             <xsl:attribute name="xlink:href">
               <xsl:value-of      select="/button/url" />
             </xsl:attribute>
             <rect
               x="3"
               y="6"
               width="193"
               height="37"
               style="fill:rgb(0,0,255);stroke:rgb(0,0,0);stroke-width:1"/>
             <text
               x="26px"
               y="17px"
               transform="translate(13      12)"
               style="fill:rgb(0,0,0);font-size:24;font-family:Arial">
               <xsl:value-of select="/button/text" />
             </text>
           </a>
         </svg>
       </xsl:template>
     </xsl:stylesheet>

XSL模板已经改善了最初的SVG文档，让它变得更为动态化。这只是一个简单的使用单元素模板进行转换的例子。运行时，链接是根据源文件的/button/url元素被激活的，按钮文本的值则来自于/button/text元素。