html - SVG动画(SMIL)，如何重复整个动画？

Question

我正在构建一组 SVG icons我需要在 SVG 文件中包含动画 - 没有 Javascript 或 CSS。这个想法是拥有独立的 SVG 文件，可以按原样添加到我的 html 代码中，例如 <img src="my-icon.svg">

每个图标都有一组 SMIL animations包括片头、主要动画、事件触发动画和片尾。

SVG 文件如下所示:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" ...>

    <g id="group1" ...>
        <path id="path1" d="M0-0l37.5,27,...">
        <path id="path2" d="M0-0l37.5,27,...">
        ...
    </g>

    <g id="group2" ...>
        ...
    </g>

    <!-- Intro -->
    <animate
        id="animation1"
        attributeName="opacity"
        from="0" 
        to="1"
        begin="2s" 
        dur="1.5s"
        keySplines="1 0 1 1"
        calcMode="spline"
    />

    <!-- Animations -->
    <animateTransform
        id="animation2"
        xlink:href="#arrows"
        attributeName="transform"
        type="translate"
        from="..."
        to="..."
        begin="animation1.end - 1s"
        dur="2s"
        values="..."
        keyTimes="..."
        keySplines="..."
        calcMode="spline"
        repeatCount="3"
    />

    <animate
        ...
    />

    ...

    <!-- Outro -->
    <animate
        id="animationX"
        attributeName="opacity"
        from="1" 
        to="0"
        begin="animation3.end - 1s" 
        dur="1.5s"
        keySplines="0.5 0 1 0.5"
        calcMode="spline"
    />

</svg>

此示例显示了我想要无限重复的动画堆栈 - 我需要重复整个动画。

有什么想法吗？

Answer 1

据我从您的问题中了解到，您需要连续执行多个动画
并且在最后一个动画结束后，转到第一个动画的执行

这可以使用启动第一个动画的条件来完成

begin="svg1.click;animation4.end"，其中

svg1.click - 单击后第一次启动动画

animation4.end - 在最后一个动画结束后重新启动相同的动画

这就是几个连续动画循环的实现方式。

点击后将开始动画

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" style="border:1px solid">

    <g id="group1" opacity="0">
       <path  fill="#6DBB00" d="M16 0a16 16 0 100 32 16 16 0 000-32z"/>
  <path fill="#FAFAFA" d="M24.1 12.6l-8.7 8.7a1.3 1.3 0 01-1.8 0l-4.4-4.4a1.3 1.3 0 112-1.8l3.3 3.3 7.7-7.7a1.3 1.3 0 112 2z"/>
    </g>

    <g id="group2" >
        
    </g>

    <!-- Intro --> 
    <!-- Icon appearance animation -->
    <animate 
        xlink:href="#group1"
        id="animation1"
        attributeName="opacity"
        values="0;1"
        begin="svg1.click;animation4.end" 
        dur="1s"
        fill="freeze"
        restart="whenNotActive"
       
    />

    <!-- Animation of moving icons -->
    <animateTransform
        id="animation2"
        xlink:href="#group1"
        attributeName="transform"
        type="translate"
        values="0,0;32,0"
        begin="animation1.end"
        dur="1s"
        fill="freeze"
        restart="whenNotActive"
    />

   

    <!-- Outro --> 
    <!-- Disappearing icon animation -->
    <animate
        xlink:href="#group1"
        id="animation3"
        attributeName="opacity"
        values="1;0"
        begin="animation2.end" 
        dur="1s"
        fill="freeze"
        restart="whenNotActive"
        
    />  
      <!-- Animation of returning the icon to its original position -->
    <animateTransform
        id="animation4"
        xlink:href="#group1"
        attributeName="transform"
        type="translate"
        values="32,0;0,0"
        begin="animation3.end"
        dur="1s"
        fill="freeze"
        restart="whenNotActive"
    />

</svg>