如何捕获SVG动画的每一帧？html2canvas仅捕获首帧问题求助

html2canvas无法直接捕获<animateMotion>这类原生SVG动画的动态帧，核心原因是它基于DOM快照渲染，而原生SVG动画的状态仅在内部动画引擎中运行，不会同步更新到DOM元素的属性上，因此每次捕获的都是初始状态。要解决这个问题，需要手动将动画的实时状态同步到DOM属性中。

修改后的SVG代码 #

先移除自带的<animateMotion>标签，改用JS控制动画逻辑：

<div id="svg-a">
  <svg version="1.1" id="svgobject" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="451.5px" height="451.5px" viewBox="0 0 461.5 461.5" enable-background="new 0 0 461.5 461.5" xml:space="preserve">
    <g>
      <rect id="rect" x="0" y="0" width="50" height="20" fill="gray" stroke="black" stroke-width="1" transform="translate(-25, -10)"></rect>
    </g>
  </svg>
</div>

改进后的JavaScript代码 #

用JS模拟原SVG动画的路径运动，将每一帧的位移、旋转状态同步到rect的transform属性，再调用html2canvas捕获：

const svgElement = document.querySelector('#svg-a');
const rect = document.querySelector('#rect');
const images = [];
// 原动画的路径字符串
const pathStr = 'M446.85,280.187c0,30.296-24.56,54.854-54.854,54.854H60.239c-30.296,0-54.854-24.559-54.854-54.854l0,0c0-30.296,24.559-54.854,54.854-54.854h331.756C422.29,225.333,446.85,249.891,446.85,280.187L446.85,280.187z';
const path = document.querySelector('#svgobject').createSVGPathSegListFromString(pathStr);
const totalDuration = 4000; // 原动画总时长：2s*2次重复
const captureInterval = 100; // 捕获间隔，值越小帧密度越高
const totalFrames = totalDuration / captureInterval;
let currentFrame = 0;

// 更新动画进度并同步到DOM属性
function updateAnimation(progress) {
  // 获取路径上对应进度的坐标点
  const point = path.getPointAtLength(path.totalLength * progress);
  // 计算切线角度，模拟原动画的rotate="auto"效果
  const nextPoint = path.getPointAtLength(Math.min(path.totalLength * progress + 1, path.totalLength));
  const angle = Math.atan2(nextPoint.y - point.y, nextPoint.x - point.x) * 180 / Math.PI;
  // 更新rect的transform：平移（抵消自身中心点偏移）+旋转
  rect.setAttribute('transform', `translate(${point.x - 25}, ${point.y - 10}) rotate(${angle})`);
}

// 捕获当前帧并保存
function captureFrame() {
  html2canvas(svgElement).then(canvas => {
    document.body.appendChild(canvas);
    images.push(canvas.toDataURL());
  });
}

// 启动动画与捕获循环
const animInterval = setInterval(() => {
  currentFrame++;
  const progress = currentFrame / totalFrames;
  updateAnimation(progress);
  captureFrame();

  if (currentFrame >= totalFrames) {
    clearInterval(animInterval);
    console.log('所有帧已捕获：', images);
  }
}, captureInterval);

关键逻辑说明 #

通过JS手动模拟动画路径，将每一帧的位移、旋转状态直接写入DOM元素的transform属性，让html2canvas能读取到更新后的DOM快照，从而捕获到动态变化的每一帧。

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