js操作svg整体缩放

Posted dawn888

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js操作svg整体缩放相关的知识,希望对你有一定的参考价值。

首先我们先创建一个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="50" cx="100" cy="100"></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 = 800;  //设置svg整体的宽和高
    var height = 400;
    var gridLength = 20; //定义网格的大小
 
    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 - 1; i >= 0; i--) {
            svgBackground.removeChild(childs.item(i));
        }
        for (var i = 0, len = Math.ceil(winWidth / gridLength); i <= len; i++) {
            var attrs = {
                x1: i * gridLength,
                y1: 0,
                x2: i * gridLength,
                y2: winHeight,
                stroke: "#ddd"
            };
            var line = resetSVG("line", attrs);
            svgBackground.appendChild(line);
        };                                                                                                                                                         
        for (var i = 0, len = Math.ceil(winHeight / gridLength); i <= len; i++) {
            var attrs = {
                x1: 0,
                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>0 || e.detail >0?zoom(1.1):zoom(0.9);
}

效果如下: 

 

 

以上是关于js操作svg整体缩放的主要内容,如果未能解决你的问题,请参考以下文章

使用svg让页面自适应浏览器大小,整体等比缩放

css 快速片段将svg与中心对齐并缩放到视口大小。

d3.js svg 可以同时加拖拽和缩放事件吗

如何为 react.js 应用缩放 svg 背景?

D3.JS“缩放”未定义

Javascript / D3.js - 绘制大型数据集 - 提高 d3.js 绘制的 svg 图表中的缩放和平移速度