HTML5的SVG动画圆点索引按钮焦点图切换特效

<div class="controls">
<!-- circular line -->
<div id="circular-line">
<svg width="38px" height="38px" viewBox="0 0 38 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<circle id="circular-line-path" stroke-width="4" cx="19" cy="19" r="17"></circle>
</g>
</svg>
</div>

<!-- straight line -->
<div class="straight-line"></div>

<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>

</div>

HTML5 SVG动画圆点索引按钮焦点图切换特效，这是一款轮播图分页导航的例子，在每个分页圆点上都有一个SVG圆形线条，当用户点击其它圆点时，圆形线条以平滑过渡的方式运动到下一个位置。