SVG Repeated Action

by Online Tutorials Library July 14, 2022

Repeated Action

Repeated action is used to repeat an animation. There are the two types of repeat attributes allow you to repeat an animation.

repeatCount: It is set to an integer value telling how many times you want a particular animation to repeat.

repeatDur: It is set to a time telling how long the repetition should last.

Synchronizing an animation with a repetition

Example

  <!DOCTYPE html>  <html>  <title>SVG Animation</title>  <body>  <svg height=”450″ width=”450″>    <circle cx=”30″ cy=”60″ r=”30″ style=”fill: purple; fill-opacity: .4; stroke: black;”>  <animate id=”circle-anim” attributeName=”cx” attributeType=”XML”   begin=”0s” dur=”6s” repeatCount=”4″   from=”60″ to=”260″ fill=”freeze”/>  </circle>    <circle cx=”250″ cy=”150″ r=”30″ style=”fill: green; fill-opacity: .4; stroke: black;”>  <animate attributeName=”cx” attributeType=”XML”   begin=”circle-anim.repeat(1)+.5s” dur=”8s” repeatDur=”12s”   from=”260″ to=”60″ fill=”freeze”/>  </circle>    </svg>  </body>  </html>  

Test it Now

Next TopicSVG Set Element

SVG Repeated Action

Repeated Action

Synchronizing an animation with a repetition

Example

SVG Animation

Data Window in Tableau | Data Types in Tableau

You may also like