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

<!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. Python文件的读取写入操作

    一.打开文件.关闭文件操作 想要读取文件或是写入文件,第一步便是打开文件,最后一步便是关闭文件.这里介绍两种打开(关闭)文件的方式: 1.open()方法 f=open(file_name[,acce ...

  2. nnexus3 破解密码

    主要步骤如下: 1.停服 2.进入OrientDB控制台:java -jar /usr/local/nexus/lib/support/nexus-orient-console.jar 3.在控制台执 ...

  3. 【机器学习】attention机制

    参考: 1.https://lilianweng.github.io/lil-log/2018/06/24/attention-attention.html

  4. [概率DP][消元法][CF24D]损坏的机器人

    Description 有一只坏了的机器人站在一个\(n\times m\)的网格里,初始位置在\((x,y)\).现在每个单位时间内它会随机选左右下三个方向走,如果它随机的方向会走出网格就不会往这个 ...

  5. git rebase VS git merge

    git rebase VS git merge 写在前面 如果你不能很好的应用 Git,那么这里为你提供一个非常棒的 Git 在线练习工具 Git Online(回复公众号「工具」,获取更多内容) , ...

  6. dockerui 安装

    meiya@meiya:~$ docker pull abh1nav/dockerui Using default tag: latest latest: Pulling from abh1nav/d ...

  7. 洛谷 题解 UVA247 【电话圈 Calling Circles】

    [题意] 如果两个人互相打电话(直接或者间接),则说他们在同一个电话圈里.例如,\(a\)打给\(b\),\(b\)打给\(c\),\(c\)打给\(d\),\(d\)打给\(a\),则这四个人在同一 ...

  8. scrapy工具创建爬虫工程

    1.scrapy创建爬虫工程:scrapy startproject scrape_project_name >scrapy startproject books_scrapeNew Scrap ...

  9. flask返回数据类型

    服务器这种后台返回的数据只能是string,json或者是文件类型,对应Html的解析文件类型 无法返回自定义的元组,只能返回规定好的元组,说白了只第一个元素有效 所有返回前台的内容其实都应该是Res ...

  10. Gulp-构建工具 相关内容整理

    Gulp- 简介 Automate and enhance your workflow | 用自动化构建工具增强你的工作流程 Gulp 是什么? gulp是前端开发过程中一种基于流的代码构建工具,是自 ...