Question

我想在没有javascript的情况下重用<animate>个标签。像这样：

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

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>

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

2 个答案: