How to reuse animation tag in SVG without javascript

Question

I want to reuse <animate> tags without javascript. Something like this:

<svg>
    <defs>
        <animate id="shrink"
            attributeName="width"
            from="100%" to="0%"
            dur="5s"
            repeatCount="1"
            fill="freeze" />
    </defs>

    <rect width="100%" 
        height="10%"
        fill="blue"
        animate="#shrink"/>
</svg>

But all the examples I find have the animation inside the <rect> tag or they use javascript etc.

Since you can reuse graphics gradients and masks, is there a way to reuse an <animate> tag?

Answer 1

You're close but linking actually works the other way round. The object being animated needs the id and the animate then points to it i.e.

<svg>
    <defs>
        <animate xlink:href="#r"
            attributeName="width"
            from="100%" to="0%"
            dur="5s"
            repeatCount="1"
            fill="freeze" />
    </defs>
    <rect id="r"
        width="100%"
        height="10%"
        fill="blue"/>
</svg>

It's not possible to "reuse" SMIL animation elements.

Answer 2

To elaborate on Robert's answer, you can reuse elements that contain animations with <use>:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <rect id="animation" width="10" height="10" 
          fill="#ff0000" opacity="0.25">
      <animate attributeName="opacity" 
               from="0.25" to="1" 
               begin="0s" dur="1s"/>
    </rect>
  </defs>

  <!-- use  multiple times -->
  <use xlink:href="#animation"/>
  <use xlink:href="#animation" x="100" />
</svg>