Непрозрачность анимации SVG в цикле

Я хотел бы сделать непрозрачность пути svg для перехода от 0 до 100 обратно в 0 и до 100 в непрерывном цикле.

Пока я могу заставить его анимировать от 0 до 100, но не вернуться снова,

Любые идеи?

Спасибо

Ответ 1

У вас есть две отдельные анимации: одна для увеличения непрозрачности и одна для уменьшения. Каждый начинается, когда другой заканчивается, но первый также начинается с 0s. Вот пример для rect:

<rect x="10" y="10" width="20" height="20">
    <animate id="animation1"
             attributeName="opacity"
             from="0" to="1" dur="1s"
             begin="0s;animation2.end" />
    <animate id="animation2"
             attributeName="opacity"
             from="1" to="0" dur="1s" 
             begin="animation1.end" />
</rect>

Ответ 2

Вы можете анимировать любое количество значений с помощью атрибута values, например:

<rect x="10" y="10" width="20" height="20">
    <animate attributeName="opacity"
             values="0;1;0" dur="1s"
             repeatCount="indefinite"/>
</rect>

Это будет анимировать от непрозрачности 0 до непрозрачности 1 (100%), а затем снова вернуться к 0 в течение 1 секунды.