捕捉 svg 动画的不同时刻

Question

我希望捕捉 svg 动画的每一刻。目前我正在使用

html2canvas

来执行此操作，但是它只为我捕获了动画的第一帧。

这是我的 svg 动画：

<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)">
        <animateMotion path="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" begin="0s" dur="2s" onend="2" repeatCount="2" rotate="auto" fill="freeze"></animateMotion>
         </rect>
       </g>
   </svg>
</div>

这是我的脚本：

var svgElement = document.querySelector('#svg-a');
var images = [];
function captureImage() {
    html2canvas(svgElement).then(function(canvas) {
        document.body.appendChild(canvas);
        images.push(canvas.toDataURL());
    });
}

var interval = setInterval(captureImage, 1000);

setTimeout(function() {
    clearInterval(interval);
    console.log(images);
}, 5000);