SVG: How to animate a path's height?

I’m trying to create the rounded edges using svg rect tag. But rx and ry is making the rounded edges in four edges. Instead I’m trying to create only two edges (top left and top right). Same thing I have done with path command (Working JS Fiddle).

The reason of creating rect is I’m trying to create the animated grow height.

<rect x="50" y="0" fill="#f00" width="100" height="100">
    <animate attributeName="height" from="0" to="100" dur="0.5s" fill="freeze" />
</rect>

EDITED

The following code will give the rounded corner what I have expected. I have used Cubic Curve method.

<svg style="width:500px; height:800px;">
    <path class="draw" d="M 75 445 L75 116.66666666666669 C 80 91.66666666666669 120 91.66666666666669 125 116.66666666666669 L125 445 75 445" style="stroke: rgb(192, 31, 31); stroke-width: 2px; fill: rgb(216, 62, 62);"></path>
</svg>

My question/problem is when I create the animation in path, height is not growing with animation.



You can use CSS3’s scaleY() transformation to create the desired animation.

Initially your path will have scaleY(0) value (it will behave like the element has height: 0) and we will animate it to scaleY(1).

Following CSS will be required for this:

path {
  transform: scaleY(0);
  transform-origin: center bottom;
  animation: draw 1.5s linear forwards;
}

@keyframes draw {
  to {
    transform: scaleY(1);
  }
}

Working Demo:

.draw {
  animation: draw 1.5s linear forwards;
  transform-origin: center bottom;
  stroke: rgb(192, 31, 31);
  fill: rgb(216, 62, 62);
  transform: scaleY(0);
  stroke-width: 2px;
}

@keyframes draw {
  to {
    transform: scaleY(1);
  }
}
<svg width="400" height="200">
    <path class="draw"
          d="M 75 200 L75 25 C 80 0 120 0 125 25 L125 200 75 200" />
</svg>
<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;opacity:1" />
  <rect x="50" y="40" rx="0" ry="0" width="150" height="130" style="fill:red;opacity:1" />
  Sorry, your browser does not support inline SVG.
</svg>

This is little tricky and this will do the work.Its a sample so you can do the same with yours too.

For rounded corners for only the top you can use this in css

border-top-left-radius
border-top-right-radius

Here is an example below.