js操作svg整体缩放

最新推荐文章于 2024-04-25 14:21:48 发布

simon-hacker

最新推荐文章于 2024-04-25 14:21:48 发布

阅读量4.3k

点赞数

分类专栏： h5 js svg 文章标签： js html svg 自由缩放html 自由缩放div

h5 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

svg

1 篇文章 0 订阅

订阅专栏

首先我们先创建一个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函数如下：

/**
 * svg放缩
 * {Float} num 放缩的倍数
 */
function zoom(num){
    scale *= num;
    svgPanel.setAttribute("transform","scale("+scale+")");
    drawGrid(gridSvg,width*(1/scale),height*(1/scale),gridLength);
}

每次放缩都重绘svg网格，这样就可以了：

然后我们绑定鼠标滑轮事件来实现缩放，代码如下：


//绑定鼠标滑轮事件
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);
}

效果如下：

æ»è½®æ»å¨ç¼©æ¾

完整示例代码：点击下载

simon-hacker

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
js操作svg整体缩放

首先我们先创建一个svg整体布局，代码如下：<!DOCTYPE html><html><head> <title>js操作svg实现整体缩放</title> <meta charset="utf-8"></head><body> <svg id="svg" s...
复制链接

扫一扫