svg - 在 SVG 中，我可以用不同的开始时间为许多对象 (64) 设置动画，而不必创建 64 个不同的动画吗？

Question

我知道带有 xlink:href 的标签可以在许多不同的位置以及不同的比例、角度、不透明度等下运行相同的动画。但是我可以更改动画的 xlinked 实例的开始时间或持续时间吗？

我想要一个 10 x 10 的正方形网格按顺序从屏幕上掉下来，一个从 0 秒开始，一个从 0.1 秒开始，一个从 0.2 秒开始，等等。如果不创建 100 个动画，我看不到如何做到这一点，所有除了开始时间都一样！在纯 SVG 中是否有一种相当有效的方法来做到这一点？还是我必须学习和介绍一些 JavaScript？谢谢！

Answer 1

一般来说，答案是否定的。克隆的元素并不独立于它们所引用的元素。恰恰相反，元素的渲染内容<use>必须反映引用元素的所有生活变化，包括所有动画。

对于 SMIL 和 CSS 动画，答案仍然正确。现在您可能知道，如果元素具有可以被该内容继承的样式规则，则呈现的内容可能会有所不同。<use>（fill如下例所示。）那么，如果您在引用的源元素上定义 CSS 动画，然后animation-delay为每个设置不同的样式规则，会发生什么<use>？动画仍将同时开始，animation-delay不可继承。

对于您描述的动画，使用 CSS 动画有一个不错的解决方案。你的克隆元素是惰性的，只需要作为一个整体移动。因此，对<use>元素本身进行动画处理就足够了。现在上面暗示的技术起作用了：

.dropping {
  animation: drop 2s forwards;
}
@keyframes drop {
  from {
    transform: translate(0px, 0px);
  }
  to {
    transform: translate(0px, 300px);
  }
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" height="300">
<symbol id="drop">
  <rect width="50" height="50" />
</symbol>
<use class="dropping" xlink:href="#drop" x="0" style="animation-delay:0s;fill:rgb(255, 0, 0);" />
<use class="dropping" xlink:href="#drop" x="50" style="animation-delay:0.5s;fill:orange;" />
<use class="dropping" xlink:href="#drop" x="100" style="animation-delay:1s;fill:yellow;" />
<use class="dropping" xlink:href="#drop" x="150" style="animation-delay:1.5s;fill:green;" />
<use class="dropping" xlink:href="#drop" x="200" style="animation-delay:2s;fill:blue;" />
</svg>