开发者

How to create an endless animation loop in SVG

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 pos开发者_开发知识库sibilities...

Thanks in advance

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


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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜