首先我们先创建一个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); }
效果如下：
