javascript - 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).
• 可以使用或省略可选的命令字母(用于重复相同的命令)。
• 空格可以有不同的长度，也可以换成逗号。

这样做的原因实际上并不难理解:要计算中间状态，渲染器需要通过在“from”和“to”之间选择适当的值来制定路径定义, 对于每个控制点。如果字母或点数不同，则不能计算中间值。

目前你从

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>