JS控制SVG缩放+鼠标控制事件
直接撸代码：
<!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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-05-22
，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读