SVG 一些学习参考

http://www.cnblogs.com/pingfan1990/p/4757934.html

http://www.cnblogs.com/duanhuajian/archive/2013/07/31/3227410.html

http://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/

animateTransform中rotate针对的svg左上角那个点移动到元素中心点

实例代码：

<svg width="400" height="400">

  <rect x="0" y="0" fill="green" rx="4" width="200" height="200">

  <animateTransform attributeName="transform" type="rotate" form="0" to="360" begin="0" dur="5s" repeatCount="indefinite" /></rect>

</svg>

 

例上面的代码我们让200x200的方形元素，做旋转运动，但是在svg里面rotate旋转针对的点是svg的左上角。我们想在针对元素中心点运动怎么办。

　　通常的解决方案：

<svg width="400" height="400">

  <g transform="translate(200,200)">

    <rect x="-100" y="-100" fill="green" rx="4" width="200" height="200">

    　　<animateTransform attributeName="transform" type="rotate" form="0" to="360" begin="0" dur="5s" repeatCount="indefinite" />

　　　　</rect>

  <g>

</svg>

 

我们加了一个组合标签<g transform="translate(200,200)"></g>将svg的坐标起始点移动到容器的中心点（svg的占位位置还是没有变化），然后元素再根据这个新的起始点画出来，进行旋转就可以了。