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

<!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. 【VS开发】MFC修改Opencv namedWindow的风格

    当在MFC中应用opencv的窗口来显示图片.希望namedWindow创建的窗口能根据需要改变风格: //by dongchunxiao cv::namedWindow("windows1 ...

  2. Django_图片的上传下载显示配置

    图片上传的配置 image = models.ImageField(upload_to='org/%Y/%m',...) upload_to默认是上传到项目的'MEDIA_ROOT/org/%Y/%m ...

  3. 捕捉AVPlayerViewController 系统原生工具栏的出现、隐藏事件

    需求前提 1. app内轻量级的视频播放功能,故不希望引入“过度开发.过度封装”的第三方控件组,使用原生的AVPlayerViewController 2. 工具栏有新增控件需求,如下载按钮 等 3. ...

  4. QPS、TPS和系统吞吐量

    QPS:Queries Per Second,每秒查询率.是一台服务器每秒能够相应的查询次数,是对一个特定的查询服务器在规定时间内所处理流量多少的衡量标准. TPS:Transactions Per ...

  5. [转帖]年经贴: ARM将为苹果开发高性能CPU核心 取代笔记本x86处理器？

    ARM将为苹果开发高性能CPU核心 取代笔记本x86处理器? https://www.cnbeta.com/articles/tech/899421.htm . 之前苹果的哥们说过 谁特别在意自己的软 ...

  6. AVR单片机教程——闪烁LED

    上次我们把LED点亮了.你可能已经试过把 LED_RED 换成其他灯,也可能已经用 led_on() 把所有LED一起点亮了.但是LED点亮以后,程序就退出了,之后LED一直没有暗,直到没有供电.这一 ...

  7. jquery封装的方法

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  8. react组件懒加载

    组件懒加载方式-:react新增的lazy const Alert = lazy(() => import('./components/alert')); export default func ...

  9. shell 学习笔记5-shell-if语句

    一.if条件语句 1.语法 1)单分支结构 第一种 if <条件表达式> then 指令 fi 第二种 if <条件表达式>:then 指令 fi 上文的"<条 ...

  10. windows下mysql表名区分大小写

    windows下mysql默认是不区分大小写的,但是linux会区分大小写 如何让windows下mysql区分大小写呢? 修改 my.ini 里面的mysqld部分 #区分大小写 lower_cas ...