首先我们先创建一个svg整体布局，代码如下：

<!DOCTYPE html>

<html>

<head>

    <title>js操作svg实现整体缩放</title>

    <meta charset="utf-8">

</head>

<body>

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

        <g id="svgPanel">

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

            <circle fill="red" r="" cx="" cy=""></circle>

        </g>

    </svg>

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

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

</body>

</html>

js代码来控制svg整体的大小并且利用svg来绘制背景网格：

<script type="text/javascript">

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

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

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

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

    var height = ;

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

    svg.setAttribute("width",width);

    svg.setAttribute("height",height);

    //绘制网格

    drawGrid(gridSvg,width,height,gridLength);

    /**

     * 绘制网格

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

     * @param {Int} winWidth 区域宽度

     * @param {Int} winHeigth 区域高度

     * @param {Int} gridLength 网格大小

     */

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

        var childs = gridSvg.childNodes;

        //删除之前的网格节点，便于重绘

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

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

        }

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

            var attrs = {

                x1: i * gridLength,

                y1: ,

                x2: i * gridLength,

                y2: winHeight,

                stroke: "#ddd"

            };

            var line = resetSVG("line", attrs);

            svgBackground.appendChild(line);

        };

        for (var i = , len = Math.ceil(winHeight / gridLength); i <= len; i++) {

            var attrs = {

                x1: ,

                y1: i * gridLength,

                x2: winWidth,

                y2: i * gridLength,

                stroke: "#ddd"

            };

            var line = resetSVG("line", attrs);

            svgBackground.appendChild(line);

        };

    }

    /**

     * 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 k in attrs) {

            element.setAttribute(k, attrs[k]);

        }

        return element;

    }

    /**

     * svg放缩

     * {Float} num 放缩的倍数

     */

    function zoom(num){

        scale *= num;

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

    }

</script>

这样我们就可以实现svg的整体放缩了，如下图：

当我们缩小时，背景网格也跟着缩小而不能填充整个画板，这不是我们想要的，做一下改动，修改zoom函数如下：

然后我们绑定鼠标滑轮事件来实现缩放，代码如下：

//绑定鼠标滑轮事件

if(document.addEventListener){

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

}

window.onmousewheel=document.onmousewheel=scrollZoom;

/**

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

 * {Object} e 事件对象

 */

function scrollZoom(e){

    e=e || window.event;

    //e.detail用来兼容 FireFox

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

}

效果如下：

js操作svg整体缩放的更多相关文章

  1. svg整体缩放至指定大小

    一.问题 svg画面跑在分辨率低的电脑上,导致不能完全显示. 二.要求 svg要能够根据电脑的屏幕大小自动缩放至适配电脑的尺寸. 三.实现 1.获取本机窗口高度.宽度 let clientWidth ...

  2. 原创 HTML5：JS操作SVG实践体会

    在工业信息化系统里,常常需要动态呈现系统的数据在一张示意图里,用于展现系统状态,分析结果等.这样用JavaScript操作svg 元素就有现实意义.本人近期做了一些实践,现分享一下. 需求: 你下面这 ...

  3. JS 操作svg画图

    背景: 一共有3个文件:svg文件,html文件,js文件. 有一个svg图,使用embed标签,引入到了html文件中 svg文件: <svg width="640" he ...

  4. JS控制SVG缩放+鼠标控制事件

    话不多说,直接上代码吧,不行你砍我... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  5. 【转】JavaScript操作SVG的一些知识

    原文:http://blog.iderzheng.com/something-about-svg-with-javascript/ 前阵子学习了一下SVG(Scalable Vector Graphi ...

  6. Node.js 操作Mongodb

    Node.js 操作Mongodb1.简介官网英文文档  https://docs.mongodb.com/manual/  这里几乎什么都有了MongoDB is open-source docum ...

  7. JS操作未跨域iframe里的DOM

    这里简单说明两个方法,都是未跨域情况下在index.html内操作b.html内的 DOM. 如:index.html内引入iframe,在index内如何用JS操作iframe内的DOM元素? 先贴 ...

  8. ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作

    ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作 .操作成功后刷新父页面 $this->assign('jumpUrl', "javascript:wi ...

  9. jquery.cookie.js 操作cookie实现记住密码功能的实现代码

    jquery.cookie.js操作cookie实现记住密码功能,很简单很强大,喜欢的朋友可以参考下.   复制代码代码如下: //初始化页面时验证是否记住了密码 $(document).ready( ...

随机推荐

  1. 贵州省网络安全知识竞赛个人赛Writeup

    首先拖到D盾扫描 可以很明显的看出来确实就是两个后门 0x01 Index.php#一句话木马后门 0x02 About.php#文件包含漏洞 都可以很直观的看出来非常明显的漏洞,第一个直接就是eva ...

  2. 用c写的简单的日历（学习模块划分）

    简单日历 ​ 主要目的是学习函数模块划分,成品大概是这样,加了一些花里胡哨的东西(/▽＼) ​ 分三个模块,主函数.c 显示.c 计算.c 与.h 文件 有两种实现方式,区别在于是否以数组在模块之间传 ...

  3. Java井字棋游戏

    试着写了一个井字棋游戏,希望各位能给予一些宝贵的建议. 一.棋盘类 package 井字棋游戏; public class ChessBoard { private int number; Perso ...

  4. 【2019南昌网络赛】B-Fire-Fighting Hero

    题目链接 分析 英雄方面很简单,跑一遍 Dijkstra 就行了,但是灭火团队就有点麻烦了. 这里可以借助一下最大流的建边来解决这个问题: 我们可以另外找一个点作为起点,然后建立从那个点到每一个团队的 ...

  5. 使用 NLTK 对文本进行清洗，索引工具

    使用 NLTK 对文本进行清洗,索引工具 EN_WHITELIST = '0123456789abcdefghijklmnopqrstuvwxyz ' # space is included in w ...

  6. 二维线段树 poj-2155

    题意:t组样例 ,输入 n,m,表示n*n的矩阵进行m次操作 ,C: 输入两个坐标 ,组成的矩形 进行取反操作 ,Q:对输的坐标位置输入其值. 思路:一开始想的是用1000(表示x轴)个线段树(对每段 ...

  7. java 中的字符串处理--正则表达式

    最近在做一些支付报文处理工作,需要从各种各样的报文中提取需要的信息比如(金额,订单号...),每个渠道报文各式各样,想要写一个通用的提取逻辑,于是就回顾java正则表达式的用法.当然我们可以自己写一些 ...

  8. [bzoj4472][树形DP] Salesman

    题目 原地址 解说 刚看完这道题感觉还是挺乱的,可能那时候脑子不太清醒,一度觉得自己又要重拾Tarjan了.当然最后还是发觉应该用树形DP. (以下dp[u]代表以u为根的包括自己在内的子树的最大利润 ...

  9. SpringApplication对象是如何构建的？ SpringBoot源码（八）

    注:该源码分析对应SpringBoot版本为2.1.0.RELEASE 本篇接 SpringBoot的启动流程是怎样的?SpringBoot源码(七) 1 温故而知新 温故而知新,我们来简单回顾一下上 ...

  10. C/C++知识总结 二 C/C++基础知识

    C/C++基础知识 C/C++基本格式说明 C/C++基本常识说明 C/C++基本格式说明 C语言基本格式 #include<stdio.h> //预处理文件 int main() //自 ...