Question

众所周知，我们可以使用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元素，然后以某种方式从中导出光栅图像。

Answer 1

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

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

虽然没有地方说暂停动画是异步进行的，但我很惊讶地发现它似乎是这样。您必须延迟读取属性，例如使用setTimeout。

对于CSS演示文稿属性，

window.getComputedStyle(element)[attribute]

对于XML属性，
```
element[attribute].animVal.valueAsString || element[attribute].animVal
```
这具有另一种复杂性：SVG具有用于处理单元的专用接口。当您获取一个例如长度的值时，您需要使用animVal.valueAsString获取属性字符串。对于number或string列表，或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>

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

1 个答案: