话不多说，直接上代码吧，不行你砍我。。。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>js控制SVG缩放</title>

</head>

<body>

    <svg id="svg" style="background-color: #FAFAFA;">

        <g id="svgPanel">

            <g id="grid"></g>

            <defs>

                <path id="path1" d="M300,200 a1,1 0 0,0 100,0" />

            </defs>

            <text x="10" y="100" style="fill:green;">

                <textPath xlink:href="#path1">啦啦啦啦啦啦啦啦啦啦</textPath>

            </text>

        </g>

    </svg>

    <button onclick="zoom(1.1)">放大</button>

    <button onclick="zoom(0.9)">缩小</button>

    <script type="text/javascript">

        var svg = document.getElementById('svg');

        var svgPanel = document.getElementById('svgPanel');

        var gridSvg = document.getElementById('grid');

        var width = 800;  // 设置svg整体的宽和高

        var height = 400;

        var gridLength = 20;  // 定义网格的大小

        svg.setAttribute('width', width);

        svg.setAttribute('height', height);

        // 绘制网格

        drawGrid(gridSvg, width, height, gridLength);

        /*

            * 绘制网络

            * @param {Object} svgBackground 绘制网格对象

            * @param {Int} winWidth 区域宽度

            * @param {Int} winHeight 区域高度

            * @param {Int} gridLength 网格大小

        */

        function drawGrid(svgBackground, winWidth, winHeight, gridLength) {

            var childs = gridSvg.childNodes;

            // 删除之前的网格节点,便于绘制

            for (var i = childs.length - 1; i>= 0; i--){

                svgBackground.removeChild(childs.item(i));

            }

            for (var j = 0,len = Math.ceil(winWidth / gridLength); j < len; j++){

                var attrs = {

                    x1 : j * gridLength,

                    y1 : 0,

                    x2 : j * gridLength,

                    y2 : winHeight,

                    stroke : '#add'

                };

                var line = resetSvg('line', attrs);

                svgBackground.appendChild(line);

            }

            for (var k = 0, len2 = Math.ceil(winHeight / gridLength); k <= len2; k++){

                var attrs2 = {

                    x1 : 0,

                    y1 : k * gridLength,

                    x2 : winWidth,

                    y2 : k * gridLength,

                    stroke : '#add'

                };

                var line2 = resetSvg('line', attrs2);

                svgBackground.appendChild(line2)

            }

        }

        /*

            * js创建svg元素

            * @param {String} tag svg的标签名

            * @param {Object} svg元素的属性

        */

        function resetSvg(tag, attrs) {

            var element = document.createElementNS('http://www.w3.org/2000/svg', tag);

            for (var g in attrs){

                element.setAttribute(g, attrs[g])

            }

            return element;

        }

        /*

            * svg缩放

            * {Float} num 收缩的倍数

        */

        var scale = 1;

        function zoom(num) {

            scale *= num;

            svgPanel.setAttribute('transform', 'scale(' + scale + ')');

            drawGrid(gridSvg, width*(1/scale), height*(1/scale), gridLength);

        }

        // 绑定鼠标滑轮

        if (document.addEventListener){

            document.addEventListener('DOMMouseScroll', scrollZoom, false);

        }

        window.onmousewheel = document.onmousewhell = scrollZoom;

        /*

        * 滑轮滚动处理事件，向上滚动放大

        * {Object} e 事件对象

        */

        function scrollZoom(e) {

            e = e || window.event;

            // e.detail用来兼容FireFox

            e.wheelDelta>0 || e.detail>0?zoom(1.1):zoom(0.9);

        }

    </script>

</body>

</html>

JS控制SVG缩放+鼠标控制事件的更多相关文章

  1. JS/jquery实现鼠标控制页面元素显隐

    最近网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码.像这种鼠标事件控制页面元素显隐的情况,码农们会经常遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一起归纳一下. ...

  2. THREE.js代码备份——webgl - geometry - dynamic(模拟海浪，通过时间（毫秒）来控制平面点的运动模拟海浪，鼠标控制写在另外的js中)

    HTML: <!DOCTYPE html> <html lang="en"> <head> <title>three.js webg ...

  3. THREE.js代码备份——线框cube、按键、鼠标控制

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - g ...

  4. GSAP JS基础教程--动画的控制及事件

    好多天没有写无博文啦,今天无聊就再写一下! 今天要讲的是TweenLite的一些事件以及,TweenLite动画的控制,TweenMax类似,请自行参考官方文档:http://api.greensoc ...

  5. VC 鼠标滚轮事件控制绘图的问题

    问题描述: 在MFC中绘制数据曲线,通过鼠标滚轮来进行放大缩小操作.在使用滚轮事件时,发现如果数据量较大,会出现卡顿. 解决方案: 鼠标滚轮事件会进行重复绘图,考虑在鼠标滚轮结束之后再重绘: 在鼠标滚 ...

  6. js操作svg整体缩放

    首先我们先创建一个svg整体布局,代码如下: <!DOCTYPE html> <html> <head> <title>js操作svg实现整体缩放< ...

  7. 3D网页小实验-基于Babylon.js与recast.js实现RTS式单位控制

    一.运行效果 1.建立一幅具有地形起伏和不同地貌纹理的地图: 地图中间为凹陷的河道,两角为突出的高地,高地和低地之间以斜坡通道相连. 水下为沙土材质,沙土材质网格贴合地形,河流材质网格则保持水平. 2 ...

  8. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  9. OpenGl 导入读取多个3D模型 并且添加鼠标控制移动旋转

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11627508.html 前言: 因为接下来的项目需求是要读取多个3D模型,并且移动拼接,那么我 ...

随机推荐

  1. 微信小程序 之页面跳转

    wxml: <view><button bindtap="abc" >跳转</button></view> js: abc: (e) ...

  2. 钩子(hook)

    钩子(hook)编程     钩子(hook)编程 一.钩子介绍 1.1钩子的实现机制 钩子英文名叫Hook,是一种截获windows系统中某应用程序或者所有进程的消息的一种技术.下图是windows ...

  3. Haproxy+keepalived高可用集群实战

    1.1  Haproxy+keepalived高可用集群实战 随着互联网火热的发展,开源负载均衡器的大量的应用,企业主流软件负载均衡如LVS.Haproxy.Nginx等,各方面性能不亚于硬件负载均衡 ...

  4. （简单实用）Android支付宝商家收款语音播报

    支付宝商家收款时,语音提示:支付宝收款xxx元,当时觉得这东西还挺有趣的,第一时间通知给商家,减少不必要的纠纷,节约时间成本,对商家对用户都挺好的. 在商家版有这样收款播报的功能,我觉得挺好的. 对列 ...

  5. [转帖]LINUX下使用rinetd端口转发

    LINUX下使用rinetd端口转发 https://www.iteye.com/blog/lvinie-1167701 . 本来想自己写一下 发现没必要. 并且原作者提供了pan.baidu.com ...

  6. Mybatis笔记1

    Mybatis 持久层框架,数据访问层 mybatis是一个优秀的基于java的持久层框架,它内部封装了jdbc,使开发者只需要关注sql语句本身,而不需要花费精力去处理加载驱动,创建连接,创建sta ...

  7. 2019.10.16&17小结

    话说也蛮久没写小结了,主要这两次考试失分严重,还是总结下吧. 10.16 T1 小奇挖矿2 100/0 [题目背景] 小奇飞船的钻头开启了无限耐久+精准采集模式!这次它要将原矿运到泛光之源的矿石交易市 ...

  8. docker 实践九：docker swarm

    介绍了 docker 三剑客中的 docker-machine 和 docker-compose 之后,就剩下一个 docker swarm 了.那本篇的主角就是它了. 注:环境为 CentOS7,d ...

  9. [tomcat] 连接池参数maxActive、maxIdle 、maxWait 等

    maxActive 连接池支持的最大连接数,这里取值为20,表示同时最多有20个数据库连接.设 0 为没有限制.maxIdle 连接池中最多可空闲maxIdle个连接 ,这里取值为20,表示即使没有数 ...

  10. 将网站升级为https并自动续期Https证书。

    Let's Encrypt Let's Encrypt 是一个由Internet Security Research Group (互联网安全研究组)提供的免费,自动化和开放的证书颁发机构. 它秉承着 ...