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

其原因实际上并不难理解：要计算临时状态，渲染器需要通过在和“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>

svg动画没有动画流畅

1 个答案: