如何制作从 div 底部到顶部的 SVG 高度动画？答案

【问题标题】：How to make SVG height animation from bottom of div to top?如何制作从 div 底部到顶部的 SVG 高度动画？
【发布时间】：2020-12-15 11:29:54
【问题描述】：

我正在尝试制作带有线条和圆形的 SVG 动画。线条应该是动画的，圆圈应该相对于线条高度移动。这条线应该从 div 的底部开始，在动画后它应该用圆圈实现 div 广告的顶部，然后应该动画到底部，然后从底部到顶部，从顶部到底部一直只有一个，除非 - 如果用户将鼠标悬停在圆圈上它应该停止，如果用户将鼠标悬停在圆圈上，它应该在停止时开始。

div {
  height: 100px;
}

<div>
<svg xmlns="http://www.w3.org/2000/svg" width="171" height="728" viewBox="0 0 171 728">
<defs><style>.a{fill:#000;}</style></defs><circle class="a" cx="85.5" cy="85.5" r="85.5"></circle>
<rect class="a" width="7" height="0" transform="translate(82 113)">
<animate id="animation"
    attributeName="height"
    attributeType="XML"
    from="0" to="615"
    begin="0s" dur="5s"
    fill="freeze" />
<animate id="animation2"
    attributeName="height"
    attributeType="XML"
    from="615" to="0"
    begin="5s" dur="10s"
    fill="freeze" />
</rect>
</svg>
</div>

【问题讨论】：

标签： svg svg-animate

【解决方案1】：

动画可以有两个以上的状态。要前后移动一个值，您可以写values="728;113;728"。然后，您需要定义 keyTimes="0;.5;1" 以在简单的持续时间内分布这些状态 - 这意味着，所有值都必须介于 0 和 1 之间，如果 dur="10s"，状态将在这段时间内达到，即。 e. 0 秒、5 秒和 10 秒。 keyTimes 和 values 中的值的数量必须匹配。

要让动画无限重复，你需要设置repeatCount="indefinite"。

动画的开始和结束时间可以与事件相关。 end="stop.mouseenter" 表示当鼠标进入带有id="stop"（圆圈）的元素时动画将停止。对于重新启动动画，您可以利用动画可以有多个开始时间这一事实。 begin="0s;stop.mouseleave" 表示加载后直接启动，鼠标离开id="stop"的元素时也会启动。

在停止时，动画被移除，因此线条返回到其基本状态（无长度），并将从那里重新开始。这显然与暂停动画不同（将其冻结在鼠标悬停开始时的状态），但您的问题并未说明这是否是您想要实现的。这些声明性动画没有暂停动画的机制。你需要一个 CSS 动画，这看起来会有所不同。

最后，如果您使用<line> 元素而不是<rect>，事情会变得容易一些。然后您只需为y1 属性设置动画，将其从最低点移动到最高点，然后再返回。

请注意，我已为该行指定了一个单独的类，因为它需要具有明确的颜色和宽度。

div {
  height: 100px;
}
.b {
  stroke: black;
  stroke-width: 7px;
}

<div>
<svg xmlns="http://www.w3.org/2000/svg" width="171" height="728" viewBox="0 0 171 728">
<defs><style>.a{fill:#000;}</style></defs>
<circle id="stop" class="a" cx="85.5" cy="85.5" r="85.5"></circle>
<line class="b" x1="85.5" y1="728" x2="85.5"  y2="728">
<animate id="animation"
    attributeName="y1"
    attributeType="XML"
    values="728;113;728"
    keyTimes="0;.5;1"
    begin="0s;stop.mouseleave"
    end="stop.mouseenter"
    dur="10s"
    repeatCount="indefinite" />
</line>
</svg>
</div>

【讨论】：