SVG: How to animate a path's height?

Question

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.

http://stackoverflow.com/questions/10177985/svg-rounded-corner — Amit Kumar Singh, Aug 28 '17 at 07:11
@Amit I have done this thing. Please check the Fiddle in my question. I'm trying to create the same thing using `rect` tag. — mkHun, Aug 28 '17 at 07:13
You can't use the rect tag for this. What's wrong with the path tag? — Robert Longson, Aug 28 '17 at 07:40
@RobertLongson The problem is I'm trying to animate the height like auto grow height. Thats why I'm moving to rect tag. — mkHun, Aug 28 '17 at 07:44
Why not ask that question about animating the path tag then! — Robert Longson, Aug 28 '17 at 07:46
Possible duplicate of [SVG rounded corner](https://stackoverflow.com/questions/10177985/svg-rounded-corner) — Mohammad Usman, Aug 28 '17 at 08:23
@MohammadUsman Read the question, I'm asking to create the rounded corner in **RECT** tag not in path. I have done the rounded corner in path tag. My doubt is animate the height in svg path. If it is not possible, how to make the rounded corner in rect tag. — mkHun, Aug 28 '17 at 09:43
@mkHun Do you wants to animate `height` from bottom to top or vice versa? — Mohammad Usman, Aug 28 '17 at 10:09
@MohammadUsman Exactly I'm trying to animate the height bottom to top. — mkHun, Aug 28 '17 at 10:17
@mkHun Is this what you want? [Fiddle](https://jsfiddle.net/rtc84nq6/) — Mohammad Usman, Aug 28 '17 at 10:19
@mkHun Even a simpler variant. [Fiddle](https://jsfiddle.net/kexpme84/) — Mohammad Usman, Aug 28 '17 at 10:39

score 9 · Accepted Answer · answered Aug 28 '17 at 10:55

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>

score -1 · Answer 2 · answered Aug 28 '17 at 07:24

<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.

score -1 · Answer 3 · answered Aug 28 '17 at 07:49

-1

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.

img{ width:100%;
height:100%;
border-top-left-radius:20px;
border-top-right-radius:20px;
}

<img src="http://wallpaperswide.com/download/color_splash_effect-wallpaper-1366x768.jpg">

answered Aug 28 '17 at 07:49

OP is asking about `SVG` not about `img` from `HTML`. – Mohammad Usman Aug 28 '17 at 08:10

SVG: How to animate a path's height?

3 Answers3