|
使用SVG和XSL创建动态图像广告 使用SVG和XSL创建动态图像 使用XML发布图像可能会是很麻烦的，如果你正在使用老的图像格式的话，例如GIF和JPEG。但是有了可伸缩矢量图（SVG），这就是轻而易举的事了。由于SVG是符合XML语法规格的，所以你可以只使用一点点XSL就创建好自定义的动态SVG图像。 SVG模板 这项技术是基于创建一个SVG模板，并修改其内容，让其产生新SVG图像的。要开始这个过程，就需要使用一个背景图像。你可以使用多种工具，例如JASC的WebDraw，来创建启动图像。实际上，你也可以使用任何文本编辑器，因为所有的SVG图像都只不过是XML。 Listing A是一个简单的SVG按纽，你会用它作为这个过程的基础模板。如果把这个文档载入到SVG浏览器，你会看到一个显示着“按纽”字样的简单蓝色按钮。如果点击这个按钮，它会把你带到Builder.com的主页。 把XML作为源数据 把这个SVG文档转换成为XSL模板，你就可以开始了。这个模板基本上把这个文档分割成两部分：静态部分是XSL模板，动态部分是一个XML文档，你会用这个文档来完成转换。这个你要动态处理的图像有两个组件——URL和按纽的文本。一个新的XML文档，如Listing B所示，包含有动态源数据。 正如你能够看到的那样，这个新的按钮会显示Google的字样，并会链接到这个常用的搜索引擎。下一步是把SVG图像转换成XSL模板。从本质上说，通过把数据从XML文档里抽出来，你就能把链接和按钮文字做成动态的。Listing C显示的是XSL模板。 这个XSL模板已经翻新了原来的SVG文档，让它的动态更强。这是个只使用了单元素模板的简单转换。在被处理的时候，这个链点会用源文档的/button/url元素填充，而且按纽文本的内容是/button/text元素的值。 把XML转换成SVG 实际处理源XML和XSL模板的方法有很多种。在实际操作过程中，你最有可能使用Xalan API来用程序把XSL和XML转换成SVG文档。为了更好的说明问题，就是要使用Xalan命令行。要运行这一过程，在命令提示符下输入以下的内容： java org.apache.xalan.xslt.Process -IN custombutton.xml -XSL
button.xsl -OUT 这一步的结果看起来会和Listing D里的SVG文档类似。 深入SVG 《使用SVG在浏览器里绘画和注释》 在Web上显示SVG 和通常的观念不一样，你可以在Web页面上使用SVG图形。它们没有被作为<img>标签的源文件来实现，而是作为嵌入对象被实现的。Listing E是一个显示新SVG图像的简单Web页面。 Listing A: 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> Listing B: custombutton.xml <?xml version="1.0" ?> <button> <text>Google</text> <url>http://www.google.com</url> </button> Listing C: 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> Listing D: custom.svg <?xml version="1.0" encoding="ISO-8859-1"?> <svg xmlns:xlink="http://www.w3.org/1999/xlink" height="50" width="200"> <a xlink:href="http://www.google.com"> <rect style="fill:rgb(0,0,255);stroke:rgb(0,0,0);stroke-width:1" height="37" width="193" y="6" x="3"/> <text style="fill:rgb(0,0,0);font-size:24;font-family:Arial" transform="translate(13 12)" y="17px" x="26px">Google</text> </a> </svg> Listing E: custombutton.html <html> <head> <title>SVG Image Demo</title> </head> <body bgcolor="#ffffff"> <center> <table border="0"> <tr> <td align="center"> Click the image to visit the Google search engine: </td> </tr> <tr> <td align="center"> <embed src="custombutton.svg" type="image/svg+xml" pluginspace="http://www.adobe.com/svg/viewer/install/" > </td> </tr> </table> </center> </body> </html> 如果您希望与本文章的作者或其所在机构，进一步交流，请联系：畅享网 姜小姐 jill.jiang@amt.com.cn | 021-51096826-112 | 在线联系 |
 CIO职场，强者生存？在2008年，我们将继续看到CIO向商业运营方向发展。与此同时，我们也会看到商业管理人员将与技术管理人员一起竞争CIO岗位。 IT领导者的就职机会虽有不少，但其难度将会大幅提高。2…… |
|
|