SVG анимация (SMIL), как повторить всю анимацию? - PullRequest
Новая
       38

SVG анимация (SMIL), как повторить всю анимацию?

1 голос
/ 20 мая 2019

Я создаю набор SVG icons, и мне нужно включить анимацию в SVG-файл - без JavaScript или без CSS . Идея состоит в том, чтобы иметь автономные файлы SVG, которые можно добавить, как в моем HTML-коде, например <img src="my-icon.svg">

Каждый значок имеет набор SMIL animations, включая вступление, основные анимации, анимацию, инициированную событием, и выход.

Файл SVG выглядит так: 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" ...>

    <g id="group1" ...>
        <path id="path1" d="M0-0l37.5,27,...">
        <path id="path2" d="M0-0l37.5,27,...">
        ...
    </g>

    <g id="group2" ...>
        ...
    </g>

    <!-- Intro -->
    <animate
        id="animation1"
        attributeName="opacity"
        from="0" 
        to="1"
        begin="2s" 
        dur="1.5s"
        keySplines="1 0 1 1"
        calcMode="spline"
    />

    <!-- Animations -->
    <animateTransform
        id="animation2"
        xlink:href="#arrows"
        attributeName="transform"
        type="translate"
        from="..."
        to="..."
        begin="animation1.end - 1s"
        dur="2s"
        values="..."
        keyTimes="..."
        keySplines="..."
        calcMode="spline"
        repeatCount="3"
    />

    <animate
        ...
    />

    ...

    <!-- Outro -->
    <animate
        id="animationX"
        attributeName="opacity"
        from="1" 
        to="0"
        begin="animation3.end - 1s" 
        dur="1.5s"
        keySplines="0.5 0 1 0.5"
        calcMode="spline"
    />

</svg>

В этом примере показан своевременный набор анимаций , который я хотел бы повторять бесконечно - Мне нужно повторить всю анимацию .

Есть идеи?

1 Ответ

0 голосов
/ 21 мая 2019

Я немного огляделся и должно быть: repeatCount="indefinite"

Я наткнулся на эту страницу довольно быстро и просто попробовал сам

надеюсь, что это работает!

...