SVG Animation – Native SVG animation – Interactivity

Native SVG animation

Animation is done by manipulating the attributes of shapes over time. This is done using one or more of the 5 SVG animation elements.

Elements

Animation is achieved by nesting one or more of the following elements inside the element that needs animation.

• set
• animate
• animateMotion
• animateColor (deprecated)
• animateTransform

animate

Animates an attribute

              
<circle cx="30" cy="30" r="25" style="stroke: none; fill: #ff0000;">
  <animate attributename="cx" attributetype="XML" from="30" to="470" begin="0s" dur="5s" fill="remove" repeatcount="indefinite">
</animate></circle>       
              
            

animateMotion

Animates motion along a path.

              
<circle cx="0" cy="0" r="15" style="stroke: none; fill: #ff0000;">
<animatemotion path="M10,50 q60,50 100,0 q60,-50 100,0" begin="0s" dur="10s" repeatcount="indefinite" rotate="auto">
</animatemotion></circle>
<path d="M10,50 q60,50 100,0 q60,-50 100,0" style="stroke: #ff0000; fill: none;"></path>  
              
            

animateTransform

Animates the transform attribute of a shape.

              
<rect x="0" y="0" rx="20" ry="20" width="150" height="150" style="fill: #ff0000; stroke: #000000; stroke-width: 5; opacity: 0.5" transform="rotate(155.739 250 150)">
  <animatetransform attributename="transform" type="rotate" from="0 250 150" to="360 250 150" begin="0s" dur="10s" repeatcount="indefinite">
</animatetransform></rect>
<circle cx="250" cy="150" r="2" style="stroke: none; fill: #ff0000;"></circle>
              
            

animateTransform

AnimatesTransform type="scale".

              
<rect x="0" y="0" rx="5" ry="5" width="50" height="50" style="fill: #ff0000; stroke: #000000; stroke-width: 2; opacity: 0.5">
  <animatetransform attributename="transform" type="scale" from="1 1" to="2 3" begin="0s" dur="5s" fill="freeze" repeatcount="indefinite">
</animatetransform></rect>
              
            

Interactivity

begin="mouseover"

begin="mouseover"

              
<circle cx="0" cy="0" r="15" style="stroke: none; fill: #ff0000;">
<animatemotion path="M10,50 q60,50 100,0 q60,-50 100,0" begin="mouseover" dur="3s" repeatcount="1" rotate="auto">
</animatemotion></circle>
<path d="M10,50 q60,50 100,0 q60,-50 100,0" style="stroke: #ff0000; fill: none;"></path>  
              
            

Interactivity

begin="click"

              
<circle cx="0" cy="0" r="15" style="stroke: none; fill: #ff0000;">
<animatemotion path="M10,50 q60,50 100,0 q60,-50 100,0" begin="click" dur="3s" repeatcount="1" rotate="auto">
</animatemotion></circle>
<path d="M10,50 q60,50 100,0 q60,-50 100,0" style="stroke: #ff0000; fill: none;"></path>  
              
            

Combine animations

Synchronize the beginning of one animation to the end of another

              
<rect x="0" y="0" width="100" height="100" style="stroke: #ff0000; stroke-width: 2; fill: #000000; opacity: 0.7">
  <animate id="first" attributename="x" attributetype="XML" from="0" to="396" begin="click" dur="2s" fill="freeze">
  <animate attributename="y" attributetype="XML" from="0" to="50" begin="first.end" dur="1s" fill="freeze">
</animate></animate></rect>
              
            

Additive animations

Cumulate two animations with the same name.

additive="sum"

              
<svg width="800" height="500">
  <polygon fill="#FFFFFF" stroke="#FFF800" stroke-width="3" points="383,138 353,227 428,172 338,172 413,227 ">
  <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="1.5" begin="0s" dur="5s" repeatCount="indefinite" additive="sum"></animateTransform>
  <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 380 185" to="360 380 185" begin="0s" dur="5s" fill="freeze" repeatCount="indefinite" additive="sum"></animateTransform>
  
</polygon></svg>
              
            

Repeat animations

repeatCount, repeatDur

              
<svg width="800" height="500">
  <path d="M1,255 C188,100 289,98 494,254"></path>
  <polygon points="50,5 20,94 95,39 5,39 80,94" style="fill:#FFFFFF;stroke:yellow;stroke-width:3;fill-rule:nonzero;">
  <animateMotion id="forward" path="M1,255 C188,100 289,98 494,254" begin="click" dur="1s" repeatCount="indefinite" repeatDur="3s" fill="remove" rotate="auto"></animateMotion>
  <animateTransform attributeName="transform" type="scale" from="1" to="2" begin="forward.end" dur="2s" fill="freeze" repeatCount="3" repeatDur="5.5s"></animateTransform>
</polygon></svg>
              
            

CSS Animation

Positional attributes vs CSS translate

We are more familiar with CSS animations.

Reference links

• SVG Tutorials by Jakob Jenkov
• A Look Into: Scalable Vector Graphics by Thoriq Firdaus
• An introduction to SVG animation by Jon McPartland
• Mouseover effects in SVG http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs