SVG技术及其应用研讨.pdfVIP

SVG技术及其应用研究 王铁军①谭兴烈。 佘垫① 周明天① ①(电子科大．卫士通信息安全联合实验室610054) ②(髑川大学数学学院， 成都卫士通信息产业股份公司， 610041) ．芦； 摘要本文介绍了一种新的网络图形格式一一SvG，并且给出了采用SVG技术制作动画的 简单例予． 关键词 Viewer动画 SVG)酶轧元素SVG l SVG简介 ScalableVector 形式的图形对象存在：矢量图形、点阵图像和文本。由于它是构建在XML基础上的，这就奠 定了它在未来的网络时代二维图形处理中的地位。更主要的是它是_种完全开放的协议标准， 这就意味着任何人和组织都可以开发自己的产品而避免了要事先征求某个公司或组织的同意 或是购买协议等，系列繁琐的问题。SVG文件很像MIDI音乐文件，它是由许多可以嵌套的 元素(elemeI)掌)构成的，这些元素是由一些描述如何绘制图形的指令组成的，SVG阅读器(像 Adobe SVG奶ewer)来解释这些指令绘制图像，并在指定的设备上显示SVG图像。与MIDI 音乐一样，S’rG图像的显示质量和显示速度是由本地计算机的处理能力来决定的，这样就可 以大大减小服势器方的负担，同时也节约了网络带宽，因为我们不必在网络上传输大量的二 “．svgz”为鏖缀的文件是SVG文件的用gzip压缩后的文件)。 2攥用SVG制作带有鼠标事件相应能力的动画 ￡ ¨奠 Viewer，我们推荐使用Adobe的SVG浏览器插件，它 要想浏览SVG图形，必须有SVG 支持IE和Netscape，而且是免费的。我们的目的是制作一个可以相应鼠标事件的SVG动画， 图一是我们最缫作品的显示结果：当鼠标移到每个小的立方体上时，这些立方体会以原点为 中心作有阻尼的机械振动，并且只有当振动停止，这些立方体才会相应下一次的鼠标事件 下面，让我们开始每一步的规划吧。 首先，我们要建立一个可以重用的小立方体。它的实现代码如下： ?xml version=”1．0”encoding=”iso一8859-l”? SVG1．0／／EN” !DOCTYPEPUBLIC”-／／W3C／／DTD svg 0665 vddth=H 250”xml：space。’preserve。t) svg 665pxtlheight=…250px“viewBox=’0 Demonstration／title tit,黔SVGAnimation．Cube 624 图一 defs symbol pathstyle=”fill：#333333；”d=”MO．112，26．271125．032，12．485V25．164 LO．I12．12．68V26．271z’’今 path L25．144，25．164V38．756z”／ ． pathstyle=’’fill：#cccccc”d”M50．12，12．70810．057-0．028L25．144，0．224 L0．1 12，12．68125．032，12．484L50．12，12．708z”今 ／symbol ／defs rect use xlink：href=”#cube”transform=”translate(307．5，105．75)”今 ／svg 这段代码的显示结果如图二：在svg／svg里面，是SVG的主要绘图区。通过这里的定 义，可以重新定义一套坐标系统，使得在这里面定义的一切图形