SVG动画延迟每次重复 [英] SVG animation delay on each repetition

问题描述

我想为SVG动画循环的每次迭代添加一个延迟。这是一个简单的例子。

< svg xmlns =http://www.w3.org/2000/svgwidth =100px height =100px> < circle cx =50cy =50r =15fill =blue> < animate id =opattributeType =CSSattributeName =opacityfrom =1to =0dur =3srepeatCount =indefinite/> < / circle>< / svg>

使用 begin 只会延迟第一次迭代，那么是否有延迟每次迭代的方法？

解决方案

您可以将SMIL动画元素的 end 事件添加到 begin 属性。

此外，你可以添加多个值，用; 分隔到这个开始属性：

 < svg xmlns =http://www.w3.org/2000/svgwidth =300pxheight =100px> < circle cx =50cy =50r =15fill =blue> < animate id =opattributeType =CSSattributeName =opacityfrom =1to =0dur =3sbegin =3s; op.end + 3s/> < / circle>< / svg>  

I'd like to add a delay to each iteration of an SVG animation loop. Here's a simple example.

<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px">
  <circle cx="50" cy="50" r="15" fill="blue">
    <animate id="op" attributeType="CSS" attributeName="opacity"
             from="1" to="0" dur="3s" repeatCount="indefinite" />
  </circle>
</svg>

Using begin only delays the first iteration, so is there a way to delay every iteration?

解决方案

You can add the end event of a SMIL animated element to the begin attribute.
Also, you can add multiple values, separated by ; to this begin attribute :

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
  <circle cx="50" cy="50" r="15" fill="blue">
    <animate id="op" attributeType="CSS" attributeName="opacity"
             from="1" to="0" dur="3s" begin="3s;op.end+3s" />
  </circle>
</svg>

这篇关于SVG动画延迟每次重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！