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.