时间戳

首页 > 解决方案 > 如何将 svg（我没有画布）中的动画过渡转换为视频？

javascript - 如何将 svg（我没有画布）中的动画过渡转换为视频？

问题描述

我创建了一个svg我有 a 动画的地方rectangle，我想将此动画的持续时间（在本例中为 5 秒）转换为 a video。我依靠这个例子：

https://plnkr.co/edit/SA4LfCHCbHcBxA48?open=lib%2Fscript.js&preview

但我不知道它是否适用于我的情况，我在某​​些地方看到一切都直接在 a 上完成canvas，或者以svg某种方式转换为 animage或类似的东西。我试图模仿链接逻辑，但我也遇到了问题，因为那个版本d3.js比我的旧。

怎么办？

d3.select("#visualization").append('svg');
var vis = d3.select("svg").attr("width", 800).attr("height", 614).style("border", "1px solid red");

var rectangle = vis.append("rect").attr("width", 100).attr("height", 70).attr("x", 0).attr("y", 50);

rectangle
  .transition()
  .duration(5000)
  .ease(d3.easeLinear)
  .attr("x", 250)
  .attr("width", 100)
  .attr("height", 100)
  .attr("opacity", 0.5)
  .attr("fill", "red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="visualization"></div>

标签： javascriptd3.js

解决方案

推荐阅读