Горизонтальная градиентная анимация SVG

Я создал скрипку

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="280.089px" height="280.089px" viewBox="0 0 280.089 280.089" enable-background="new 0 0 280.089 280.089" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-229.002" y1="335.0444" x2="-47.9087" y2="335.0444" gradientTransform="matrix(1 0 0 -1 278.5 475.0889)">
    <stop offset="0" style="stop-color:#4D75B1" />
    <stop offset="0.1138" style="stop-color:#4C7BB0" />
    <stop offset="0.2617" style="stop-color:#4A8BAD" />
    <stop offset="0.4278" style="stop-color:#46A6A7" />
    <stop offset="0.5117" style="stop-color:#44B6A4" />
    <stop offset="0.9093" style="stop-color:#828282" />
    <animate attributeName="offset" dur="20s" values="0;1;0" repeatCount="indefinite" />
    <stop offset="1" style="stop-color:#77D5C0" />
</linearGradient>
<polygon class="wdgreyAnim" fill="url(#largeGradient)" points="49.498,91.095 73.592,188.992 101.322,188.992 115.607,135.212 129.191,188.994 150.898,188.994 177.931,110.705 195.294,167.986 162.38,167.986 155.238,188.994 230.591,188.994 199.076,91.095 158.711,91.211 141.919,136.94 132.27,91.095 103.699,91.095 91.522,142.325 79.75,91.095 " />
<defs>
    <linearGradient id="largeGradient" x2="100%">
        <stop offset="0%" stop-color="#4c7eaf"></stop>
        <stop offset="25%" stop-color="#4a8eac"></stop>
        <stop offset="50%" stop-color="#46a5a7"></stop>
        <stop offset="75%" stop-color="#53bfac"></stop>
        <stop offset="100%" stop-color="#828282"></stop>
        <animate attributeName="x2" dur="5s" from="0%" to="100%" repeatCount="indefinite" />
    </linearGradient>
</defs>

анимация движется вертикально, но я хочу, чтобы она перемещалась горизонтально. Я не могу этого сделать. кто-нибудь, пожалуйста, помогите мне. Моя путаница в том, что градиент похож на вертикальный. как я могу установить стоп-тег со смещением для разных цветов и анимации. а также в анимированном теге. если я использую замораживание вместо атрибута Repeatcount, который будет принимать полный один цвет, но я хочу, чтобы он был заполнен градиентом, то есть тем, как он анимируется. Лучше, если анимация идет волнами снизу вверх. (эффект заливки жидкостью) JSfiddle

Добавлен код svg для конечного изображения, которое мне нужно после анимации.

<?xml version="1.0" encoding="utf-8"?>

скрипт js обновлен

движение анимации должно быть снизу вверх, а цвет градиента должен быть слева направо. а также мне нужно, чтобы это было анимировано, как волны на воде


svg animation polygon linear-gradients
person Thilak R    schedule 13.02.2015    source источник
comment
Если градиент идет сверху вниз и вы анимируете его слева направо, ничего не изменится.   -  person Robert Longson    schedule 13.02.2015
comment
по крайней мере, мне нужно, чтобы снизу вверх с волнообразной анимацией было ощущение, что вода заполняет эффект стекла   -  person Thilak R    schedule 13.02.2015
comment
Совершенно непонятно, чего вы хотите.   -  person Robert Longson    schedule 13.02.2015
comment
Я добавил еще одну js-скрипту (т.е. обновил JS-скрипт). пожалуйста, взгляните на него. изображение похоже на темно-синий цвет слева и светло-голубой цвет справа. после завершения анимации изображение должно быть таким (т.е. JS-скрипт обновлен). но движение анимации должно загружаться снизу вверх. вопрос в том, как добавить цвет градиента слева направо, а желаемое движение анимации - снизу вверх   -  person Thilak R    schedule 13.02.2015
comment
у меня есть gif-изображение, как я хочу. но я не могу разместить изображение здесь без десяти репутации   -  person Thilak R    schedule 13.02.2015

Ответы (1)


arrow_upward
4
arrow_downward

Вы имеете в виду вот так? Я только что использовал y2 вместо x2

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="280.089px" height="280.089px" viewBox="0 0 280.089 280.089" enable-background="new 0 0 280.089 280.089" xml:space="preserve">
    <polygon class="wdgreyAnim" fill="url(#largeGradient)" points="49.498,91.095 73.592,188.992 101.322,188.992 115.607,135.212 129.191,188.994 150.898,188.994 177.931,110.705 195.294,167.986 162.38,167.986 155.238,188.994 230.591,188.994 199.076,91.095 158.711,91.211 141.919,136.94 132.27,91.095 103.699,91.095 91.522,142.325 79.75,91.095 " />
    <defs>
        <linearGradient id="largeGradient" x2="0" y2="100%">
            <stop offset="0%" stop-color="#4c7eaf"></stop>
            <stop offset="25%" stop-color="#4a8eac"></stop>
            <stop offset="50%" stop-color="#46a5a7"></stop>
            <stop offset="75%" stop-color="#53bfac"></stop>
            <stop offset="100%" stop-color="#828282"></stop>
            <animate attributeName="y2" dur="5s" from="0%" to="100%" repeatCount="indefinite" />
        </linearGradient>
    </defs>
</svg>

person Robert Longson    schedule 13.02.2015
comment
Спасибо за вашу помощь. - person Thilak R; 13.02.2015