SVG 动画在未启动的情况下启动

Question

我有一个在没有启动变量的情况下启动的内部 a：

<rect height={5} width={5}>
    <animate 
        attributeName="height" 
        from={5} to={10} dur="2s" 
        begin={start ? "0s": "indefinite}/></rect>

组件位于 SVG 内部，该 SVG 会重新渲染以更改“start”变量以启动动画。但是，无论我何时选择重新渲染，动画都会立即开始。因此，如果我一渲染它所在的页面就按下它，它就会正常工作。但是，如果我在 2 秒后重新渲染组件，动画将跳转到结束值。如果我在渲染组件所在的页面后 1 秒开始动画，那么动画将从中间播放。怎么回事？！

谢谢

Answer 1

begin 和end 时间，如果使用时不参考其他时钟，请始终参考文档的开头。因此，您不应将值设置为0s，而应使用其他参考。我想到了几种可能性：

1. 从点击或其他事件开始。 begin 值采用<id of event target element>.<event name> 的形式：

    <rect id="grafic" height={5} width={5}>
      <animate id="animation" attributeName="height"
               from={5} to={10} dur="2s" begin="grafic.click"/>
    </rect>
   

2. 从其他代码开始。 begin 值保持在 indefinite：

    <rect id="grafic" height={5} width={5}>
      <animate id="animation" attributeName="height"
               from={5} to={10} dur="2s" begin="indefinite"/>
    </rect>
   

   但动画是通过 API 调用启动的：

    document.getElementById('animation').beginElement();
   

3. 为了更接近 React 的感觉，在设置属性的时候定义一个 wallckock 值为“right now”：

    const rightnow = () => new Date().toLocaleTimeString()
   
    <rect id="grafic" height={5} width={5}>
      <animate id="animation" attributeName="height"
               from={5} to={10} dur="2s"
               begin={start ? `wallclock(${rightnow()})` : "indefinite"/>
    </rect>