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

【问题标题】：SVG: How to animate a path's height?SVG：如何为路径的高度设置动画？
【发布时间】：2018-02-05 09:17:59
【问题描述】：

我正在尝试使用 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>

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

【问题讨论】：

stackoverflow.com/questions/10177985/svg-rounded-corner
@Amit 我做了这件事。请检查我的问题中的小提琴。我正在尝试使用rect 标签创建相同的东西。
您不能为此使用 rect 标签。路径标签有什么问题？
@RobertLongson 问题是我正在尝试为高度设置动画，例如自动增长高度。这就是我转向 rect 标签的原因。
为什么不问那个关于动画路径标签的问题！

标签： javascript html css svg css-animations

【解决方案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);
  }
}

工作演示：

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

【讨论】：

【解决方案2】：

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

这有点棘手，它会完成工作。它是一个样本，所以你也可以对你的做同样的事情。

【讨论】：

【解决方案3】：

对于只有顶部的圆角，您可以在 css 中使用它

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

下面是一个示例。

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

&lt;img src="http://wallpaperswide.com/download/color_splash_effect-wallpaper-1366x768.jpg"&gt;

【讨论】：

OP 询问的是 SVG 而不是来自 HTML 的 img。