css - 向矩形添加增长过渡

Question

我正在尝试通过 d3 动态地或使用 CSS 进行一些不错的转换，但我很幸运地找到了一个很好的例子来说明如何这样做。

我的想法是，我希望在呈现条形图时从下到上增长我的条形图。

该图表是使用 Vega 呈现的，我认为它还没有内置转换，因此我需要在库之外执行其他选项。

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

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

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

https://jsfiddle.net/zg2hnr2x/3/

Answer 1

您的 CSS 方法目前仅适用于 Chrome。 height不是可以使用 CSS 动画化的正式属性(目前)。

它从上到下增长的原因是因为 SVG 的坐标原点在左上角，所以 x , y <rect>的坐标也在左上角。矩形的右下角位于 x+width。 , y+height .

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