анимация не анимируется, а прыгает до конца

Я пытаюсь использовать тег анимации SVG, чтобы изменить путь от половинной заливки до полной заливки.

        <svg class="background-gradient" viewBox="0 0 100 100" preserveAspectRatio="none">
            <defs>
                <linearGradient id="grad">
                    <stop offset="0%" stop-color="rgba(82,181,244,.1)" stop-opacity="1"></stop>
                    <stop offset="100%" stop-color="rgba(70,215,255,.7)" stop-opacity="1"></stop>
                </linearGradient>
            </defs>
            <path id="scroll-path" d="M0 0 H100 v 100" fill="url(#grad)">
                <animate attributeName="d" from="M0 0 H100 v 100" to="M0 0 H100 L100 100 L0 100" dur="1s" repeatCount="indefinite" />
            </path>
        </svg>

В настоящее время он просто прыгает от начала к концу анимации и не показывает плавную заливку, на которую я надеялся в промежутке.

Любые идеи?


svg animation svg-animate
person Kieranmv95    schedule 29.03.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Чтобы анимация была плавной, путь должен иметь одинаковое количество и типы команд.

Ваш первый путь состоит из 3 команд M H v

Ваш второй путь состоит из 4 команд M H L L

Вам нужно будет написать первый путь, используя 2 L-команды вместо v, или второй как v вместо двух L-команд.

person Robert Longson    schedule 29.03.2016