Javascript 您可以将所有帧从-svg导出到光栅图像-jpg、png、，。。使用JS

众所周知，我们可以使用该方法暂停svg动画，也可以使用该方法设置动画的当前时间-第一个参数为秒。一切都很好，但我的问题是，您能否将暂停的帧导出为光栅图像-jpg，png

示例（这里我们创建了一个带有动画的svg，并在-0.958s时间暂停动画）

let svg=document.getElementById（'testSvg'）；
svg.pauseAnimations（）；
svg.setCurrentTime（0.958）；//关键帧时间：0s、0.458s、0.958s

---

我能想到的最好办法是读取动画属性并将其设置为动画图像的克隆

这不是小事。SMIL动画可以同时针对XML和CSS属性，两者的语法不同。此外，您还必须仔细查看XML属性的名称是否与属性名称匹配。情况可能并非总是如此。然后，基本过程如下：

• 虽然没有说明暂停动画是异步完成的，但我惊讶地发现它似乎是异步完成的。您必须延迟属性的读取，例如使用

  setTimeout

• 对于CSS表示属性

  window.getComputedStyle(element)[attribute]
  

  element[attribute].animVal.valueAsString || element[attribute].animVal
  

• 对于XML属性

  window.getComputedStyle(element)[attribute]
  

  element[attribute].animVal.valueAsString || element[attribute].animVal
  

  这还有另一个复杂性：SVG有一个处理单元的专用接口。例如，在获取长度为的值时，需要使用

  animVal.valueAsString

  获取属性字符串。对于或列表，或者对于，它变得更加复杂，因为这些列表没有实现Iterable接口

下面是一个适用于列出的属性的示例。为了便于识别，我在

元素上设置了

attributeType

，并在目标元素上设置了id，因为您需要在原始元素（处于暂停动画状态）和克隆元素（未处于暂停动画状态）上对其进行识别。我已绘制到画布，因此您立即可以使用光栅图像

const svg=document.getElementById（'testSvg'）；
const canvas=document.querySelector（'canvas'）；
const ctx=canvas.getContext（“2d”）；
svg.pauseAnimations（）；
svg.setCurrentTime（0.35）；
设置超时（（）=>{
//克隆svg
const copy=svg.cloneNode（true）；
//从克隆中删除动画
copy.querySelectorAll（'animate'）.forEach（animate=>animate.remove（））；
//查询原始对象上的所有动画元素
svg.querySelectorAll（'animate'）.forEach（animate=>{
//原稿中的目标元素
const target=animate.targetElement；
const attr=animate.getAttribute（'attributeName'）；
const type=animate.getAttribute（'attributeType'）；
//副本中的目标元素
const copyTarget=copy.getElementById（target.id）；
//区分属性类型
如果（类型=='XML'）{
常量值=目标[attr].animVal.valueAsString | |目标[attr].animVal；
setAttribute（属性，值）；
}else if（type==='CSS'）{
常量值=window.getComputedStyle（目标）[attr]；
copyTarget.style[attr]=值
}
});
svg.unpuseanimations（）；
const xml=new XMLSerializer（）.serializeToString（复制）；
const data=“data:image/svg+xml；base64，”+btoa（xml）；
常量图像=新图像（）；
//映像加载是异步的
image.onload=（）=>ctx.drawImage（image，0，0）；
image.src=数据；
},0);
非常感谢你，你帮了我很多！！！要使用animateTransform标记管理动画，当我获取其-animVal i receive时，我会循环列表中的所有元素，然后获取其。然后将所有矩阵值-a、b、c、d、e、f组合成一个字符串，这样我就可以使用属性为-additional=“sum”的多个动画。