本文介绍如何在 svg 元素上实现以鼠标悬停/滚动位置为缩放中心的交互式缩放，通过 `transform-origin` 动态计算 svg 坐标系下的鼠标位置，并结合 css 变量与 `transform` 实现精准、流畅的局部缩放效果。
要在 SVG 中实现“以鼠标指针位置为中心”的缩放（而非默认的元素中心），关键在于两点：
- 将屏幕坐标（clientX/clientY）正确转换为 SVG 用户坐标系（user space）；
- 动态设置 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，即可获得专业级、零卡顿的交互体验。
