animation - 如何在没有 javascript 的情况下在 SVG 中重用动画标签

Question

我要重用<animate>没有 javascript 的标签。像这样的东西:

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

但是我发现的所有示例都在 <rect> 中包含动画。标签或他们使用 javascript 等。

由于您可以重用图形渐变和蒙版，有没有办法重用 <animate>标签？

Answer 1

你很接近，但链接实际上是反过来的。被动画化的对象需要 id，然后 animate 指向它，即

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

不可能“重用”SMIL 动画元素。