How to animate svg rect to grow

Question

I'm trying to make an svg grow, as a basic bar chart that is growing from zero to the height of 27.5, e.g. I want it to animate from bottom to top

I tried the following code but it makes the rectangle grow from top to bottom, rather than bottom to top (0 height -> 27.5 height).

<?xml version="1.0" encoding="utf-8"?>
    <svg 
       version="1.1"
       id="MAIN"
       xmlns="http://www.w3.org/2000/svg" 
       xmlns:xlink="http://www.w3.org/1999/xlink"
       x="0px"
       y="0px"
       viewBox="0 0 1190.6 841.9" 
       enable-background="new 0 0 1190.6 841.9"
       xml:space="preserve">
           <rect
              id="barchart1" 
              x="148.8"
              y="190"
              fill="#921930"
              width="39.8"
              height="27.5">
                  <animate 
                     attributeName="height" 
                     from="0" 
                     to="27.5"
                     dur="3s"
                     fill="freeze"/>
           </rect>
    </svg>

http://jsfiddle.net/4kp5Lq53/

The problem is that its animating from top to bottom, but I want it to grow from zero to a height of 27.5 (e.g. the opposite to what it is doing in the jsfiddle) — Ushka, Jul 03 '15 at 07:22

score 28 · Accepted Answer · answered Jul 03 '15 at 08:06

Instead of animating two attributes simultaneously, I think you'll find it much easier to use a transform attribute to get the coordinate system you wanted in the first place.

In this example, the animated <rect> elements are wrapped in the following <g> element:

<g transform="scale(1,-1) translate(0,-200)">
  ...
</g>

The scale transform turns all the y coordinates upside down, and the translate transform shifts the coordinates so that y=0 is at the bottom of the SVG canvas.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
     width="400" height="200" viewBox="0 0 400 200">
  <g transform="scale(1,-1) translate(0,-200)">
    <rect x="50" y="0" fill="#f00" width="100" height="100">
      <animate attributeName="height" from="0" to="100" dur="0.5s" fill="freeze" />
    </rect>
    <rect x="150" y="0" fill="#f70" width="100" height="200">
      <animate attributeName="height" from="0" to="200" dur="0.5s" fill="freeze" />
    </rect>
    <rect x="250" y="0" fill="#ec0" width="100" height="150">
      <animate attributeName="height" from="0" to="150" dur="0.5s" fill="freeze" />
    </rect>
  </g>
</svg>

thanks very much, this did the trick! I had to tweak the translate to make it work with my specific use-case as I have exported an Illustrator file as an SVG and I'm tweaking the code thereafter. — Ushka, Jul 03 '15 at 08:25

score 4 · Answer 2 · answered Jul 03 '15 at 07:51

4

To animate from bottom to top you'll have to move up your rectangle along the y axis at the same time

<rect  id="barchart1" x="148.8" y="190" fill="#921930" width="39.8" height="27.5">
    <animate attributeName="height" from="0" to="27.5" dur="3s" fill="freeze"/>
    <animate attributeName="y" from="190" to="162.5" dur="3s" fill="freeze"/>
</rect>

See fiddle : http://jsfiddle.net/4kp5Lq53/2/

answered Jul 03 '15 at 07:51

ylerjen

4,109
2
25
43

Hi this is partly what I want... but I want the rectangle to remain in the same position. - so it remains in the same x and y position, but only the height of the rectangle animates and grows from zero to 27.5 – Ushka Jul 03 '15 at 08:11
Feels kind of clunky to animate both unless no alternative. – Ian Jul 03 '15 at 08:25
@Ushka then simply remove the second `animate` tag related to the y position – ylerjen Jun 03 '21 at 16:26

How to animate svg rect to grow

2 Answers2

Linked