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

Question

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

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

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

谢谢

Answer 1

begin 和 end 次，如果在没有参考其他时钟的情况下使用，请始终参考文档的开头。因此，与其将值设置为 0s，不如使用其他参考。想到了几种可能性：

从点击或其他事件开始。 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>

从其他代码开始。 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();

为了更像 React 的感觉，在设置属性时定义一个 wallckock 值“现在”：

 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>

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

SVG animate starts without being started

javascript

svg

typescript

svg-animate

reactjs