GSMLG

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 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 information find at <animate/>

Add new

<animateTramsform />

animateTramsform allow your to apply transform to svg element.

<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