如何动画SVG矩形从下到上填充？

要实现SVG矩形从下到上填充的动画效果，可以使用SVG的动画属性和CSS样式来实现。以下是一种可能的实现方式：

1. 首先，创建一个SVG矩形元素，并设置其初始位置和大小。可以使用SVG的<rect>元素来创建矩形，通过设置x、y、width和height属性来定义矩形的位置和大小。
2. 接下来，使用CSS样式为矩形元素设置填充颜色。可以使用fill属性来设置填充颜色，可以是具体的颜色值或者渐变色。
3. 然后，使用SVG的动画属性来定义动画效果。可以使用<animate>元素来创建动画，通过设置attributeName属性为y，from属性为矩形的初始位置，to属性为矩形的最终位置，dur属性为动画的持续时间，repeatCount属性为动画的重复次数。
4. 最后，将动画元素添加到矩形元素中，使其生效。可以使用<animate>元素作为矩形元素的子元素，通过设置begin属性为indefinite，然后使用JavaScript代码来触发动画的开始。

下面是一个示例代码：

<svg width="200" height="200">
  <rect x="50" y="200" width="100" height="0" fill="#ff0000">
    <animate attributeName="height" from="0" to="200" dur="2s" repeatCount="indefinite" />
  </rect>
</svg>

在这个示例中，矩形的初始位置是(50, 200)，宽度为100，高度为0，填充颜色为红色(#ff0000)。动画属性attributeName设置为height，表示动画改变的属性是矩形的高度。from属性设置为0，表示动画的起始值是0，to属性设置为200，表示动画的结束值是200。dur属性设置为2s，表示动画的持续时间为2秒。repeatCount属性设置为indefinite，表示动画无限重复。

这样，当页面加载时，矩形将从下到上逐渐填充，形成动画效果。

腾讯云相关产品和产品介绍链接地址：

• SVG动画相关：https://cloud.tencent.com/document/product/1152/41014