众所周知，我们可以使用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具有用于处理单元的专用接口。当获取某个值（例如，长度）时，需要使用来获取属性字符串animVal.valueAsString。对于数字或字符串列表，或者对于transforms，它变得更加复杂，因为这些列表没有实现Iterable接口。
这是适用于所列属性的示例。我设置attributeType了<animate>元素以便于识别，并在目标元素上设置了id，因为您需要在原始对象（处于暂停动画状态）和其克隆对象（不是）上进行标识。我已绘制到画布上，因此您立即可以使用光栅图像。
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句