JavaScript 的新领域 - 动态图片处理（SVG）-4

look_w

动画SVG 在设计时就加入了对动画的支持。这是通过另一种 W3C 颁布的动画语言 SIML(Synchronized Multimedia Integration Language) 实现的。SIML 被应用时，与 SVG 结合得非常紧密。它与 SVG 一样，是一种声明性（declarative）的标记语言，通过元素（element）和属性（attribute）来定义动画的行为。这里只给出一个简单的例子，不做详细介绍。因为浏览器对它的支持还很有限；另外它声明性的本质也使表现力受到限制，不如使用脚本自定义动画灵活。
清单 3. 用 SIML 实现的动画

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg">    <polygon points="50,100  100,100  75,50" stroke="#660000" fill="#cc3333">         <animateTransform            attributeName="transform"            begin="0s"            dur="10s"            type="rotate"            from="0 0 0"            to="360 60 60"            repeatCount="indefinite"        />     </polygon> </svg>

polygon 元素指定画一个多变形，这里给定了三个顶点，所以是一个三角形。将上面的代码保存成一个 SVG 文件，在一个页面中引用，如果您的浏览器支持 SIML，屏幕上会显示一个不断旋转的红色三角形；如果您的浏览器只支持 SVG，将看到一个静止的红色三角形。