本文详解如何在 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') 逻辑升级为支持锚点缩放：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
@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 结构保持不变：
<div id="container">
<svg id="svg" viewBox="0 0 800 600" width="100%" height="100%">
<!-- 你的图形内容 -->
</svg>
</div>并在 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），无需第三方库，轻量、精准、可扩展性强。
