首先我們先創建一個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); }
效果如下：
