摘要：
话不多说，直接上代码吧，不行你砍我。。。
话不多说，直接上代码吧，不行你砍我。。。
<!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"> varsvg =document.getElementById('svg'); varsvgPanel =document.getElementById('svgPanel'); vargridSvg =document.getElementById('grid'); varwidth = 800; //设置svg整体的宽和高 varheight = 400; vargridLength = 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 网格大小 */ functiondrawGrid(svgBackground, winWidth, winHeight, gridLength) { varchilds =gridSvg.childNodes; //删除之前的网格节点,便于绘制 for(vari =childs.length - 1; i>= 0; i--){ svgBackground.removeChild(childs.item(i)); } for(varj = 0,len =Math.ceil(winWidth /gridLength); j <len; j++){ varattrs ={ x1 : j *gridLength, y1 : 0, x2 : j *gridLength, y2 : winHeight, stroke : '#add'}; varline =resetSvg('line', attrs); svgBackground.appendChild(line); } for(vark = 0, len2 =Math.ceil(winHeight /gridLength); k <=len2; k++){ varattrs2 ={ x1 : 0, y1 : k *gridLength, x2 : winWidth, y2 : k *gridLength, stroke : '#add'}; varline2 =resetSvg('line', attrs2); svgBackground.appendChild(line2) } } /** js创建svg元素 * @param {String} tag svg的标签名 * @param {Object} svg元素的属性 */ functionresetSvg(tag, attrs) { varelement =document.createElementNS('http://www.w3.org/2000/svg', tag); for(varg inattrs){ element.setAttribute(g, attrs[g]) } returnelement; } /** svg缩放 * {Float} num 收缩的倍数 */ varscale = 1; functionzoom(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 事件对象 */ functionscrollZoom(e) { e =e ||window.event; //e.detail用来兼容FireFox e.wheelDelta>0 ||e.detail>0?zoom(1.1):zoom(0.9); } </script> </body> </html>