首先我们先创建一个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. [SQL]3.26--175+176+177+178+180+181+182

    175.组合两个表 题目 Code SELECT FirstName, LastName, City, State FROM Person LEFT JOIN Address --由于需要Person ...

  2. Volatile关键字回顾之线程可见性

    java中,volatile关键字有两大作用: 1.保证线程的可见性 2.防止指令重排序 这篇文章主要通过典型案例,体现可见性这一特性. 概念: java中,堆内存是线程共享的.而每个线程,都应该有自 ...

  3. 国际惯例，Hello World。

    c语言: #include<stdio.h> int main() { printf("Hello World!\n"); ; } C++: #include<i ...

  4. 控制台报错Cause: org.xml.sax.SAXParseException; lineNumber: 4; columnNumber: 78; 元素类型 "select" 必须后跟属性规范 ">" 或 "/>"

    首先我的控制台报错是这样的,我找了一下原因看到是第四行的错误: 它说元素select后面必须跟属性规范">""/>"但是我把我眼睛都快丑瞎了都没发现 ...

  5. mysql-8.0.19-winx64下载

    mysql-8.0.19-winx64 下载链接 提取码:m7qp

  6. Spring----注释----开启Annotation <context:annotation-config> 和 <context:component-scan>诠释及区别

    来源:http://www.cnblogs.com/leiOOlei/p/3713989.html <context:annotation-config> 和 <context:co ...

  7. 120prop-python3.7　读写.properties文件

    120prop-python3.7 读写.properties文件 转载 nature_ph 最后发布于2019-07-30 10:12:05 阅读数 229 收藏 发布于2019-07-30 10: ...

  8. List<Object>转List<T>

    今天遇到一个麻烦,公司有个项目用了一个封装dao的模板,他妈的不管是查一条数据的方法,还是查一个集合数据的方法,全都返回Object或List<Object> 由于对象是Object根本不 ...

  9. 双连通分量 Road Construction POJ - 3352

    @[双连通分量] 题意: 有一个 n 个点 m 条边的无向图,问至少添加几条边,能让该图任意缺少一条边后还能相互连通. 双连通分量定义: 在无向连通图中,如果删除该图的任何一个结点都不能改变该图的连通 ...

  10. vue3.0+axios 跨域+封装

    封装: 目录结构:src/utils/request.js, 没有就自己建一个 //src/utils/request.jsimport axios from 'axios' import { Mes ...