怎么在网页中通过JAVAscript控制SVG图像放大缩小

 

首先先说明一下我想做出的网页效果，基本上和地图一样，将鼠标放在图像上之后，滚动鼠标滑轮可以实现图片放大和缩小，按下鼠标后移动鼠标可以实现图像的移动，具体效果去百度（谷歌）地图体验一下就知道了。

当然，上面的只是我的初步设想，在实现过程中就出问题了，下面我把自己遇到的困难和解决方法说一下，由于这是公司项目，涉及到知识产权和保密问题，我就只说思想，不给代码，代码就自己写吧。

问题一：鼠标滑轮时间的多浏览器支持问题。

浏览器判断鼠标滑轮的滚动是通过鼠标滑轮滚动时传递的delta值来判断的：在IE内核的浏览器中，delta取值是正负120，非IE内核的浏览器中的取值是正负3。并且，在不同的浏览器中，滑轮触发事件的执行次数是不一样的：在IE内核的浏览器中，滑轮每滚动一次，绑定的事件就会触发两次；非IE内核浏览器中，滑轮每滚动一次，事件只触发一次，当然，这才是我们想要的效果。

解决方法：使用jquery的mousewheel插件，完美地解决了鼠标滑轮事件的多浏览器支持问题。

问题二：把svg图像放到网页上的一个div元素里面之后（使用embed标签，假设设置的图像大小和div的大小相同），那么svg图像就会屏蔽掉div的mousedown、mousemove、mouseup事件，这样就不能实现图像的移动了。这个问题纠结了我好久，一直都没想到解决办法，网上也没有找到， 我才想到写出来以后有人用的话可以直接看。

解决方法：新建一个div，设置position属性为absolute，将这个div覆盖到放置svg图像的div上面，将mousedown、mousemove、mouseup事件绑定到这个div上(其实这个问题很好解决的，我也不知道怎么回事，当初居然没想到）。

问题三：如何实现用javascript对svg图像的控制。

公司的要求是直接引用一个已经存在的svg图像，也就是说，不能改动svg图像的任何东西，这样就不能使用网上一些通过对transform、g标签的修改来实现对svg的控制了，好在我找到了一篇经典svg教程，这篇文章详细地说明了怎么在网页中通过javascript控制图像的方法，虽然例子跟我的这个项目没关系，但是思想绝对是正确的，如果想看这篇文章的话，直接搜“经典svg教程”，我是在百度文库下载的，同时我也传到csdn上了，如果要下载的话认准作者AndrewWatt（我是看的这个，其他的不知道）。

这样，基本上难题都已经解决了，至于移动问题，在mousedown、mousemove、mouseup事件的触发中分别获得坐标，经过计算后移动设置视区的相应坐标就可以了，这篇文章只是提供一个思想，也是我工作的一个备忘吧。