How to reuse animation tag in SVG without javascript

Question

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

 <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 that I find have animation inside the <rect> or they use javascript, etc.

Since you can reuse graphic gradients and masks, is there a way to reuse the <animate> ?

Answer 1

You are close, but communication really works the other way around. Animating an object requires an identifier, and the animat then points to it. Ie

 <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> 

Cannot "reuse" SMIL animation elements.

Answer 2

To clarify Robert’s answer, you can reuse elements containing 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>