Animation Related Tags

Used to create animations

• turned_in_notTags
  • <animate>
  • <animateMotion>
  • <mpath>
  • <animateTransform>
  • <set>

<animate>

Used to animate an svg element's attributes

Syntax

library_books<animate attributeType="auto|CSS|XML"
         attributeName="nameOfAttributeToAnimate"
         from="valueAccordingTo_nameOfAttributeToAnimate"
         to="valueAccordingTo_nameOfAttributeToAnimate"
         dur="time"/>

• turned_in_notanimate Attributes
  • attributeType - Type of attribute you want to animate of an SVG elements
  • attributeName - Name of attribute to animate
  • from - Value for the specified animation to start
  • to - Value for the specified animation to end
  • dur - Time to complete 1 animation cycle

library_books<svg height="100" width="200">
  <rect x="0" y="20" width="100" height="50" style="fill:red">
   <animate attributeType="XML" 
            attributeName="x" 
            from="10" to="120" 
            dur="10s" 
            repeatCount="indefinite"/>
   </rect>
</svg>

<animateMotion>

Used to animate an svg component along any specified path

• <mpath> is used as its child element, to refer the path to follow

Syntax

library_books<animateMotion dur="time" rotate="auto|auto-reverse|specificDegree">
  <mpath href="anyPathId"/>
</animateMotion>

• turned_in_notanimateMotion Attributes
  • dur - Time to complete 1 animation cycle
  • rotate - Rotation angle of the specific SVG component from its start or center point along the motion path
  • href - Reference of a path related tag to which the SVG component will follow

library_books<svg height="100" width="200">
  <path id="myMotionPath" d="M100,10 L180,90 L20,90 z" stroke="black" fill="none"/>
  <!-- Red circle which will be move along the motion path -->
  <circle r="5" fill="red">
    <!-- Define the motion path animation -->
    <animateMotion dur="6s" rotate="0" repeatCount="indefinite">
      <mpath href="#myMotionPath"/>
    </animateMotion>
  </circle>
</svg>

<animateTransform>

Used to animate transformation of an svg element which supports transformation

Syntax

library_books<animateTransform attributeType="auto|CSS|XML"
         attributeName="nameOfAttributeToAnimate"
         type="transformType"
         from="valueAccordingTo_nameOfAttributeToAnimate"
         to="valueAccordingTo_nameOfAttributeToAnimate"
         dur="time"/>

• turned_in_notanimateTransform Attributes
  • attributeType - Type of attribute you want to animate of an SVG elements
  • attributeName - Name of attribute to animate
  • type - Type of transform to animate
  • from - Value for the specified transformation type to start
  • to - Value for the specified transformation type to end
  • dur - Time to complete 1 animation cycle

library_books<svg height="100" width="200">
  <rect x="0" y="20" width="100" height="50" style="fill:red">
    <animateTransform attributeName="transform"
              attributeType="XML"
              type="rotate"
              from="0 100 50"
              to="360 100 50"
              dur="10s"
              repeatCount="indefinite"/>
   </rect>
   <circle cx="100" cy="50" r="4"/>
</svg>

<set>

Used to change any value right at the moment

Syntax

library_books<set attributeType="auto|CSS|XML"
     attributeName="nameOfAttributeToAnimate"
     to="valueSetTo_nameOfAttributeToAnimate"
     begin=""/>

• turned_in_notset Attributes
  • attributeType - Type of attribute you want to animate of an SVG elements
  • attributeName - Name of attribute to animate
  • to - Value for the specified animation to set
  • begin - See it in next section

library_books<svg height="100" width="200">
  <rect x="75" y="25" width="50" height="50" style="fill:red">
   <animate id="box"
            attributeType="XML" attributeName="x" 
            from="10" to="120" 
            dur="5s"
            begin="0s;box.end"
            repeatCount="2"/>
    <set attributeType="CSS" attributeName="fill" to="blue" begin="box.begin"/>
    <set attributeType="CSS" attributeName="fill" to="#ff1493" begin="box.repeat(1)"/>
  </rect>
</svg>