简单实现svg滚轮的缩放demo

SVG是一种XML格式的矢量图形标准，支持无限的缩放和旋转，并完美呈现在任何大小的屏幕上。为了实现SVG滚轮的缩放，需要在SVG元素中添加一个事件监听器，以便捕获滚轮事件并执行相应的操作。

首先，需要在SVG元素上添加一个事件监听器，以便捕获滚轮事件。这可以通过添加一个onwheel属性来实现。例如：

<svg onwheel="zoom(event)">
...
</svg>

其中，zoom是一个JavaScript函数，它将在滚轮事件触发时执行。

接下来，在zoom函数中，我们可以获取滚轮事件对象并计算新的缩放比例。可以使用event.deltaY属性来获取滚轮滚动方向。如果deltaY的值是正数，这意味着向下滚动，需要将图像缩小。反之，如果deltaY的值是负数，这意味着向上滚动，需要将图像放大。可以通过将当前缩放比例乘以一个固定因子来实现缩放。例如：

function zoom(event) {
var delta = event.deltaY > 0 ? -0.1 : 0.1; // 根据滚轮方向计算缩放因子
var svg = event.target.closest('svg');
var viewBox = svg.viewBox.baseVal;
var newWidth = viewBox.width * (1 + delta);
var newHeight = viewBox.height * (1 + delta);
viewBox.width = newWidth;
viewBox.height = newHeight;
}

最后，在zoom函数中需要更新视图框的宽度和高度，以便实现缩放。这可以通过修改svg.viewBox.baseVal属性来实现。

这样，我们就可以简单地实现SVG滚轮缩放的demo。当用户滚动滚轮时，图像将根据滚动方向缩小或放大。通过调整缩放因子，可以控制缩放的速度。这是一个简单但非常实用的SVG交互技术。