SVG 支持动画

svg  支持动画

animate 必须要写在要动的元素中

animate：常见的几个类型

attributeType：动画的的类型 

anumateName：动画的名称

begin：动画开始的时间

from ：动画的开始

to：目的地

dur（duration）：持续时间

repeatcount：动画重复次数 indefinite （无数次）

 

例如：animateMotion：使用引用动画的元素 沿着某一个路径运动

<svg style="background: yellowgreen; width="500" height= "500">

<circle cx="65" cy="65"  r="20"  fill="red"> <animateMotion path=" m 0 0  l 200 100 l 100 80  z" dur="3s"  repeatcount="indefinite"></animateMotion></circle>

 

</svg>

例如 变形动画

<svg style="background: blueviolet; width="500" height="500">

<text x="100" y="100" font-size="30px" fill="red">天道酬勤

<animatetransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" begin="0s" from="0 100 100 " to="360 100 100" repeatcount="indefinite"></animatetransform></text>