Dustin Dustin - 1 year ago 62
Javascript Question

Animate a rectangle's height to go up, not down

I'm pretty new to snap.svg. I have a bar graph with rectangle elements that grow vertically. I'm having trouble animating them to go from 0 height to something like 200. They all animate from the top down. I need them to go from the bottom up.

This is my js..

var s = Snap(".performance_chart");

Snap.load("images/performance.svg", function(f) {

bar1 = f.select(".bar1").animate({height:202.43}, 1000, mina.linear);



And these are a few examples of the
bars on the chart. The first
is set to
so I can animate it starting from 0.

<rect class="bar bar1" x="108.3" y="246.08" width="55.21" height="0"/>
<rect class="bar bar2" x="252.89" y="251.52" width="55.21" height="77.67"/>
<rect class="bar bar3" x="308.09" y="112.25" width="55.21" height="216.93"/>
<rect class="bar bar4" x="395.5" y="237.85" width="55.21" height="91.34"/>

I've read things about needing to flip the y axis using a
attribute but nothing I've done seems to work the way I need it to.

Answer Source

The x and y attributes represent the top left corner of your rectangle. Decrease the top position by the same value as the height increases:

bar1 = f.select(".bar1")
     y: 246.08 - 202.43
  }, 1000, mina.linear);

height + y needs to remain equal in order for the bar to keep its position. Here's an example:

<div style="display: inline-block; background: #eee;">
  <svg height="50" width="50" viewBox="0 0 100 100">
    <rect width="10" height="30" x="45" y="70"></rect>

<div style="display: inline-block">
  <svg height="50" width="50" viewBox="0 0 100 100">
    <rect width="10" height="70" x="45" y="30"></rect>