首先我们先创建一个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. Android 引导页的代码

    布局代码 <android.support.v4.view.ViewPager android:id="@+id/viewpage" android:layout_width ...

  2. DIV常用属性大全

    目录 一.属性列表 二.常用属性 三.一些特殊效果 四.定位和控制 一.属性列表 color : #999999 文字颜色 font-family : 宋体 文字字型 font-size : 10pt ...

  3. 北京大学公开课《数据结构与算法Python版》

    之前我分享过一个数据结构与算法的课程,很多小伙伴私信我问有没有Python版. 看了一些公开课后,今天特向大家推荐北京大学的这门课程:<数据结构与算法Python版>. 课程概述 很多同学 ...

  4. CF1327D Infinite Path 题解

    原题链接 太坑了我谔谔 简要题意: 求一个排列的多少次幂能达到另一个排列.排列的幂定义见题.(其实不是新定义的,本来就是这么乘的) 很显然,这不像快速幂那样可以结合律. 既然这样,就从图入手. 将 \ ...

  5. MATLAB 颜色图函数（imagesc/scatter/polarPcolor/pcolor）

    2维的热度图 imagesc imagesc(x, y, z),x和y分别是横纵坐标,z为值,表示颜色 imagesc(theta,phi,slc); colorbar xlabel(); ylabe ...

  6. 算法学习 八皇后问题的递归实现 java版 回溯思想

    1.问题描述 八皇后问题是一个以国际象棋为背景的问题:如何能够在 8×8 的国际象棋棋盘上放置八个皇后,使得任何一个皇后都无法直接吃掉其他的皇后?为了达到此目的,任两个皇后都不能处于同一条横行.纵行或 ...

  7. 吴恩达最新TensorFlow专项课程开放注册，你离TF Boy只差这一步

    不需要 ML/DL 基础,不需要深奥数学背景,初学者和软件开发者也能快速掌握 TensorFlow.掌握人工智能应用的开发秘诀. 以前,吴恩达的机器学习课程和深度学习课程会介绍很多概念与知识,虽然也会 ...

  8. 机器学习算法系列：FM分解机

    在线性回归中,是假设每个特征之间独立的,也即是线性回归模型是无法捕获特征之间的关系.为了捕捉特征之间的关系,便有了FM分解机的出现了.FM分解机是在线性回归的基础上加上了交叉特征,通过学习交叉特征的权 ...

  9. C++ STL 常用容器之 stack

    C++ STL Container--Stack 栈是一种先进后出(LIFO)的数据结构,限制只能在一端完成插入和删除操作,这一端叫做栈顶(top),另一端即为栈底(bottom).C++ STL(S ...

  10. Java 类加载器解析及常见类加载问题

    Java 类加载器解析及常见类加载问题 java.lang.ClassLoader 每个类加载器本身也是个对象--一个继承 java.lang.ClassLoader 的实例.每个类被其中一个实例加载 ...