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，然后动画指向它，即

<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 动画元素。

Answer 2

要详细说明罗伯特的答案，您可以重用包含动画的元素<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>