HTML5 SVG圆盘时钟动画

<svg version="1.1" id="clock" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

width="300px" height="300px" viewBox="94.257 101.184 300 300" enable-background="new 94.257 101.184 300 300"

xml:space="preserve">

<circle id="face" fill="#F4F3ED" cx="243.869" cy="250.796" r="130.5"/>

<path id="rim" fill="#383838" d="M243.869,101.184c-82.629,0-149.612,66.984-149.612,149.612c0,82.629,66.983,149.612,149.612,149.612

S393.48,333.425,393.48,250.796S326.498,101.184,243.869,101.184z M243.869,386.455c-74.922,0-135.659-60.736-135.659-135.659

c0-74.922,60.737-135.659,135.659-135.659c74.922,0,135.658,60.737,135.658,135.659

C379.527,325.719,318.791,386.455,243.869,386.455z"/>

<g>

<g opacity="0.2">

<path fill="#C4C4C4" d="M243.869,114.648c-75.748,0-137.154,61.406-137.154,137.153c0,75.749,61.406,137.154,137.154,137.154

c75.748,0,137.153-61.405,137.153-137.154C381.022,176.054,319.617,114.648,243.869,114.648z M243.869,382.56

c-72.216,0-130.758-58.543-130.758-130.758s58.542-130.758,130.758-130.758c72.216,0,130.758,58.543,130.758,130.758

S316.085,382.56,243.869,382.56z"/>

</g>

<g>

<path fill="#282828" d="M243.869,113.637c-75.748,0-137.154,61.406-137.154,137.153c0,75.749,61.406,137.154,137.154,137.154

c75.748,0,137.153-61.405,137.153-137.154C381.022,175.043,319.617,113.637,243.869,113.637z M243.869,381.548

c-72.216,0-130.758-58.542-130.758-130.757c0-72.216,58.542-130.758,130.758-130.758c72.216,0,130.758,58.543,130.758,130.758

C374.627,323.005,316.085,381.548,243.869,381.548z"/>

</g>

</g>