用SVG实现垂直滚动文本

昨天和同事探讨实现一个实时监控图（采用SVG）的报警信息显示，最后认定采用垂直滚动的信息最合理——信息量大，醒目，省地（想起北京的房价了，监控图也是寸土寸金阿）。

普通网页用javascript实现这个效果有很多很好的例子，但搜索了一下，还真没有现成的SVG例子。于是就自己写了一个最简单的demo供同事借鉴。

基本想法如下：

 

• 利用SVG提供的clipPath，实现对两行文本的部分显示的裁剪
• 一个定时器用于本次滚动停止到下次滚动开始间隙的计时
• 另一个定时器用于滚动过程中，每次细微的文本位置调整的计时

运行大致效率：在我的sony SR5s2上（windows7 64bit pro, firefox4），cpu在滚动时增加了5%左右

 

实现的效果及代码参见附件，要改进形成正式功能，可以作以下几点工作：

 

• 必要的js对象封装，增强代码的可复用性
• 鼠标移过时停止滚动
• 管理一个文本数组，直接提供增加报警信息的方法。文本大于两条才启动滚动
• 手动清除报警的按钮及相应的方法