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

<!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. 【ARM-Linux开发】ctrl-xxx的对应的signal含义

    ctrl-c 发送 SIGINT 信号给前台进程组中的所有进程.常用于终止正在运行的程序.ctrl-z 发送 SIGTSTP 信号给前台进程组中的所有进程,常用于挂起一个进程.ctrl-d 不是发送信 ...

  2. IdentityServer4 学习三

    ClientCredentials客户端类型实现 客户端应用向IdentityServer请求AccessToken,IdentityServer验证通过把AccessToken返回给客户端应用,客户 ...

  3. todo...git ssh http的区别

    todo...git ssh http的区别 https://www.jianshu.com/p/2cced982009f https://www.cnblogs.com/skating/p/6296 ...

  4. 消息中间件——RabbitMQ（十）RabbitMQ整合SpringBoot实战！（全）

    前言 1. SpringBoot整合配置详解 publisher-confirms,实现一个监听器用于监听Broker端给我们返回的确认请求:RabbitTemplate.ConfirmCallbac ...

  5. sublime自动格式化方法

    Sublime 工具自带代码格式化的功能,但在某些场景下格式化代码后并不是我们想要的代码格式,且是点击保存ctrl+s才触发的格式代码事件,so,为关闭点击ctrl+s格式代码,我们需要改命令 sav ...

  6. golang使用一个二叉树来实现一个插入排序

    思路不太好理解,请用断点 package main import "fmt" type tree struct { value int left, right *tree } fu ...

  7. NIO堆外内存与零拷贝

    重点: 1.0拷贝需要系统支持. 普通内存模型: java线程内存 --> 操作系统内存 --> 硬盘 直接内存模型: java --> 操作系统内存 --> 硬盘 两者对比, ...

  8. csredis

    源码地址:https://github.com/2881099/csredis 1.增加了 CSRedisClient 现实集群与连接池管理,和 RedisHelper 静态类快速上手 //普通模式 ...

  9. springboot_3

    1. 返回数据与返回页面 在写web项目的时候,controller里的返回值一般分为两种,一种是返回页面,也就是ModeAndView,另一种是直接返回数据,比如json格式的数据. 返回一个页面, ...

  10. kafka的安装及使用（单节点）

    介绍了linux环境下,kafka 服务的安装与配置 安装 jdk 环境 下载 kafka 源码包放到服务器,解压 开启 zookeeper 开启 kafka server 创建主题 开启生产者 开启 ...