首先我们先创建一个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. wxPython4.0.4关于我们

    源码地址:https://download.csdn.net/download/zy0412326/12154342 wxPython4改版后将AboutBox方特到adv包里面.如果想快速实现GUI ...

  2. shodan常用语法

    shodan常用命令: asn         区域自治编号 port        端口 org         ip所属组织机构 os          操作系统类型 http.html   网页 ...

  3. Happens-before先行发生原则

    简介 从JDK1.5,java使用新的JSR-133内存模型:JSR-133使用happens-before的概念来阐述操作之间的内存可见性:在JMM中,如果一个操作执行的结果需要对另一个操作可见,那 ...

  4. hdu1856 并查集

    题目链接:http://icpc.njust.edu.cn/Problem/Hdu/1856/ 题目就是要求并查集中各树的大小的最大值,我们只要在根节点处存树的大小就可以,合并也是合并根节点的数,最后 ...

  5. 【科创人独家】PingCAP黄东旭：想告诉图灵这个世界现在的样子

    创业是投己所好 科创人:作为技术圈内著名艺术青年,哪个瞬间会让您更开心,完成一段优美的代码或者乐谱?还是得到来自外界的欢呼与掌声? 黄东旭:在创业之前的很长一段时间里,完成一段代码.写完一首好曲子那一 ...

  6. Ubuntu环境下部署Django+uwsgi+nginx总结

    前言 这是我在搭建Django项目时候的过程,拿来总结记录,以备不时之需. 项目采用nginx+uwsgi的搭配方式. 项目依赖包采用requirements.txt文件管理的方式. 本地准备工作 确 ...

  7. PyTorch专栏（一）

    专栏目录: 第一章:PyTorch之简介与下载 PyTorch简介 PyTorch环境搭建 第二章:PyTorch之60min入门 PyTorch 入门 PyTorch 自动微分 PyTorch 神经 ...

  8. 推荐 | 7个你最应该知道的机器学习相关github项目

    欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/,学习更多的机器学习.深度学习的知识! 磐石 目录: 介绍 Person Blocker(人体自动遮挡) ...

  9. JavaScript DOM 事件模型

    JavaScript DOM 事件模型 JavaScript 是基于面向对象和事件驱动的一门语言,事件模型是 DOM 中至关重要的内容,理解事件驱动机制.事件反馈.事件冒泡.事件捕获以及事件委托能帮助 ...

  10. flex布局你真的搞懂了吗？通俗简洁，小白勿入~

    flex布局 用以代替浮动的布局手段: 必须先把一个元素设置为弹性容器://display:flex: 一个元素可以同时是弹性容器和弹性元素; 设为flex布局以后,子元素的float.clear和v ...