使用svg标签 解决实现图片的放大，缩小，和拖拽效果的问题。

svg标签我就不做细致的解释了，直接看问题。

第一步

1.首先我们要实现放大，缩小，和拖拽的前提是把图片利用svg显示。

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="150"></svg>

这样就可以直接加载svg文件格式的图片。

2.那如果不是svg格式的图片，我们还可以使用img标签加载图片。

<svg id="mySvg" width="730" height="588" >
   <image width="730" id="Image" src="dfd.png"/>
</svg>

上面的图片路径是随便写的。

这样我们就完成了第一步，可以开心一下。

第二步

1.加载完成之后我们就可以去实现放大和缩小的功能了。实际上放大和缩小的功能差不多，就拖拽效果比较难实现一点。

2.说那么多，我们怎么去实现呢？这里我们就得提到svg自带的viewBox属性了。viewBox属性就跟我们手机截图的那个截图框差不多。放大就是把这个viewbox的长宽缩小，这样我们看到的图片就会像放大了一样，而缩小就相反。拖拽的话，等把放大和缩小功能实现之后，再去介绍。

3.那viewBox怎么用呢？话不多说，直接上代码。

<svg id="mySvg" width="730" height="588" viewBox="0,0,730,588" >
   <image width="730" id="Image"/>
</svg>

4.这段代码表示这个”截图框“的大小和svg是一样大的，所以就不会有缩小和放大的效果。但是当我们把viewBox的属性改成   "0,0,315,294"  时，我们就会发现图片被放大两倍了。原因就是”截图框“变小了所以看到的内容就变大了。viewBox的前两个属性是截图框的位置，而后面的两个属性是”截图框“的大小。所以缩小，放大就是改变viewBox后面两个属性就好。大家可以去创建一个svg试一试。只要后面监听鼠标的滚动事件，向上就是把viewBox的后两个属性变小就会实现放大效果，线下就是把viewBox的后两个属性变大。大家可以参考我的代码试一试（只有js代码）。

<script>
   let svg=document.getElementById("mysvg")
   
   svg.addEventListener("mousewheel",function(e){
            if(e){
                if(e.wheelDelta>0){
                    console.log('向上滚动')
                    if(ChuShiDaXiaoX>150&&ChuShiDaXiaoY>120){             svg.setAttribute('viewBox',`${YuanDianX+=1},${YuanDianY+=1},${ChuShiDaXiaoX-=10},${ChuShiDaXiaoY-=8}`)
                        //YuanDianY是我定义的变量专门用来改变”截图框“的位置的。
                    }
                }

                if(e.wheelDelta<0){
console.log('向下滚动')
svg.setAttribute('viewBox',`${YuanDianX-=1},${YuanDianY-=1},${ChuShiDaXiaoX+=10},${ChuShiDaXiaoY+=8}`)
                }
            }
        })
</script>

5.然后就到我们的拖拽效果的实现了。拖拽的实现只需要改变我们的viewBox前两个属性就可以了，viewBox的第一个属性是svg框的距离图片左上角的x，第二个是y 。（可能我的表达不是很清楚，大家不理解可以去搜一下  嘿嘿嘿）。但是我们得转换才能正确的是像拖拽效果。

 这是我自己画的实现拖拽效果的坐标转换示意图。 我这边实现拖拽使用左边鼠标按下拖动的。

A点：表示鼠标一开始按下的点的位置。

B点：表示鼠标松开后的点的位置。

A点到放大后的图片的最左边的距离就是我们viewBox中的第一个属性x ，距离最上边那就是第二个属性y。所以我们要移到B点其实只是增大了鼠标的到svg框的距离。

上代码：

<svg width="730" height="588" id="mySvg">
    <image src="sswd.png" width="730" id="image"/>
</svg>


<script>
   let svg=document.getElementById('mySvg');
   let StartWeiZhiXinXi=[]; //初始点的”截图框“到放大后的图片左上角的距离

   let startPoint=[]; //初始点的鼠标距离”截图框“的左上角的距离
   let tuoZhuai=false;//拖拽状态

   //截图框的大小，也就是缩放的程度
   let ChuShiDaXiaoX=0;
   let ChuShiDaXiaoY=0;

   //鼠标按下事件
   svg.addEventListener('mousedown',function(){ 
            StartWeiZhiXinXi=[];
            startPoint=[];
            tuoZhuai=true;
            startPoint.push({x:event.offsetX*(ChuShiDaXiaoX/730),y:event.offsetY*(ChuShiDaXiaoY/588)})
            StartWeiZhiXinXi.push({x:WeiZhiXinXiX,y:WeiZhiXinXiY})
    })

    //鼠标移动事件
    svg.addEventListener("mousemove",function(){
       if(tuoZhuai){
YuanDianX=startPoint[0].x-event.offsetX*(ChuShiDaXiaoX/730)+StartWeiZhiXinXi[0].x
                    YuanDianY=startPoint[0].y-event.offsetY*(ChuShiDaXiaoY/588)+StartWeiZhiXinXi[0].y
                    svg.setAttribute('viewBox',`${YuanDianX},${YuanDianY},${ChuShiDaXiaoX},${ChuShiDaXiaoY}`)
                    WeiZhiXinXiX=YuanDianX
                    WeiZhiXinXiY=YuanDianY
       }


    })

    //鼠标松开事件
    svg.addEventListener('mouseup',function(){
         tuoZhuai=false;
    })

    //鼠标移出事件
    svg.addEventListener('mouseleave',function(){
         tuoZhuai=false;
    })


     //鼠标滚轮事件
     svg.addEventListener("mousewheel",function(e){
            if(e){
                if(e.wheelDelta>0){
                    console.log('向上滚动')
                    if(ChuShiDaXiaoX>150&&ChuShiDaXiaoY>120){
                        svg.setAttribute('viewBox',`${YuanDianX+=1},${YuanDianY+=1},${ChuShiDaXiaoX-=10},${ChuShiDaXiaoY-=8}`)
                        WeiZhiXinXiX=YuanDianX
                        WeiZhiXinXiY=YuanDianY
                    }
                }

                if(e.wheelDelta<0){
                    console.log('向上滚动')
                    if(ChuShiDaXiaoX<730&&ChuShiDaXiaoY<588){
                        svg.setAttribute('viewBox',`${YuanDianX-=1},${YuanDianY-=1},${ChuShiDaXiaoX+=10},${ChuShiDaXiaoY+=8}`)
                        WeiZhiXinXiX=YuanDianX
                        WeiZhiXinXiY=YuanDianY
                    }
                }
            }
        })

    

</script>

 欧克，这个编写代码的编辑器有点垮，代码有点乱了。大家可以复制下来重新排版一下。

感谢观看！！！