Geek asks and answers

Animate an SVG element every x seconds

Introduction

I know some basic animation methods for SVGusing both elements Javascriptand the DOM <animate>. So I created this SVG, but I can’t figure out how to start the animation every x seconds without too much code. I tried begin="4s", but he is only waiting for the first time.

Question:

There is a DOM property, for example, beginor dur, but to determine the interval in seconds? What is the best way to achieve this?

What I tried :

<animateTransform attributeName="transform" additive="sum" attributeType="XML" 
type="rotate" dur="1s" repeatCount="indefinite" from="0 54.2 43.3" 
to="360 54.2 43.3" begin="3s" fill="freeze"/>

Full example here: SVG Fiddle

Notes:

  • I already checked SVG Spec
  • Add Javascript code is an option
  • Using CSS3 is also an option.
+5
source
1
<g> 
    <rect x="0" y="0" width="30" height="20" fill="#f83"/>      
    <animateTransform id="id1" attributeName="transform" additive="sum" 
     type="scale" calcMode="linear" begin="4;id1.end+4" dur="2" keyTimes="0;1" 
     values="1 1;2 2" fill="freeze" />

</g>

, , ( 4 ) ...

,

UPDATE

id.end id.end + some_clock_value, keyTimes values ​​, animateTransform , ,

<animateTransform id="id1" attributeName="transform" additive="sum" 
     type="rotate" calcMode="linear" begin="0" dur="4" 
     repeatCount="indefinite"   keyTimes="0;0.75;1" 
     values="0 54.2 43.3 ; 0 54.2 43.3 ; 360 54.2 43.3" fill="freeze" />
+3

More articles:


All Articles