svg animate实现加载中的动画

<svg viewBox="0 0 64 64" style="width: 40px; height: 40px">
    <g stroke-width="0">
        <circle cx="24" cy="0" transform="translate(32,32)" r="7.48463">
            <animate attributeName="r" dur="750ms" values="8;7;6;5;4;3;2;1;8" repeatCount="indefinite"></animate>
        </circle>
        <circle cx="16.970562748477143" cy="16.97056274847714" transform="translate(32,32)" r="4.60759">
            <animate attributeName="r" dur="750ms" values="1;8;7;6;5;4;3;2;1" repeatCount="indefinite"></animate>
        </circle>
        <circle cx="1.4695761589768238e-15" cy="24" transform="translate(32,32)" r="1.48463">
            <animate attributeName="r" dur="750ms" values="2;1;8;7;6;5;4;3;2" repeatCount="indefinite"></animate>
        </circle>
        <circle cx="-16.97056274847714" cy="16.970562748477143" transform="translate(32,32)" r="2.48463">
            <animate attributeName="r" dur="750ms" values="3;2;1;8;7;6;5;4;3" repeatCount="indefinite"></animate>
        </circle>
        <circle cx="-24" cy="2.9391523179536475e-15" transform="translate(32,32)" r="3.48463">
            <animate attributeName="r" dur="750ms" values="4;3;2;1;8;7;6;5;4" repeatCount="indefinite"></animate>
        </circle>
        <circle cx="-16.970562748477143" cy="-16.97056274847714" transform="translate(32,32)" r="4.48463">
            <animate attributeName="r" dur="750ms" values="5;4;3;2;1;8;7;6;5" repeatCount="indefinite"></animate>
        </circle>
        <circle cx="-4.408728476930472e-15" cy="-24" transform="translate(32,32)" r="5.48463">
            <animate attributeName="r" dur="750ms" values="6;5;4;3;2;1;8;7;6" repeatCount="indefinite"></animate>
        </circle>
        <circle cx="16.970562748477136" cy="-16.970562748477143" transform="translate(32,32)" r="6.48463">
            <animate attributeName="r" dur="750ms" values="7;6;5;4;3;2;1;8;7" repeatCount="indefinite"></animate>
        </circle>
    </g>
</svg>

circle标签
cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0) 。
r 属性定义圆的半径。

SVG animation参数详解
1. attributeName = <attributeName>
要变化的元素属性名称，① 可以是元素直接暴露的属性，例如circle元素上的cx, cy或者x; ② 可以是CSS属性。例如，透明度opacity.

1. attributeType = “CSS | XML | auto”
   attributeType支持三个固定参数，CSS/XML/auto. 用来表明attributeName属性值的列表。x, y以及transform就属于XML, opacity就属于CSS. auto为默认值，自动判别的意思（实际上是先当成CSS处理，如果发现不认识，直接XML类别处理）。因此，如果你不确信某属性是XML类别还是CSS类别的时候，我的建议是不设置attributeType值，直接让浏览器自己去判断，几乎无差错。

2. from, to, by, values
   上面4个属性是一个家族的，是最具哲理的一个家族。他们解决的是非常有哲理的问题：你从哪里来？要到哪里去？……

from = "<value>": 动画的起始值。
to = "<value>": 指定动画的结束值。
by = "<value>": 动画的相对变化值。
values = "<list>": 用分号分隔的一个或多个值，可以看出是动画的多个关键值点。
from, to, by, values虽然属于一个家族，但是相互之间还是有制约关系的。有以下一些规则：
a. 如果动画的起始值与元素的默认值是一样的，from参数可以省略。
b. （不考虑values）to,by两个参数至少需要有一个出现。否则动画效果没有。to表示绝对值，by表示相对值。拿位移距离，如果from是100, to值为160则表示移动到160这个位置，但是，如果by值是160，则表示移动到100+160=260这个位置。
c. 如果to,by同时出现，则by打酱油，只识别to.
d. 如果to,by,values都没设置，自然没动画效果。如果任意（包括from）一个属性的值不合法，规范上说是没有动画效果。但是，据我测试，FireFox浏览器确实如此，但是Chrome特意做了写容错处理。例如，本来是数值的属性，写了个诸如a这个不合法的值，其会当作0来处理，动画效果依然存在。
e. values可以是一个值或多值。根据我在Chrome浏览器下的测试，是一个值的时候是没有动画效果。多值时候有动画效果。当values值设置并能识别时候，from, to, by的值都会被忽略。那values属性是干什么的呢？别看名字挺大众的，其还是有些功力的。我们实现动画，不可能就是单纯的从a位置到b位置，有时候，需要去c位置过渡下。此时，实际上有3个动画关键点。而from, to/by只能驾驭两个，此时就是values大显身手的时候了！