Блог

                 <animate id="op"
                attributeName="opacity"
                values="0;1;0" 
                dur="1s"
                begin="1s;op.end 3s"
                />
 

У меня есть этот код, который используется для затухания изображения, а затем снова включается с задержкой в 3 секунды, но когда оно исчезает в течение 3-секундной задержки, изображение снова появляется и становится видимым. Как я могу сделать его невидимым во время задержки?

добавьте fill=»freeze», если вы хотите, чтобы состояние анимации сохранялось после завершения анимации.

 <animate id="op"
                attributeName="opacity"
                values="1;0;0;1" 
                keyTimes="0;0.2;0.8;1"
                dur="5s"
                begin="1s"
                />
 

Вы можете использовать keyTimes . Единица keyTime соответствует единице value и представляет, в какой пропорции длительности должно быть достигнуто это заданное значение. Итак, здесь оно начинается с непрозрачности 1 в момент времени 0 * 5s = 0 с, затем в момент времени 0.2 * 5s = 1 с оно достигает непрозрачности 0 (исчезает), оно сохраняет непрозрачность 0 до времени 0.8 * 5s = 4s и возвращается к непрозрачности 1 в момент времени 1 * 5s = 5s (исчезает).

Рабочий пример:

 <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-50 -50 100 100">
<circle r="50">
        <animate id="op"
                attributeName="opacity"
                values="1;0;0;1" 
                keyTimes="0;0.2;0.8;1"
                dur="5s"
                begin="1s"
                />
</circle>
</svg>