mkHun mkHun - 27 days ago 8
Javascript Question

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.

Answer Source

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>