SVG：如何为路径的高度设置动画？

Question

我正在尝试使用svg rect标签创建圆角。但是rx和ry在四个边缘中制作圆形边缘。相反，我试图仅创建两个边缘（左上和右上）。我对path命令执行的操作相同（工作JS Fiddle）。

创建rect的原因是我正在尝试创建动画的生长高度。

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

---

已编辑

以下代码将使圆角达到我的期望。我已经使用三次曲线法。

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

我的问题/问题是当我在路径中创建动画时，高度不会随着动画的增长而增加。

Answer 1

您可以使用CSS3的scaleY()转换来创建所需的动画。

最初，您path将具有scaleY(0)值（其行为将类似于元素具有的值height: 0），我们将对其进行动画处理scaleY(1)。

为此，需要以下CSS：

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

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

工作演示：

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

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

.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);
  }
}