JS实现控制SVG缩放+鼠标控制事件

无界猴

7个月前更新

087313

在JavaScript中控制SVG的缩放，并结合鼠标事件来实现用户交互，是一个常见的需求，特别是在图形界面和可视化项目中。以下是一个基本的示例，展示了如何使用JavaScript来控制SVG元素的缩放，并添加鼠标滚轮事件来控制这个缩放。

HTML部分

首先，你需要一个SVG元素和可能的一些子元素（如矩形、圆形等），作为缩放的目标。


<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>SVG Zoom Example</title>  
    <style>  
        #svg-container {  
            width: 600px;  
            height: 400px;  
            border: 1px solid black;  
            overflow: hidden;  
        }  
    </style>  
</head>  
<body>  
    <div id="svg-container">  
        <svg id="mySVG" width="800" height="600" xmlns="http://www.w3.org/2000/svg">  
            <rect x="100" y="50" width="200" height="150" fill="blue" />  
            <circle cx="400" cy="300" r="50" fill="red" />  
        </svg>  
    </div>  
  
    <script src="zoom.js"></script>  
</body>  
</html>
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>SVG Zoom Example</title>  
    <style>  
        #svg-container {  
            width: 600px;  
            height: 400px;  
            border: 1px solid black;  
            overflow: hidden;  
        }  
    </style>  
</head>  
<body>  
    <div id="svg-container">  
        <svg id="mySVG" width="800" height="600" xmlns="http://www.w3.org/2000/svg">  
            <rect x="100" y="50" width="200" height="150" fill="blue" />  
            <circle cx="400" cy="300" r="50" fill="red" />  
        </svg>  
    </div>  
  
    <script src="zoom.js"></script>  
</body>  
</html>
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>SVG Zoom Example</title>  
    <style>  
        #svg-container {  
            width: 600px;  
            height: 400px;  
            border: 1px solid black;  
            overflow: hidden;  
        }  
    </style>  
</head>  
<body>  
    <div id="svg-container">  
        <svg id="mySVG" width="800" height="600" xmlns="http://www.w3.org/2000/svg">  
            <rect x="100" y="50" width="200" height="150" fill="blue" />  
            <circle cx="400" cy="300" r="50" fill="red" />  
        </svg>  
    </div>  
  
    <script src="zoom.js"></script>  
</body>  
</html>

JavaScript部分 (zoom.js)

在这个脚本中，我们将添加处理鼠标滚轮事件的逻辑，并调整SVG的transform属性来实现缩放。


document.addEventListener('DOMContentLoaded', function() {  
    const svg = document.getElementById('mySVG');  
    let scaleFactor = 1;  
  
    // 监听鼠标滚轮事件  
    svg.addEventListener('wheel', function(event) {  
        event.preventDefault(); // 阻止默认滚动行为  
  
        // 计算新的缩放因子  
        const delta = event.deltaY * -0.01; // 假设向上滚动时deltaY为负  
        scaleFactor += delta;  
  
        // 限制缩放比例  
        scaleFactor = Math.min(Math.max(0.1, scaleFactor), 10);  
  
        // 更新SVG的transform属性  
        svg.style.transform = `scale(${scaleFactor})`;  
        svg.style.transformOrigin = '0 0'; // 缩放中心点  
    });  
});
document.addEventListener('DOMContentLoaded', function() {  
    const svg = document.getElementById('mySVG');  
    let scaleFactor = 1;  
  
    // 监听鼠标滚轮事件  
    svg.addEventListener('wheel', function(event) {  
        event.preventDefault(); // 阻止默认滚动行为  
  
        // 计算新的缩放因子  
        const delta = event.deltaY * -0.01; // 假设向上滚动时deltaY为负  
        scaleFactor += delta;  
  
        // 限制缩放比例  
        scaleFactor = Math.min(Math.max(0.1, scaleFactor), 10);  
  
        // 更新SVG的transform属性  
        svg.style.transform = `scale(${scaleFactor})`;  
        svg.style.transformOrigin = '0 0'; // 缩放中心点  
    });  
});
document.addEventListener('DOMContentLoaded', function() {  
    const svg = document.getElementById('mySVG');  
    let scaleFactor = 1;  
  
    // 监听鼠标滚轮事件  
    svg.addEventListener('wheel', function(event) {  
        event.preventDefault(); // 阻止默认滚动行为  
  
        // 计算新的缩放因子  
        const delta = event.deltaY * -0.01; // 假设向上滚动时deltaY为负  
        scaleFactor += delta;  
  
        // 限制缩放比例  
        scaleFactor = Math.min(Math.max(0.1, scaleFactor), 10);  
  
        // 更新SVG的transform属性  
        svg.style.transform = `scale(${scaleFactor})`;  
        svg.style.transformOrigin = '0 0'; // 缩放中心点  
    });  
});