Добавление перехода роста к прямоугольнику

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-анимационных библиотек.