SMIL animation演示代码集锦
<svg width="1400" height="1600" xmlns="http://www.w3.org/2000/svg"> <text font-family="microsoft yahei" font-size="120" y="160" x="160"> 马 <set attributeName="x" attributeType="XML" to="30" begin="2s"></set> </text> <g transform="translate(200,160)"> <text font-family="microsoft yahei" font-size="120" y="160" x="160"> 马 <animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" /> </text> </g> <g transform="translate(320,320)"> <text font-family="microsoft yahei" font-size="120" y="160" x="160"> 马 <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 160 160" to="360 160 160" repeatCount="indefinite"/> </text> </g> <g transform="translate(480,480)"> <text font-family="microsoft yahei" font-size="80" y="100" x="100"> 马 <animateTransform attributeName="transform" begin="0s" dur="3s" type="scale" from="1" to="1.5" repeatCount="indefinite"/> </text> </g> <g transform="translate(480,80)"> <text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000"> 马 <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" repeatCount="indefinite" rotate="auto"></animateMotion> </text> <path id="horsePath" d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none"/> </g> <g transform="translate(640,180)"> <text font-family="microsoft yahei" font-size="120" y="160" x="160"> 马 <animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" /> <animate attributeName="opacity" from="1" to="0" begin="0s" dur="3s" repeatCount="indefinite" /> </text> </g> <g transform="translate(640,360)"> <text font-family="microsoft yahei" font-size="120" y="160" x="160"> 马 <animate attributeName="x" values="160;40;160" dur="3s" repeatCount="indefinite" /> </text> </g> <g transform="translate(640,520)"> <text font-family="microsoft yahei" font-size="120" y="160" x="160"> 马 <animate attributeName="x" values="160;40;160" dur="3s" begin="2s;6s" /> </text> </g> <g transform="translate(640,680)"> <text font-family="microsoft yahei" font-size="120" y="160" x="160"> 马 <animate id="x" attributeName="x" to="60" begin="0s" dur="1.5s" fill="freeze" /> <animate attributeName="y" to="100" begin="x.end-0.5" dur="1.5s" fill="freeze" /> </text> </g> <g transform="translate(760,20)"> <text font-family="microsoft yahei" font-size="120" y="160" x="160" id="clickText"> 马 <animate attributeName="x" to="60" begin="clickText.click" dur="3s" /> </text> </g> <g transform="translate(760,180)"> <text font-family="microsoft yahei" font-size="120" y="160" x="160"> 马 <animate id="x0" attributeName="x" to="60" begin="0s" dur="2s" repeatCount="indefinite" /> <animate attributeName="y" to="100" begin="x0.repeat(2)" dur="2s" fill="freeze" /> </text> </g> <!--快捷键仅在FF下支持--> <g transform="translate(760,340)"> <text font-family="microsoft yahei" font-size="120" y="160" x="160"> 马 <animate attributeName="x" to="60" begin="accessKey(s)" dur="3s" repeatCount="indefinite" /> </text> </g> <g transform="translate(760,500)"> <text font-family="microsoft yahei" font-size="120" y="160" x="160" id="indefiniteText"> 马 <animate attributeName="x" to="60" begin="indefinite" dur="3s" id="indefiniteA"/> </text> <a xlink:href="#indefiniteA"> <text x="300" y="200" fill="#cd0000" font-size="30">不要点我</text> </a> </g> <g transform="translate(10,500)"> <text font-size="60" y="60" x="160"> 马 <animate attributeName="x" dur="5s" values="0; 20; 160" calcMode="linear" /> </text> <text font-size="60" y="120" x="160"> 马 <animate attributeName="x" dur="5s" values="0; 20; 160" calcMode="paced"/> </text> <text font-size="60" y="180" x="160"> 马 <animate attributeName="x" dur="5s" values="0; 80; 160" keyTimes="0; .8; 1" calcMode="linear"/> </text> <text font-size="60" y="240" x="160"> 马 <animate attributeName="x" dur="5s" values="0; 80; 160" keyTimes="0; .8; 1" calcMode="spline" keySplines=".5 0 .5 1; 0 0 1 1" /> </text> </g> <g transform="translate(10,800)"> <text font-size="30" y="180" x="130"> 马 <animateTransform attributeName="transform" type="scale" from="1" to="3" dur="5s" repeatCount="indefinite" additive="sum"/> <animateTransform attributeName="transform" type="rotate" from="0 30 20" to="60 30 20" dur="5s" repeatCount="indefinite" additive="sum"/> </text> </g> </svg>