首先我们先创建一个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);
}
效果如下:
完整示例代码:点击下载