Question

我创建了一个使用两个路径sec1和sec2的简单示例。对于这两个路径，我使用标识为linearGradient的{{1}}和step1。第一部分（step2）工作得很好，第二部分（sec1）还没有。

sec2首先必须隐藏，然后改变位置和比例。我尝试通过关键帧来完成此操作，但无法在开头隐藏Sec2。此外，如果我尝试在sec2属性linearGradient中使用它，则无效，并且在填充begin="step1.end;"后无法运行。

我希望创建一个动画线，从左到右，然后从上到下，在开始绘制和显示渐变动画后，首先更改sec1位置和缩放（隐藏）。

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

Answer 1

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

您的第二个动画未开始隐藏，因为您的渐变偏移量从“40％”开始而不是零

第二个问题是，当您使用id.end作为计时属性时，id必须引用另一个<animation>元素，而不是图形元素。

< / LI>

<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>

SVG linearGradient与动画关键帧一起使用

1 个答案: