We can't find the internet
Attempting to reconnect
I'm working on svg chart recently.
When I need to create a bubble which need blink animation on it.
In the first, I tried to control is in javascript directly.
Then I looked over SVG document.
I found out it has animation defination.
### SVG has built in animation.
**Simple Example:**
```svg
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<rect width="10" height="10">
<animate attributeName="rx" values="0;5;0" dur="10s" repeatCount="indefinite" />
</rect>
</svg>
```
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<rect width="10" height="10">
<animate attributeName="rx" values="0;5;0" dur="10s" repeatCount="indefinite" />
</rect>
</svg>
### Animation attributes
#### Animation target element attributes
href
#### Animation attribute target attributes
attributeType, attributeName
#### Animation timing attributes
begin, dur, end, min, max, restart, repeatCount, repeatDur, fill
#### Animation value attributes
calcMode, values, keyTimes, keySplines, from, to, by, autoReverse, accelerate, decelerate
#### Animation addition attributes
additive, accumulate
### More
More information find at [<animate/>](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate)
---
Add new
## <animateTramsform />
`animateTramsform` allow your to apply transform to svg element.
```svg
<path d="...">
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
from="0 12 12"
to="360 12 12"
dur="1s"
repeatCount="indefinite"
/>
</path>
```
In this case, transform type is `rotate`,
form 0deg to 360deg, and the rotate center is from x=12, y=12 to x=12, y=12