css - SVG linearGradient 与动画关键帧在一起

Question

我创建了使用两个路径 sec1 和 sec2 的简单示例。对于这两个路径，我都使用带有 ID step1 和 step2 的 linearGradient。第一部分 (sec1) 很好，第二部分 (sec2) 还不行。

Sec2 必须首先隐藏，然后改变位置和比例。我尝试通过关键帧来做到这一点，但无法在开始时隐藏 sec2。此外，如果我尝试在 linearGradient 属性 begin="step1.end;" 中使用，它不起作用，并且在填充 sec1 后不运行。

我想创建一条从左到右然后从上到下开始的动画线，首先更改 sec2 位置和比例(隐藏)，然后开始绘制并显示渐变动画。

我这里的例子: https://jsfiddle.net/0gkrch42/

Answer 1

你有两个主要问题......

1. 您的第二个动画没有开始隐藏，因为您的渐变偏移量从“40%”开始而不是零

2. 第二个问题是，当您使用 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>