svg - 如何在 SVG 中创建无限循环动画

Question

我是 SVG 动画的新手，我尝试将一个组元素旋转 8 次 45°。 (45、90、135、180、225、270、315、360)。下面的示例对我来说效果很好，但是我如何创建整个动画的无限循环？现在它只运行一次。

我对其他可能性持开放态度...

提前致谢

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="128px" viewBox="0 0 16 16">

    <g>
        <animateTransform attributeName="transform" type="rotate" values="45 8 8" begin="1000ms"/>
        <animateTransform attributeName="transform" type="rotate" values="90 8 8" begin="2000ms"/>
        <animateTransform attributeName="transform" type="rotate" values="135 8 8" begin="3000ms"/>
        <animateTransform attributeName="transform" type="rotate" values="180 8 8" begin="4000ms"/>
        <animateTransform attributeName="transform" type="rotate" values="225 8 8" begin="5000ms"/>
        <animateTransform attributeName="transform" type="rotate" values="270 8 8" begin="6000ms"/>
        <animateTransform attributeName="transform" type="rotate" values="315 8 8" begin="7000ms"/>
        <animateTransform attributeName="transform" type="rotate" values="360 8 8" begin="8000ms"/>

        <rect fill="#404040" x="7.062" y="3.625" width="1.875" height="8.75"/>
    </g>

</svg>

Answer 1

如果您将示例更改为仅使用一个 animateTransform 元素，所有角度均在 values 属性中提供，您可以使用 repeatCount 属性设置重复次数动画应该重复。如果 repeatCount 设置为无限期，动画将永远重复。

我认为以下示例将满足您的需求。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="128px" viewBox="0 0 16 16">

    <g>
        <animateTransform attributeName="transform" type="rotate" 
           values="0 8 8; 45 8 8; 90 8 8; 135 8 8; 180 8 8; 225 8 8; 270 8 8; 315 8 8" 
           dur="8s" calcMode="discrete" repeatCount="indefinite" />

        <rect fill="#404040" x="7.062" y="3.625" width="1.875" height="8.75"/>
    </g>


</svg>