話不多說，直接上代碼吧，不行你砍我。。。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js控制SVG縮放</title> </head> <body> <svg id="svg" style="background-color: #FAFAFA;"> <g id="svgPanel"> <g id="grid"></g> <defs> <path id="path1" d="M300,200 a1,1 0 0,0 100,0" /> </defs> <text x="10" y="100" style="fill:green;"> <textPath xlink:href="#path1">啦啦啦啦啦啦啦啦啦啦</textPath> </text> </g> </svg> <button onclick="zoom(1.1)">放大</button> <button onclick="zoom(0.9)">縮小</button> <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} winHeight 區域高度 * @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 j = 0,len = Math.ceil(winWidth / gridLength); j < len; j++){ var attrs = { x1 : j * gridLength, y1 : 0, x2 : j * gridLength, y2 : winHeight, stroke : '#add' }; var line = resetSvg('line', attrs); svgBackground.appendChild(line); } for (var k = 0, len2 = Math.ceil(winHeight / gridLength); k <= len2; k++){ var attrs2 = { x1 : 0, y1 : k * gridLength, x2 : winWidth, y2 : k * gridLength, stroke : '#add' }; var line2 = resetSvg('line', attrs2); svgBackground.appendChild(line2) } } /* * 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 g in attrs){ element.setAttribute(g, attrs[g]) } return element; } /* * svg縮放 * {Float} num 收縮的倍數 */ var scale = 1; function zoom(num) { scale *= num; svgPanel.setAttribute('transform', 'scale(' + scale + ')'); drawGrid(gridSvg, width*(1/scale), height*(1/scale), gridLength); } // 綁定鼠標滑輪 if (document.addEventListener){ document.addEventListener('DOMMouseScroll', scrollZoom, false); } window.onmousewheel = document.onmousewhell = 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); } </script> </body> </html>