我正在尝试让一个点从白色渐变为红色,然后从白色渐变为红色。
这是我迄今为止所拥有的:
<circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485"/>
<animate id="testies" attributeName="fill" from="#ED1C24"
to="#fff" xlink:href="#test" dur="2s" fill="freeze" />
<animate attributeName="fill" from="" to="#ED1C24"
xlink:href="#test" begin="" onrepeat=" dur="2s" fill="freeze" />
我希望第二个动画在第一个动画结束时开始,我知道这是可能的,但我只是不明白。
最佳答案
使用您的示例,具体方法如下:
<circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485"/>
<animate id="testies" attributeName="fill" from="#ED1C24" to="#fff"
xlink:href="#test" dur="2s" fill="freeze" />
<animate attributeName="fill" from="" to="#ED1C24" xlink:href="#test"
begin="testies.end" dur="2s" fill="freeze" />
或者作为不带 xlink:href
语法的等效替代方案:
<circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485">
<animate id="testies" attributeName="fill" from="#ED1C24" to="#fff"
dur="2s" fill="freeze" />
<animate attributeName="fill" from="" to="#ED1C24"
begin="testies.end" dur="2s" fill="freeze" />
</circle>
所以,基本上只需添加要触发其他动画的元素的 id 并添加“.end”后缀。您还可以指定“.begin”在动画开始时触发,或添加时间偏移,例如 begin="someId.end+2s"
。
也可以使用事件来触发动画,语法类似:id 后跟一个点,然后是事件的名称以及可选的时间偏移量。请参阅 SVG 1.1 here 中所需的事件列表(最左边标记为“事件名称”的列适用于此处)。
如果您不害怕规范,请参阅 full syntax of the begin attribute了解所有详细信息。
关于animation - 如何在另一个动画结束时开始一个动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4778708/