Animate SVG element every x seconds

dom, javascript, svg, svg-animate

Solution

<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>

here animation begin is specified with relative to animation end, in this way your animation will always wait for your specified time(here 4 sec) and start playing again ...

try this, all the best

UPDATE

if you able to use id.end instead of id.end+some_clock_value then use keyTimes and values attribute correctly, replace your rotation animation with following animateTransform and see if you get the output you want,

<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" />

Problem

Introduction I know some basic animation techniques for `SVG` using both `Javascript` and DOM `<animate>` element. So I have created this SVG, but I can't figure it out how trigger the animation every x seconds without too much code. I tried `begin="4s"` but it only wait the first time. Question: There is a DOM property like `begin` or `dur`, but to define an interval in seconds? Which is the better way to achieve this? What I have 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"/> ``` Complete example here: SVG Fiddle Notes: - I already checked SVG Spec - Add some Javascript code is an option - Using CSS3 is an option too

Original source