Как создать бесконечный цикл анимации в SVG - PullRequest
Новая
       32

Как создать бесконечный цикл анимации в SVG

3 голосов
/ 14 сентября 2011

Я новичок в SVG-Animation и пытался повернуть элемент группы восемь раз на 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>

1 Ответ

3 голосов
/ 16 сентября 2011

Если вы измените свой пример на использование только одного элемента 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>
...