首先我们先创建一个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. 《面试经典系列》- MySQL数据库存储引擎

    一.MySQL有多少种存储引擎? 在MySQL5之后,支持的存储引擎有十多个,但是我们常用的就那么几种,而且,默认支持的也是 InnoDB. 通过命令:show engines \g,我们可以查看到当 ...

  2. 洛谷 P5221 Product 题解

    原题链接 庆祝!第二道数论紫题. 推式子真是太有趣了! \[\prod_{i=1}^n \prod_{j=1}^n \frac{\operatorname{lcm}(i,j)}{\gcd(i,j)} ...

  3. Apache服务器故障排除攻略

    Apache服务器故障排除攻略 应用服务器Apache浏览器配置管理网络应用  随着网络技术的普及.应用和Web技术的不断完善,Web服务已经成为互联网上重要的服务形式之一.原有的客户端/服务器模式正 ...

  4. OpenCV-Python 立体图像的深度图 | 五十二

    目标 在本节中, 我们将学习根据立体图像创建深度图. 基础 在上一节中,我们看到了对极约束和其他相关术语等基本概念.我们还看到,如果我们有两个场景相同的图像,则可以通过直观的方式从中获取深度信息.下面 ...

  5. 斯坦福经典AI课程CS 221官方笔记来了！机器学习模型、贝叶斯网络等重点速查...

    [导读]斯坦福大学的人工智能课程"CS 221"至今仍然是人工智能学习课程的经典之一.为了方便广大不能亲临现场听讲的同学,课程官方推出了课程笔记CheatSheet,涵盖4大类模型 ...

  6. WeChat-SmallProgram：引用页面调用组件内的方法

    如何创建组件 及 使用 这里不在多说:请参考之前文章 如何定义一个组件 自定义select下拉选项框组件使用 引用组件: <sub-unit-select id="init" ...

  7. spring 事务源码赏析（二）

    我们在spring 事务源码赏析(一) 中分析了spring事务是如何找到目标方法,并如何将事务的逻辑织入到我们的业务逻辑中.本篇我们将会看到spring事务的核心实现: 1.事务传播机制的实现 2. ...

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

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

  9. MATLAB——元胞数组

    一. 1.元胞数组的创建 >> a={;ones(,),:} a = ] [2x3 ;ones(,),:} >> b=[{};{ones(,)},{:}] b = ] [2x3 ...

  10. Infrared-Visible Cross-Modal Person Re-Identification with an X Modality (AAAI 2020)

    Infrared-Visible Cross-Modal Person Re-Identification with an X Modality (AAAI 2020) 1. Motivation 可见 ...