| 文章索引 |
|---|
| 蓝骑士SVG教程:SVG动态与动画 |
| 第一课 SVG的变形属性 |
| 第二课 SVG动画 |
| 第三课 结合JavaScript产生SVG动画 |
| 第四课 SVG鼠标事件 |
| 第五课 SVG键盘事件 |
| 第六课 动态插入SVG元素 |
| 所有页面 |
交互和事件驱动也是SVG规范中的一部分.超链接,鼠标事件,键盘事件和状态改变事件组成了SVG的动态特性.标签(a)用于指明当前浏览器的哪一部分将被新的URL链接的内容重绘.下面是一个超链接的实例,这里绘制了一个新的三角形:
<path d="M 0 0 L 200 0 L 100 200 Z">
</a>
如果点击三角形,当前浏览器的内容将被W3C组织的主页所代替(http://www.w3.org).
SVG的一个独特特征是相对独立的图像可以被链接独立引用,下例的鼠标掠过(rollover)动态效果就是由此获得.让你的鼠标在右边的html超链 接(s,v,g)上慢慢掠过,然后再让鼠标直接在图片上慢慢掠过,观察一下效果.(注意:"掠过"效果只能在IE4.0和NS3.0以上版本可获得)
通过改变一定的属性值,我们就能创建鼠标掠过的动态效果.
例如,在上面的SVG图像中的linkS元素"fill-opacity"属性值从"0"变化到".7",获得了鼠标掠过的动态变化.
这里的脚本script使用了与SVG元素关联的事件句柄.我们使用"鼠标掠入"mouseOver"和"鼠标掠出"mouseOut这两个事件,定义 了两个分离的过程函数,每一个事件分别的命名为 mouse_over_a 和 mouse_out_a.在SVG中的事件句柄调用就像在HTML中调用一样.例如:
就像在HTML中一样,事件句柄的只能被任何有效的JavaScript语言声明.特别地,它也能被JavaScript过程函数从上一个HTML文件 或当前的SVG文件本身引用.事件对象也能直接在JavaScript里被声明.这个对象包含了更多的事件属性,例如事件类型,鼠标位置等等.
在下面的例子中,鼠标掠过第一幅图像将触发过程函数操纵第二幅图像.注意,这里两个图像是相对分离的.将你的鼠标掠过图像下方标有数字的盒子,然后试着点击一下.
***附js
虽然交互作用相当的复杂,但建立一定的脚本语句,我们能够克服这一点.查看脚本请点击"查看JavaScript源文件".注意这里面有大量的函数和特 征我们在以前的例子中已经使用过.例如,使元素可见(特别应用在鼠标掠过时),操纵已经存在的元素和使他们产生持续的动态变化(前面 的"gradient_star"这个例子很好的描述了这样的控制).
