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

<!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. 【译】Vue源码学习（一）：Vue对象构造函数

    本系列文章详细深入Vue.js的源代码,以此来说明JavaScript的基本概念,尝试将这些概念分解到JavaScript初学者可以理解的水平.有关本系列的一些后续的计划和轨迹的更多信息,请参阅此文章 ...

  2. Vue简单基础 + 实例 及 组件通信

    vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  3. Kafka运维大全来了！优化、监控、故障处理

    Kafka运维大全来了!优化.监控.故障处理……   Kafka概念 Kafka是分布式发布-订阅消息系统.它最初由LinkedIn公司开发,之后成为Apache项目的一部分.Kafka是一个分布式的 ...

  4. 高级UI-CardView

    CardView是在Android 5.0推出的新控件,为了兼容之前的版本,将其放在了v7包里面,在现在扁平化设计潮流的驱使下,越来越多的软件使用到了CardView这一控件,那么这篇文章就来看看Ca ...

  5. 方法重载overload与方法重写overwrite

    方法重载overload: 在同一个类中,出现相同的方法名,与返回值无关,参数列表不同:1参数的个数不同 2参数类型不同 在调用方法时,java虚拟机会通过参数列表来区分不同同名的方法 方法重写ove ...

  6. Maven工具-简介

    Maven工具-简介 定义 ①maven是一款服务于java平台的自动化构建工具 make→Ant→maven→Gradle ②构建 [1]概念:以"java源文件"." ...

  7. Lombok - 使用注解让你的JavaBean变得更加简洁

    Lombok - 工具简介: Lombok是一个编译时注释预处理器,有助于在编译时注入一些代码.Lombok提供了一组在开发时处理的注释,以将代码注入到Java应用程序中,注入的代码在开发环境中立即可 ...

  8. （8）Spring Boot 与数据访问

    文章目录 简介 整合基本的JDBC与数据源 整合 druid 数据源 整合 mybatis 简介 对于数据访问层,无论是 SQL 还是 NOSQL ,Spring Boot 默认都采用整合 Sprin ...

  9. Python--递归函数实现：多维嵌套字典数据无限遍历

    原创:多层嵌套字典无限遍历,实现当value值以特殊字符$开头,并且等于某项值时,用随机函数替换该参数 """处理前的字典{'patient': {'avatarPic' ...

  10. Scala 数组操作之数组转换

    使用yield和函数式编程转换数组 // 对Array进行转换,获取的还是Array val a = Array(1, 2, 3, 4, 5) val a2 = for (ele <- a) y ...