1

I know that the tag with xlink:href can run the same animation in many different positions and at different scales, angles, opacities, etc. But can I alter either the START time or DURATION of an xlinked instance of an animation?

I want a 10 x 10 grid of squares to drop off of the screen in sequence, one starting at 0s, one at 0.1s, one at 0.2s, etc. I can't see how to do this without creating 100 animations, all identical except for the start times! Is there a reasonably efficient way to do this in pure SVG? Or do I have to learn and introduce some JavaScript? Thanks!

darrellart
  • 11
  • 2

1 Answers1

1

In general, the answer is no. Cloned elements are not independent of the element they are referenced against. Just the oposite, the rendered content of a <use> element has to reflect all life changes to the referenced element, including all animations.

The answer remains true for both SMIL and CSS animations. Now you might know that the rendered content can differ if the <use> element has a style rule that can be inherited by that content. (Like the fill in the example below.) So what would happen if you defined the CSS animation on the referenced source element and then set a differnt animation-delay style rule for every <use>? The animations would still start at the same time, animation-delay is not inheritable.

For the animation you describe, there is a halfway decent solution using CSS animations. Your cloned element is inert and only has to move around as a whole. Therefore it is enough to animate the <use> element itself. Now the technique hinted at above works:

.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>
ccprog
  • 20,308
  • 4
  • 27
  • 44