javascript - 使用 React 和 SVG 的过渡动画

Question

我有一个生成一些 SVG 的 React 组件，如下所示:


<svg width="1200" height="300" data-reactid=".0">
<path d="M150 200 l300 10 l0 40 l-300 -10z" fill="green" data-reactid=".0.$http=2//localhost=28080/api/shapes/1"></path>
<path d="M300 50 l50 50 l-100 0z" fill="purple" data-reactid=".0.$http=2//localhost=28080/api/shapes/3"></path>
<path d="M40 40 H10 V10 H-10 S 50 30 10 44z" fill="brown" data-reactid=".0.$http=2//localhost=28080/api/shapes/4"></path>
</svg>


<path>元素在服务器上得到更新。因为它使用虚拟 DOM，所以 React 只创建/删除它需要的元素。 d=属性可以改变，移动元素。

但是，元素会从一个地方跳到另一个地方。如果正在移动的元素过渡到它们的新位置，那就太好了。

有没有人对实现此目标的最佳方法有任何建议？

Answer 1

物有所值:

最后，我创建了一个 React 组件来渲染 <svg />标签。然后，我添加了一个 componentDidUpdate()使用 d3 在我的 svg 标签中添加内容的方法。

大体上，遵循此处详述的方法:

http://bl.ocks.org/herrstucki/9205257

显然，对于每个 <path>，以这种方式使用 d3 比使用 React 性能更高。元素。