如何在 SVG 中实现以鼠标指针位置为中心的平滑缩放

本文介绍如何在 svg 元素上实现以鼠标悬停/滚动位置为缩放中心的交互式缩放，通过 `transform-origin` 动态计算 svg 坐标系下的鼠标位置，并结合 css 变量与 `transform` 实现精准、流畅的局部缩放效果。

要在 SVG 中实现“以鼠标指针位置为中心”的缩放（而非默认的元素中心），关键在于两点：

1. 将屏幕坐标（clientX/clientY）正确转换为 SVG 用户坐标系（user space）；
2. 动态设置 transform-origin 为该 SVG 坐标，并配合 scale() 实现锚点缩放。

原代码中直接使用 Event.pageX/pageY 或 clientX/clientY 设置 translate 是无效的，因为：

• translate 是位移变换，不是缩放锚点控制；
• pageX 等返回的是文档级像素值，而 SVG 的 transform-origin 需要的是 viewBox 内的逻辑单位（如 50 32.7），二者坐标系不匹配；
• 缺少 SVG 坐标系的逆变换（即 getScreenCTM().inverse()）。

✅ 正确做法是利用 SVG 原生方法 getScreenCTM() 获取从 SVG 用户坐标到屏幕坐标的变换矩阵，再用其逆矩阵将鼠标屏幕坐标反向映射为 SVG 坐标：

function getSVGPoint(event: MouseEvent, svg: SVGSVGElement): DOMPoint {   const pt = new DOMPoint(event.clientX, event.clientY);   return pt.matrixTransform(svg.getScreenCTM()?.inverse() ?? new DOMMatrix()); }

⚠️ 注意：getScreenCTM() 要求 SVG 已渲染且尺寸稳定（避免在 ngAfterViewinit 之前调用）；若 SVG 包裹在缩放/滚动容器中，需确保容器无 transform 干扰（否则需叠加父级 CTM）。

接下来，在 angular 组件中整合该逻辑（适配你的原始结构）：

@HostListener('wheel', ['$event']) onMouseWheel(event: WheelEvent) {   event.preventDefault(); // 阻止默认滚动    const svg = document.getElementById('svg') as SVGSVGElement;   if (!svg) return;    // 1. 获取鼠标在 SVG 用户坐标系中的位置   const point = new DOMPoint(event.clientX, event.clientY);   const svgPoint = point.matrixTransform(svg.getScreenCTM()?.inverse() ?? new DOMMatrix());    // 2. 更新 transform-origin（单位：用户坐标，无需 px）   svg.style.transformOrigin = `${svgPoint.x}px ${svgPoint.y}px`;    // 3. 更新缩放比例（推荐用 css 变量 + transition，更平滑）   this.zoom += -event.deltaY * 0.001; // 更精细的缩放步长   this.zoom = Math.max(0.25, Math.min(this.zoom, 5)); // 限制范围    // 使用 CSS 自定义属性驱动缩放（支持 transition）   svg.style.setProperty('--zoom-factor', this.zoom.toString()); }

对应 html 保持不变：

并在 CSS 中添加声明式缩放控制（推荐，性能优于内联 transform）：

#svg {   --zoom-factor: 1;   transform: scale(var(--zoom-factor));   transform-origin: center center; /* 初始值，后续 js 动态覆盖 */   transition: transform 200ms ease, transform-origin 0s; /* origin 瞬时切换，避免跳变 */   will-change: transform; }

? 进阶提示：

• 若需支持触摸设备，补充 touchstart/touchmove 事件并用 touches[0] 替代 clientX/Y；
• 对于嵌套 或复杂 SVG 结构，可将 transform-origin 应用于目标 元素而非整个
• 避免在 wheel 中频繁调用 getScreenCTM()（可缓存或节流），尤其在高刷新率设备上。

总结：以鼠标为中心缩放 SVG 的核心是「坐标系对齐」——通过 matrixTransform(…inverse()) 桥接屏幕与 SVG 用户空间，再用 transform-origin 锚定缩放基点。配合 CSS 变量与 transition，即可获得专业级、零卡顿的交互体验。