如何在 SVG 中实现以鼠标指针位置为中心的平滑缩放-html教程-夏夕资源网-网站模板_免费源码

本文介绍如何在 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 保持不变：

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

普通

相关推荐

本站指数