我创建一个简单的示例，其中使用两个路径sec1和sec2。对于这两个路径，我都使用ID为linearGradient和step1的step2。第一部分（sec1）运作良好，第二部分（sec2）尚未完成。Sec2必须首先隐藏，然后更改位置和比例。我尝试通过关键帧来做到这一点，但一开始无法隐藏sec2。另外，如果我尝试在linearGradient属性begin="step1.end;"中使用它，则无法正常工作，并且在填充sec1后无法运行。
我想创建一条动画线，该动画线从左到右然后从上到下开始，并在开始绘制并显示渐变动画后首先更改sec2位置和比例（隐藏）。
我的例子在这里：
https://jsfiddle.net/0gkrch42/
最佳答案
您有两个主要问题...
您的第二个动画没有开始隐藏，因为您的渐变偏移从“ 40％”而不是零开始
第二个问题是，当您将id.end用于计时属性时，id必须引用另一个<animation>元素，而不是图形元素。
<svg id="Logo-Defs" version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="step1" x1="0" y1="0" x2="1" y2="0">
<stop offset="40%" stop-opacity="1" stop-color="black">
<animate attributeName="offset" values="0;1" repeatCount="1" fill="freeze" dur="5s" begin="0s" />
</stop>
<stop offset="40%" stop-opacity="0" stop-color="black">
<animate id="anim1" attributeName="offset" values="0;1" repeatCount="1" fill="freeze" dur="5s" begin="0s" />
</stop>
</linearGradient>
<linearGradient id="step2" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-opacity="1" stop-color="black">
<animate attributeName="offset" values="0;1" repeatCount="1" fill="freeze" dur="5s" begin="anim1.end;" />
</stop>
<stop offset="0%" stop-opacity="0" stop-color="black">
<animate attributeName="offset" values="0;1" repeatCount="1" fill="freeze" dur="5s" begin="anim1.end;" />
</stop>
</linearGradient>
<g>
<path id="sec1" class="cls-1" d="M155.06,43V41.83A42.78,42.78,0,0,0,143.12,16.5c-10.62-11.07-26-12-26-12S10.86,5,3.3,5C3.27,5,.44.25.44.25L117.08.73C137,2,158,18.38,159.07,43,158.09,43,156.08,43,155.06,43Z" />
<path id="sec2" class="cls-1" d="M159.22,129.83V43.18h-4.06q.11,43.42.22,86.84,0,1.89,0,3.78v.91h3.82Z" />
</g>
</defs>
</svg>
<svg id="svg" class="Animate-Path" width="100%" height="100%" viewBox="0 0 512 650" xml:space="preserve">
<use id="Draw-sec1" xlink:href="#sec1" fill="url(#step1)" />
<use id="Draw-sec2" xlink:href="#sec2" fill="url(#step2)" />
<!--<use class="Animate-Fill" xlink:href="#Logo-Group" /> -->
</svg>