Я создал скрипку
<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"?>
движение анимации должно быть снизу вверх, а цвет градиента должен быть слева направо. а также мне нужно, чтобы это было анимировано, как волны на воде