简介

所谓SMIL动画指在 SVG 集成了 Synchronized Multimedia Integration Language (SMIL) 这种动画标准，该语言被 SVG 原生支持，主要是使用标签来描述动画。

简单实例

<svg width="500px" height="500px" viewBox="0 0 500 500"> 
    <rect x="0" y="0" width="100" height="100" fill="#feac5e"> 
        <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" /> 
    </rect> 
</svg>

在animate中

• attributeName定义需要元素发生变化的属性
• from、to控制元素要运动的距离
• dur定义运动的时长
• repeatCount定义动画运行的次数，indefinite表示无限循环这个动画

实现loading图

 <svg width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
        <g>
            <animateTransform attributeName="transform" type="rotate" values="0 33 33;270 33 33" begin="0s" dur="1.4s"
                fill="freeze" repeatCount="indefinite" />
            <circle fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30" stroke-dasharray="187"
                stroke-dashoffset="610">
                <animate attributeName="stroke" values="#4285F4;#DE3E35;#F7C223;#1B9A59;#4285F4" begin="0s" dur="5.6s"
                    fill="freeze" repeatCount="indefinite" />
                <animateTransform attributeName="transform" type="rotate" values="0 33 33;135 33 33;450 33 33"
                    begin="0s" dur="1.4s" fill="freeze" repeatCount="indefinite" />
                <animate attributeName="stroke-dashoffset" values="187;46.75;187" begin="0s" dur="1.4s" fill="freeze"
                    repeatCount="indefinite" />
            </circle>
        </g>
    </svg>