svg动起来

?

1 2 3 4 5 6

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">   <g>     <text font-family="microsoft yahei" font-size="120" y="160" x="160">马</text>     <animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 160 160" to="360 160 160" repeatCount="indefinite"/>   </g> </svg>

?

1 2 3 4 5 6

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">   <g>     <text font-family="microsoft yahei" font-size="80" y="100" x="100">马</text>     <animateTransform attributeName="transform" begin="0s" dur="3s"  type="scale" from="1" to="1.5" repeatCount="indefinite"/>   </g> </svg>

?

1 2 3 4 5 6

<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">   <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"/>   </text>   <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" /> </svg>

?

1 2 3 4 5 6

<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">   <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" rotate="auto" repeatCount="indefinite"/>   </text>   <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" /> </svg>

?

1 2 3 4 5 6

<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">     <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> </svg>

?

1 2 3 4 5 6

<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">     <text font-family="microsoft yahei" font-size="120" y="150" x="160">         马         <animate attributeName="x" values="160;40;160" dur="3s" repeatCount="indefinite" />     </text> </svg>