Question

我是SVG-Animation的新手，我尝试将组元素旋转了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

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

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

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

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

1 个答案: