SVG #6 SVG animate element

1 Using round corner of rectangle as illustration.

<rect x="2" y="2" width="30" height="8">
  <animate attributeName="rx" values="0;10;0" dur="2s" repeatCount="indefinite"></animate>
</rect>

animate element must be child of a SVG element.

It must have two attributes:attributeName and dur.

2 Animating stroke-dashoffset of a curve.

<path d="M 10 40 C 10 50 40 50 40 40 Z" stroke="black" fill="none" stroke-dasharray="10 5" stroke-dashoffset="-4">
  <animate attributeName="stroke-dashoffset" from="0" to="-15" dur="2s" repeatCount="indefinite"></animate>
</path>

The dashes moves forwarded in the animation.

Congratulations! You have finished all tutorials in this series!
Back to Home