SVG SMIL Animation Sample

SVG SMIL Animation Sample.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg width="600px" 
        height="180px" 
        viewBox="0 0 600 180" 
        version="1.1" 
        xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <path id="thePath_raw" d="M521.454477,123.955111 C497.727239,115.319103 478.21101,95.1134394 483.405554,80.8415471 C488.600098,66.5696547 514.057201,62.7329455 540.265585,72.2720172 C566.473969,81.811089 583.509053,101.113689 578.314509,115.385582 C573.119965,129.657474 545.181716,132.59112 521.454477,123.955111 Z"></path>
    </defs>
    <g id="SVG_Ani_referances_SMIL" stroke="none" stroke-width="1" fill="#D8D8D8" fill-rule="evenodd">
        <rect id="theOpacity" x="25" y="55" width="70" height="70"></rect>
        <rect id="theTranslate" x="145" y="55" width="70" height="70"></rect>
        <rect id="theRotation" x="265" y="55" width="70" height="70"></rect>

        <g id="scaleShell" transform="translate(430 90)">
            <rect id="theScale" x="-35" y="-35" width="70" height="70"></rect>
        </g>

        <rect id="theMpath" x="-10" y="-10" width="20" height="20"></rect>
        <use id="thePath" xlink:href="#thePath_raw" stroke="#979797" stroke-dasharray="250 250" stroke-dashoffset="0" fill="none" fill-rule="nonzero"/>    
    </g>

    <!-- - - - - - - Animations - - - - - - -->

    <!-- 透明度动画：如果有延迟，设置一下初始值以及 fillmode -->
    <animate 
            attributeType="XML"
            xlink:href="#theOpacity"
            attributeName="opacity" 
            values="0;1;0"
            keyTimes="0;0.5;1"
            begin="0s"
            dur="2s"  
            repeatCount="indefinite"
            fill="freeze"
            /> 

    <!-- 位移动画 -->
     <animateTransform 
                        attributeName="transform"
                        xlink:href="#theTranslate"
                        type="translate"
                        values="0 20;0 -20;0 20"
                        keyTimes="0;0.5;1"
                        keySplines=".11 .38 .3 .99;0.6 0.04 0.98 0.335"                 
                        calcMode="spline"
                        begin="0s"
                        dur="2s"  
                        repeatCount="indefinite"
                        fill="freeze"
                    />
    <!-- 旋转动画,旋转中心坐标是基于画布的 -->
     <animateTransform 
                        attributeName="transform"
                        xlink:href="#theRotation"
                        type="rotate"
                        values="0 300 90;90 300 90;0 300 90"
                        keyTimes="0;0.5;1"
                        keySplines=".11 .38 .3 .99;0.6 0.04 0.98 0.335"                 
                        calcMode="spline"
                        begin="0s"
                        dur="2s"  
                        repeatCount="indefinite"
                        fill="freeze"
                    />
    <!-- 缩放动画,注意缩放中心 -->
     <animateTransform 
                        attributeName="transform"
                        xlink:href="#theScale"
                        type="scale"
                        values="1;0.5;1"
                        keyTimes="0;0.5;1"
                        keySplines="0.6 0.04 0.98 0.335;.11 .38 .3 .99"                 
                        calcMode="spline"
                        begin="0s"
                        dur="2s"  
                        repeatCount="indefinite"
                        fill="freeze"
                    />

    <!-- 跟随路径运动,注意keypoints和跟随中心，以及path的transform -->
    <animateMotion 
            attributeType="XML"
            xlink:href="#theMpath"
            keyTimes="0;1"
            keyPoints="0;1"
            begin="0s"
            dur="10s"  
            repeatCount="indefinite"
            fill="freeze"
            > 
        <mpath xlink:href="#thePath_raw"/>
    </animateMotion>
   
    <!-- 描边动画：注意 dash array 尽量和线段长度一致 -->
    <animate 
            attributeType="XML"
            xlink:href="#thePath"
            attributeName="stroke-dashoffset" 
            values="0;250;500"
            keyTimes="0;0.5;1"
            keySplines=".11 .38 .3 .99;0.6 0.04 0.98 0.335"                 
            calcMode="spline"
            begin="0s"
            dur="2s"  
            repeatCount="indefinite"
            fill="freeze"
            /> 

    <!-- <animate 
            attributeType="XML"
            xlink:href="#thePath"
            attributeName="stroke-dasharray" 
            values="250 250;250 0;0 250;250 250"
            keyTimes="0;0.5;0.5;1"
            keySplines=".11 .38 .3 .99;0 0 1 1;.11 .38 .3 .99"                 
            calcMode="spline"
            begin="0s"
            dur="2s"  
            repeatCount="indefinite"
            fill="freeze"
            />  -->
</svg>