使用 React 和 SVG 的过渡动画答案

【问题标题】：Transition Animation Using React and SVG使用 React 和 SVG 的过渡动画
【发布时间】：2016-02-26 09:28:20
【问题描述】：

我有一个生成一些 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= 属性可以改变，移动元素。

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

有人对实现这一目标的最佳方法有任何建议吗？

【问题讨论】：

标签： javascript css d3.js svg reactjs

【解决方案1】：

物有所值：

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

大致而言，遵循此处详述的方法：

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

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

【讨论】：