本文详解如何在 svg 中实现以鼠标悬停/滚动位置为缩放中心的交互式缩放功能，通过坐标空间转换、`transform-origin` 动态设置与 css 变量协同控制，避免默认居中缩放的局限性。
要在 SVG 中实现“以鼠标指针位置为中心”的缩放（而非默认的 SVG 元素中心），关键在于三点：
- 将屏幕坐标（clientX/Y）准确映射到 SVG 用户坐标系；
- 动态设置缩放元素的 transform-origin 为该 SVG 坐标；
- 使用 CSS transform: scale() 配合 transition 实现平滑缩放动画。
✅ 核心原理：坐标空间转换
SVG 的 getScreenCTM().inverse() 是核心工具——它返回一个从屏幕像素坐标（如 event.clientX, event.clientY）逆向映射到 SVG 本地用户坐标系的变换矩阵。配合 DOMPoint.matrixTransform() 即可获得精确的 SVG 内部坐标：
function cursorPoint(event: MouseEvent): DOMPoint {
const point = new DOMPoint(event.clientX, event.clientY);
return point.matrixTransform(svg.getScreenCTM()!.inverse());
}⚠️ 注意：svg.getScreenCTM() 在
✅ 完整 TypeScript + HTML 实现（适配你的 Angular 场景）
将原 @HostListener('wheel') 逻辑升级为支持锚点缩放：
@HostListener('wheel', ['$event'])
onMouseWheel(event: WheelEvent) {
event.preventDefault(); // 阻止默认滚动行为
const svg = document.getElementById('svg') as SVGSVGElement;
if (!svg) return;
// 1️⃣ 获取鼠标在 SVG 用户坐标系中的位置
const clientPoint = new DOMPoint(event.clientX, event.clientY);
const svgPoint = clientPoint.matrixTransform(svg.getScreenCTM()!.inverse());
// 2️⃣ 更新缩放级别（带边界限制）
const delta = event.deltaY > 0 ? 0.1 : -0.1; // 向下滚放大，向上滚缩小
this.zoom = Math.max(0.25, Math.min(5.0, this.zoom + delta));
// 3️⃣ 设置 transform-origin 为鼠标对应 SVG 坐标（单位：px，SVG userSpace）
svg.style.transformOrigin = `${svgPoint.x}px ${svgPoint.y}px`;
// 4️⃣ 应用缩放（推荐用 CSS 变量 + transition，更稳定）
svg.style.setProperty('--zoom-factor', this.zoom.toString());
svg.style.transition = 'transform 200ms ease';
}对应 HTML 结构保持不变：
并在 CSS 中定义缩放逻辑：
#svg {
--zoom-factor: 1;
transform: scale(var(--zoom-factor));
transform-origin: center; /* 默认值，会被 JS 动态覆盖 */
transition: transform 200ms ease;
}⚠️ 重要注意事项
- transform-origin 单位必须是 SVG 用户坐标系单位（如 px），不是百分比或 vw/vh；
- 若 SVG 外层有 transform、scale 或 overflow: hidden 等样式，getScreenCTM() 结果可能失真，建议确保 SVG 直接嵌入文档流且无干扰父级变换；
- Angular 中操作 style.setProperty 是安全的，但若需更高性能（如高频缩放），可考虑使用 Renderer2；
- 移动端需额外监听 touchmove + touchstart 模拟，此处聚焦桌面端 wheel；
- 缩放后若需拖拽平移，应同步更新 transform: translate(x,y) scale(s)，此时 transform-origin 仍生效，但需注意复合变换顺序（CSS 中 transform 是右→左执行，即 scale 先于 translate）。
✅ 总结
以鼠标位置为中心缩放 SVG，本质是「坐标对齐」+「原点控制」：
✅ 用 getScreenCTM().inverse() 将屏幕坐标转为 SVG 坐标；
✅ 用 element.style.transformOrigin = 'x y' 动态设定缩放基点；
✅ 用 CSS transform: scale() + transition 实现声明式动画。
这一方案兼容现代浏览器（Chrome/Firefox/Safari ≥ v79），无需第三方库，轻量、精准、可扩展性强。
