众所周知，我们可以使用 SVGElement.pauseAnimations() 方法暂停 svg 动画。我们还可以使用方法 SVGElement.setCurrentTime() 设置动画当前时间-用拳头参数以秒为单位的时间。一切正常但我的问题是，你能将暂停的帧导出到光栅图像-jpg，png。
示例(这里我们创建了一个带有动画的 svg 并且我们暂停动画的时间 - 0.958s)
let svg = document.getElementById('testSvg');
svg.pauseAnimations();
svg.setCurrentTime(0.958); // keyframes times: 0s, 0.458s, 0.958s<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<svg id="testSvg" image-rendering="auto" baseProfile="basic" version="1.1" x="0px" y="0px" width="550" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Scene-1" overflow="visible" transform="translate(-56 -145.5)">
<g display="none" id="Layer3_0_FILL">
<path fill="#F00" stroke="none" d="M116.3 159.95L116.3 220.95 232.8 220.95 232.8 159.95 116.3 159.95Z" test="Scene 1"/>
<animate attributeName="display" repeatCount="indefinite" dur="1s" keyTimes="0;.958;1" values="none;inline;inline"/>
</g>
<g display="none" id="Layer2_0_FILL">
<path fill="#0F0" stroke="none" d="M116.3 159.95L116.3 220.95 232.8 220.95 232.8 159.95 116.3 159.95Z" test="Scene 1"/>
<animate attributeName="display" repeatCount="indefinite" dur="1s" keyTimes="0;.458;.958;1" values="none;inline;none;none"/>
</g>
<g id="Layer1_0_FILL">
<path fill="#0F0" stroke="none" d="M78.05 139.95L78.05 240.95 271 240.95 271 139.95 78.05 139.95Z" test="Scene 1"/>
<animate attributeName="display" repeatCount="indefinite" dur="1s" keyTimes="0;.458;1" values="inline;none;none"/>
</g>
</g>
</svg>
</body>
</html>现在，如果我们使用 XMLSerializer 将 svg 设置为图像的 src。
let image = document.createElement( "image" );
let xml = new XMLSerializer().serializeToString(svg);
let data = "data:image/svg+xml;base64," + btoa(xml);
image.src = data;
document.body.appendChild();
图像已设置，但动画正常播放，现在已暂停。那么有没有办法在图像标签中暂停动画。或者使用暂停的 svg 元素并以某种方式从中导出光栅图像。
最佳答案
我能想到的最好的方法是读取动画属性并将它们设置为动画图像的克隆。
这不是微不足道的。 SMIL 动画可以针对 XML 和 CSS 属性，两者的语法不同。此外，您必须仔细查看 XML 属性的名称是否与属性名称相匹配。情况可能并非总是如此。然后，基本流程是这样的:
虽然没有任何地方说明暂停动画是异步完成的，但我惊讶地发现它似乎是这样。您必须延迟属性的读取，例如使用
setTimeout.对于 CSS 表示属性，
window.getComputedStyle(element)[attribute]对于 XML 属性，
element[attribute].animVal.valueAsString || element[attribute].animVal这还有另一个复杂性:SVG 有一个专门用于处理单元的接口(interface)。例如，当您获取一个长度的值时，您需要使用
animVal.valueAsString获取属性字符串。 .对于 number或 string列表，或 transforms ，它变得更加复杂，因为这些列表没有实现 Iterable 接口(interface)。
这是一个适用于所列属性的示例。我设置了attributeType在 <animate> 上元素以便于识别，以及目标元素上的 id，因为您需要在原始元素(处于暂停动画状态)和它的克隆(不是)上识别它。我已经绘制到 Canvas 上，因此您可以立即获得可用的光栅图像。
const svg = document.getElementById('testSvg');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext("2d");
svg.pauseAnimations();
svg.setCurrentTime(0.35);
setTimeout(() => {
// clone svg
const copy = svg.cloneNode(true);
// remove the animations from the clone
copy.querySelectorAll('animate').forEach(animate => animate.remove());
// query all animate elements on the original
svg.querySelectorAll('animate').forEach(animate => {
// target element in original
const target = animate.targetElement;
const attr = animate.getAttribute('attributeName');
const type = animate.getAttribute('attributeType');
// target element in copy
const copyTarget = copy.getElementById(target.id);
// differentiate attribute type
if (type === 'XML') {
const value = target[attr].animVal.valueAsString || target[attr].animVal;
copyTarget.setAttribute(attr, value);
} else if (type === 'CSS') {
const value = window.getComputedStyle(target)[attr];
copyTarget.style[attr] = value
}
});
svg.unpauseAnimations();
const xml = new XMLSerializer().serializeToString(copy);
const data = "data:image/svg+xml;base64," + btoa(xml);
const image = new Image();
// image load is asynchronuous
image.onload = () => ctx.drawImage(image, 0, 0);
image.src = data;
},0);<svg id="testSvg" width="200" height="200">
<rect id="animationTarget" x="50" y="50" width="100" height="100"
rx="0" fill="red">
<animate attributeType="XML" attributeName="rx"
dur="1s" keyTimes="0;0.5;1" values="0;50;0" />
<animate attributeType="CSS" attributeName="fill"
dur="1s" keyTimes="0;0.25;0.75" values="red;green;red" calcMode="discrete" />
</rect>
</svg>
<canvas width="200" height="200"></canvas>关于javascript - 您可以使用 JS 将所有帧从 -svg 导出到光栅图像 -jpg、png、..，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51839322/