Question

我试图通过d3动态地进行一些很好的转换，或者使用CSS来进行一些很好的转换，但我很幸运找到了一个很好的例子。

我的想法是，我想在渲染时从底部到顶部增长条形图。

图表是使用Vega渲染的，我不相信它已经内置了过渡，所以我需要在库外做其他选项。

我尝试使用CSS动画，但它有一些奇怪的渲染问题，也是从上到下而不是从下到上

rect {
  animation: bar-fill 2s linear;
}

@keyframes bar-fill {
  0% { height: 0; }
}

Answer 1

您的CSS方法目前仅适用于Chrome。 height官方不是一个可以用CSS动画的属性。

它从上到下增长的原因是因为SVG的坐标原点位于左上角，因此x的{{1}}，y坐标也是在左上角。矩形的右下角位于<rect>，x+width。

如果您需要跨浏览器方式来为SVG元素设置动画，那么可能需要查看可用的众多JS SVG动画库中的一个。