如何在SVG中创建无尽的动画循环 [英] How to create an endless animation loop in SVG

问题描述

我是SVG动画的新手，我试图将组元素旋转45度八次. (45、90、135、180、225、270、315、360). 下面的示例对我来说很好用，但是如何为整个动画创建一个无限循环呢?现在它只运行一次.

I'm new to SVG-Animation and I tried to rotate a group-element eight times by 45°. (45, 90, 135, 180, 225, 270, 315, 360). Example below works fine for me, but how do I create an endless loop of the entire animation? Now it only runs once.

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

I'm open minded for other possibilities...

预先感谢

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

推荐答案

如果将示例更改为仅使用一个animateTransform元素，并且在values属性中提供了所有角度，则可以使用repeatCount属性来设置动画应重复的次数.如果将repeatCount设置为infinite，则动画将永远重复.

If you change your example to use only one animateTransform element with all angles provided in the values attribute, you can use the repeatCount attribute to set the number of times the animation should be repeated. If the repeatCount is set to indefinite, the animation will repeat forever.

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

The following example I think will do what you are looking for.

<?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中创建无尽的动画循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！