使用SVG创建XML文档图形

本文关键词： xml developtrend

曾经有些睿智的广告人员说过：一张图片抵得过上千字。不管这句话来源怎样，但是它一出现即被视为真理，每个人都表示同意。人类基本上是视觉动物，这也许就是用图像表达信息如此受欢迎的一个最重要的原因。

最近，我为一个私人项目工作。在这里需要显示XML文档的图片。对于画图天才来说，像我的孩子们和我妻子，这可能不是什么大问题，而我在这方面需要保持沉默。所有的话语都萎缩了，这不是说我不会欣赏绘画，实际上我是M. C. Escher的忠实画迷，但是我说不出他是如何进行绘画的。在绘画上我缺少天赋。

工具

幸运的是，当涉及到XML和XSLT领域的时候，我是非常有能耐的。SVG的使用给了我弥补绘画天分不足的机会。我并不是手工编写SVG代码处理XML文档，而是选择写一个XSL风格的样式表来处理这些恼人的工作。当然，不用怀疑我不会写代码，毕竟我是个程序员。

当然，像其他手艺精湛的师傅一样，我也需要一些完成工作的工具，它们列举如下：

前两个是比较容易得到的，而后一个有点古怪因为它是Web浏览器。什么才是好的Web浏览器呢？很简单，不像微软的Internet Explorer浏览器那样需要插件才能显示SVG图像的浏览器，如基于Mozilla的Firefox 和 Flock浏览器就是很好的浏览器。

工具准备好后，下一步工作是确定XML文档中的图像采用什么形状和字体。为了避免使用铅笔也能画出很漂亮的图，我将这个工作分解成下面几步：

SVG的一个很有意思的地方在于可以预先定义基本形状和文本。形状元素和文本元素结合使用可以定义更多图形的复杂元素。例如，使用rect（rectangle）和text元素组合与使用g元素产生单个图像节点。

连接元素

一旦单个元素都创建好了，剩余的工作就是调整位置连接元素了。我没有将几何图形都给出来，而是给出XML代码（Listing A）。

Listing A XML文档源码

<?xml version="1.0" encoding="UTF-8"?>
<root>
?<child>
牋?<grandchild/>
?</child>
?<child/>
</root>

上面简单的XML代码运行后的结果如Figure A所示，它证明了这一方法是可行的。

Figure A：XML文档代码表示的图形