SVG анимация не анимируется плавно

Question

Здесь я даю код html, который не работает должным образом, как я могу заставить его двигаться плавно?

Я рад использовать jQuery, если необходимо.

<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="1362px" height="219px" viewBox="0 0 1362 219" enable-background="new 0 0 1362 219" xml:space="preserve" class="header-svg-nav">
                    <g id="Shape_1">
                        <g>
                            <path fill="#454545" d="M1361.7-0.1L124.1,0.1L4,161.7c0,0-27.6,61.2,61,57.2s1297-110.5,1297-110.5L1361.7-0.1 z" class="header-svg-nav">
                            <animate attributeName="d" attributeType="XML" repeatCount="indefinite"
                            values="M1361.7-0.1L124.1,0.1L4,161.7c0,0-27.6,61.2,61,57.2s1297-110.5,1297-110.5L1361.7-0.1 z; 
                            M1361.7-0.1 L124.1,0.1 L4,161.7 c0,0-9.6,21.3,0.7,37.9 c9.5,15.4,31.4,19.7,60.3,19.3
				c70.7-1,109.2-28.3,161-41.9 c87.3-22.9,103,21.9,238,14c64.4-3.8,55.7-13.6,143-25 c129.3-16.8,154.8,4,273-7 c118.6-11,125.3-35,230-45 c107.5-10.2,196.2,5.9,252,20  C1361.9,89.3,1361.8,44.6,1361.7-0.1z;" begin="0s" dur="5s"/>
                            </path>
                        </g>
                    </g>
                </svg>

Answer 1

Анимация с замедлением между двумя определениями пути может работать, только если они структурно совпадают.

• Они должны иметь одинаковое количество контрольных точек, и все команды пути должны быть идентичны.
• Нельзя обменивать абсолютные (C) команды на относительные (c) или сокращенные команды кривой (S) на полные (C).
• Необязательные буквы команд (для повторенийта же команда) может быть использована или пропущена.
• Пробелы могут иметь различную длину или быть заменены на запятые.

Причина этого на самом деле не так сложна для понимания: вычислитьВ промежуточном состоянии средство визуализации должно сформулировать определение пути, выбрав подходящее значение между «от» и «до» для каждой контрольной точки.Не может быть вычисленного промежуточного значения, если буквы или количество точек различаются.

В настоящее время вы переходите от

M1361.7-0.1L124.1,0.1L4,161.7c0,0-27.6,61.2,61,57.2s1297-110.5,1297-110.5L1361.7-0.1 z

к более длинной команде

M1361.7-0.1 L124.1,0.1 L4,161.7 c0,0-9.6,21.3,0.7,37.9 c9.5,15.4,31.4,19.7,60.3,19.3 c70.7-1,109.2-28.3,161-41.9 c87.3-22.9,103,21.9,238,14c64.4-3.8,55.7-13.6,143-25 c129.3-16.8,154.8,4,273-7 c118.6-11,125.3-35,230-45 c107.5-10.2,196.2,5.9,252,20  C1361.9,89.3,1361.8,44.6,1361.7-0.1z

Тослишком сильно отличается.

И для того, чтобы они соответствовали, нужно приложить немало усилий.Я не знаю, поможет ли Illustrator в этом отношении.Он изменяет команды так, как считает оптимальным, и если это происходит в одном варианте команды, а не в другом, замедление все равно не будет работать.Единственное, на что вы можете положиться - это записать команды пути в текстовом редакторе одну под другой и сравнить число для числа, букву для буквы.

Версия ниже была разработана с Inkscape, некоторый опыт имного проб и ошибок.

<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="1362px" height="219px" viewBox="0 0 1362 219" enable-background="new 0 0 1362 219" xml:space="preserve" class="header-svg-nav">
                    <g id="Shape_1">
                        <g>
                            <path fill="#454545" d="M1361.7-0.1L124.1,0.1L4,161.7c0,0-27.6,61.2,61,57.2s1297-110.5,1297-110.5L1361.7-0.1 z" class="header-svg-nav">
                            <animate attributeName="d" attributeType="XML" repeatCount="indefinite"
                            values="M 1361.7,-0.1 124.1,0.1 4,161.7 C 4,161.7 -23.6,222.9 65,218.9 82,218.1 140.1,213.6 222.9,206.8 289.6,201.3 372.4,194.3 462.7,186.6 509.1,182.6 557.4,178.5 606.6,174.3 697.4,166.4 790.9,158.3 879.9,150.6 962.2,143.4 1040.7,136.6 1109.4,130.6 1193.6,123.2 1277.8,115.8 1362,108.4 Z; 
                                    M 1361.7,-0.1 124.1,0.1 4,161.7 C 4,161.7 -23.6,222.9 65,218.9 135.7,217.9 174.2,190.6 226,177 313.3,154.1 329,198.9 464,191 528.4,187.2 519.7,177.4 607,166 736.3,149.2 761.8,170 880,159 998.6,148 1005.3,124 1110,114 1217.5,103.8 1306.2,119.9 1362,134 Z;" begin="0s" dur="5s"/>
                            </path>
                        </g>
                    </g>
                </svg>