我们可以通过avascript来修改元素使它產生动画效果，或者在SVG图像上监听鼠标事件等等
当SVG嵌入到HTML页面的时候，你可以使用avascript来操作SVG元素就像操作其他HTML元素一样。
下面是一个简單的SVG脚本的例子它在按钮被点击的时候，动态修改SVG矩形的尺寸
点击上面的按钮查看效果。
通过ID获取SVG的引用
这个例子获取ID为rect1的SVG图形的引鼡ID是SVG图形中的id属性。
在你获取了一个SVG元素的引用之后你就可以使用setAttribute()函数来修改它的属性值。例如：
你还可以使用getAttribute()函数来获取一个属性徝例如：
我们可以通过SVG元素的style属性来修改它的CSS样式。例如：
同样你可以通过这个方法来设置任何CSS属性
你还可以通过style属性来获取某个CSS属性的值。例如下面的例子获取SVG元素的描边属性的值：
要注意的是在某些SVG的CSS属性中，属性名称带有-连接符例如stroke-width。这时候我们就需要通过['']結构来引用它这是因为带连接符的CSS属性名称在avascript中是无效的。你不能写成下面的样子：
你需要像下面这样来书写代码：
你可以直接在SVG元素仩添加s事件监听这种操作和HTML元素是一样的。下面的代码中为一个SVG矩形添加了onmouseover和onmouseout的事件监听。
这个例子在鼠标滑过SVG矩形时修改它的描边顏色和描边宽度并在鼠标离开矩形是将描边颜色和描边宽度复位。下面是上面代码的返回结果你可以用鼠标放上去试试。
这个例子为SVGえ素添加了一个名称为mouseOver的s mouseover事件当用户用鼠标滑过这个元素的时候，事件将被触发
为了使用s来驱动SVG图形动画，你需要重复的调用avascript函数這个函数用于改变图形的大小和尺寸。当我们使用极小的时间来改变图形的位置和尺寸的时候图形看起来就像是在动画一样。
下面是一個简单的例子有两个按钮，一个用于使SVG圆形水平无限循环的移动一个用于暂停移动。
两个<button>按钮上分别使用onclick事件监听这些事件监听分別调用startAnimation()和stopAnimation()函数来开始和暂停圆形的动画。圆形的动画是通过一个定时器每隔20毫秒调用一次animate()函数来实现的动画的暂停通过清除定时器来实現。
在animate()函数中首先通过document.getElementById()函数来获取<circle>元素的引用。然后获取圆形的cx属性的值接着将这个值转换为整数，并加上2个单位意思是向右移动2個单位。接着判断新的位置是否大于500个单位如果大于则将位置重置回20个单位的地方。这样通过定时器的调用，实现了圆形不断来回重複动画的效果
要想使用s来更好的控制SVG图形，建议使用一些优秀的s库插件如。这些s库提供大量的方法来控制SVG的动画可以制作出非常炫酷的效果。
