svg 淡入文本，淡出文本，并在设定的时间段内继续对新文本执行相同的操作

Question

我想修改代码相关如下：

我希望Word 1淡入 0.2 秒，然后在屏幕上停留 4.6 秒，然后淡出 0.2 秒（即总共 5 秒）
Word 1 保持关闭状态，直到 Word 2（下方）淡出。
接下来，我想用同样的方式介绍Word 2：淡入0.2秒，然后在屏幕上停留4.6秒，然后淡出0.2秒（即总共5秒） )
Word 2 保持关闭状态，直到 Word 1 淡出。 Word 1 如第 1 点和第 2 点所述重新出现。
和无限repeat/cycle 1, 2, 3, 4 在同一个序列中。

注意：屏幕上一次只有一个字，它们循环出现和消失，依次出现。

请指教

  
  
<svg width="100%" height="100%" viewBox="-180 5 700 300" xmlns="w3.org/2000/svg"; xmlns:xlink="w3.org/1999/xlink"; version="1.1"> 
  <path id="path" d="m0,110 h1100"/> 
    
  <text font-size="30" font-family="arial" fill="#ff5722"> 
    
    <textPath xlink:href="#path"><tspan fill-opacity="0"><animate id="animation1" attributeName="fill-opacity" dur="2s" to="1" fill="remove" repeatCount="indefinite"/>Word 1 </tspan>
          
    </textPath> 
  </text> 
</svg>

Answer 1

你想要一些带有 keyTimes 和 keySplines 的东西。像这样也许...

<svg width="100%" height="100%" viewBox="-180 5 700 300" xmlns="w3.org/2000/svg"; xmlns:xlink="w3.org/1999/xlink"; version="1.1"> 
  <path id="path" d="m0,110 h1100"/> 
    
  <text font-size="30" font-family="arial" fill="#ff5722"> 
    
    <textPath xlink:href="#path"><tspan fill-opacity="0"><animate id="animation1" begin="0s;animation2.end" attributeName="fill-opacity" dur="5s" values="0;1;1;0" keyTimes="0;0.04;0.96;1"/>Word 1 </tspan>
    </textPath> 
  </text> 
  <text font-size="30" font-family="arial" fill="#ff5722"> 
    
    <textPath xlink:href="#path"><tspan fill-opacity="0"><animate id="animation2" begin="animation1.end" attributeName="fill-opacity" dur="5s" values="0;1;1;0" keyTimes="0;0.04;0.96;1"/>Word 2 </tspan>
    </textPath> 
  </text> 
</svg>

svg 淡入文本，淡出文本，并在设定的时间段内继续对新文本执行相同的操作

svg fade-in text, fade-out text, and continue doing the same with new text, for set time-periods

svg

svg-animate