如何实现SVG围绕鼠标指针位置进行滚轮缩放？

问题背景 #

已通过Angular的TypeScript实现SVG滚轮缩放功能，但缩放中心固定为SVG中点，需要改为以鼠标指针位置为中心缩放。尝试直接设置translate属性未生效，需解决坐标转换与transform组合的问题。

现有代码 #

TypeScript 缩放逻辑 #

@HostListener('wheel', ['$event'])
onMouseWheel(event: WheelEvent) {
  const svgpicture = document.getElementById('svg');
  const zoomfactore = Math.sign(event.deltaY);
  this.zoom -= (zoomfactore * 0.1);

  if (this.zoom <= 0.25) {
    this.zoom = 0.25;
  }
  if(zoomfactore>0){
    svgpicture.style.setProperty('transition','all 200ms ease-in')
  }
  if(zoomfactore<0){
  svgpicture.style.setProperty('transition','all 200ms ease-out')
  }

  const scale = 'scale('.concat(this.zoom.toString()).concat(')');
  svgpicture.style.setProperty('transform', scale)
}

HTML结构 #

<div id="container">
<svg id="svg"> .... </svg>
</div>

解决方案 #

要实现鼠标中心缩放，需同时组合translate和scale变换，且需计算鼠标相对于SVG的坐标，调整偏移量抵消缩放带来的位移。核心步骤：

1. 获取鼠标在SVG元素内的相对坐标
2. 根据缩放前后的比例，计算新的偏移量，确保鼠标位置在缩放后保持不变
3. 将translate与scale合并到同一个transform属性中（单独设置translate会被transform覆盖）

修改后的完整代码 #

首先在组件类中添加偏移量属性：

export class YourComponent {
  zoom = 1; // 初始缩放比例
  translateX = 0; // X轴偏移量
  translateY = 0; // Y轴偏移量

  @HostListener('wheel', ['$event'])
  onMouseWheel(event: WheelEvent) {
    event.preventDefault(); // 阻止页面滚动
    const svgpicture = document.getElementById('svg');
    if (!svgpicture) return;

    const rect = svgpicture.getBoundingClientRect();
    // 计算鼠标相对于SVG左上角的坐标
    const mouseX = event.clientX - rect.left;
    const mouseY = event.clientY - rect.top;

    const oldZoom = this.zoom;
    const zoomFactor = Math.sign(event.deltaY);
    this.zoom -= zoomFactor * 0.1;
    this.zoom = Math.max(0.25, this.zoom); // 限制最小缩放比例

    // 计算新的偏移量，确保鼠标位置为缩放中心
    this.translateX += mouseX - (mouseX - this.translateX) * (this.zoom / oldZoom);
    this.translateY += mouseY - (mouseY - this.translateY) * (this.zoom / oldZoom);

    // 设置过渡动画
    svgpicture.style.transition = zoomFactor > 0 ? 'all 200ms ease-in' : 'all 200ms ease-out';
    // 组合translate和scale变换
    svgpicture.style.transform = `translate(${this.translateX}px, ${this.translateY}px) scale(${this.zoom})`;
  }
}

关键说明 #

• event.preventDefault()：防止滚轮事件触发页面滚动，影响SVG缩放体验
• 鼠标坐标计算：通过getBoundingClientRect()获取SVG的位置，将clientX/clientY转换为SVG内部相对坐标
• 偏移量计算：核心公式确保缩放后鼠标位置在屏幕上保持不变，抵消scale变换带来的坐标偏移
• transform组合：必须将translate和scale写在同一个transform属性中，否则单独设置的translate会被覆盖

内容的提问来源于stack exchange，提问作者user20032745