將增長過渡添加到矩形

Question

我正在嘗試通過d3動態地或通過CSS使用矩形進行一些不錯的轉換，但我很幸運找到了一個很好的示例。

這個想法是，當我的條形圖被渲染時，我想從下到上增長我的條形圖。

該圖表是使用Vega呈現的，我不相信它已經構建在轉換中，所以我需要其他選項在圖書館之外進行操作。

我試圖使用CSS動畫，但它有一些奇怪的渲染問題，還要從上到下而不是從下到上

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

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

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

Answer 1

你的CSS的方法目前只在Chrome工作。 height不是官方可以使用CSS動畫的屬性（尚未）。

它從頂部長到底部的原因是因爲SVGs的座標原點位於左上角，所以x，y一個<rect>座標也是在左上角。矩形的右下角位於x+width,y+height。

如果您需要跨瀏覽器的方式來爲SVG元素設置動畫，那麼可能需要查看許多可用的JS SVG動畫庫之一。