使用CSS3代替SVG中的animateTransform

先来看使用animate

<g><path fill="#00FF00" d="M118.453,39.861c-3.469,6.964-8.037,16.159-10.176,20.402l-3.932,7.781l-2.486-0.871c-3.354-1.088-10.984-1.088-14.511,0.055c-1.562,0.49-2.892,0.816-2.949,0.707c-0.058-0.108-3.989-7.998-8.729-17.573c-4.685-9.576-9.193-18.063-10.002-18.879c-3.006-3.101-6.592-2.394-14.051,2.612c-7.92,5.386-15.262,13.384-20.523,22.36c-1.098,1.851-1.504,2.992-1.098,3.318c0.346,0.327,9.711,4.516,20.813,9.358c11.158,4.842,20.697,9.031,21.218,9.304c0.868,0.435,0.925,0.706,0.173,2.666c-1.734,4.679-1.561,10.989,0.463,15.778c0.288,0.652-3.816,2.611-18.443,8.922c-20.524,8.869-22.201,9.902-22.201,13.712c0,5.438,10.754,17.409,21.738,24.319c6.822,4.242,9.888,5.658,10.58,4.951c0.405-0.382,9.252-18.119,18.039-35.964l2.139-4.461l2.834,0.871c3.642,1.088,11.332,1.033,14.511-0.058l2.485-0.813l2.486,5.004c15.781,31.992,15.438,31.341,17.518,32.537c2.893,1.687,5.725,1.144,10.755-2.015c5.03-3.102,12.776-10.063,16.592-14.907c2.892-3.699,7.806-11.858,7.401-12.239c-0.116-0.164-9.889-4.464-21.625-9.576c-11.736-5.115-21.391-9.358-21.506-9.414c-0.059-0.106,0.289-1.25,0.809-2.558c1.271-3.318,1.271-9.849,0-13.438c-0.578-1.578-0.925-2.938-0.867-3.048c0.116-0.054,8.557-3.754,18.732-8.161c10.349-4.516,19.195-8.705,20.121-9.521c2.428-2.231,2.658-4.842,0.691-8.054c-4.277-6.854-11.103-14.036-18.387-19.15c-2.717-1.959-11.158-6.583-12.023-6.583C124.871,27.238,121.864,32.951,118.453,39.861z M100.53,72.45c4.511,1.578,7.806,4.136,9.829,7.563c1.561,2.666,1.734,3.481,1.676,7.617c-0.057,7.398-3.295,12.785-9.365,15.615c-2.834,1.305-3.988,1.523-8.209,1.523c-4.162-0.057-5.435-0.273-8.209-1.523c-6.649-3.047-10.176-8.924-9.541-15.941c0.289-3.7,2.256-8.215,4.741-10.99C85.498,71.799,93.824,70.111,100.53,72.45z"/><animateTransform  restart="always" from="0 94.48 88.099" dur="3s" begin="0s" to="360 94.48 88.099" type="rotate" fill="remove" attributeName="transform" repeatCount="indefinite" calcMode="linear" additive="replace" accumulate="none"></animateTransform></g>

但是官网上提示已经不建议用这种方法了，现在改为使用css来解决。如下是进行一个旋转的变换，style如下定义

<style> @keyframes svg-load {from { transform:rotate(0)}to { transform:rotate(360deg)} }@keyframes svg-load-ops {from { transform:rotate(360deg)}to { transform:rotate(0)} }svg path { animation:   svg-load-ops 2.2s linear infinite;-webkit-animation:   svg-load-ops 2.2s linear infinite;-webkit-transform-origin:94.48px 88.099px;-moz-animation:   svg-load 2.2s linear infinite;-o-animation:   svg-load 2.2s linear infinite; }</style>

svg如下：

<svg viewBox="0 0 400 400" width=400 height=400><path fill="#00FF00" d="M118.453,39.861c-3.469,6.964-8.037,16.159-10.176,20.402l-3.932,7.781l-2.486-0.871c-3.354-1.088-10.984-1.088-14.511,0.055c-1.562,0.49-2.892,0.816-2.949,0.707c-0.058-0.108-3.989-7.998-8.729-17.573c-4.685-9.576-9.193-18.063-10.002-18.879c-3.006-3.101-6.592-2.394-14.051,2.612c-7.92,5.386-15.262,13.384-20.523,22.36c-1.098,1.851-1.504,2.992-1.098,3.318c0.346,0.327,9.711,4.516,20.813,9.358c11.158,4.842,20.697,9.031,21.218,9.304c0.868,0.435,0.925,0.706,0.173,2.666c-1.734,4.679-1.561,10.989,0.463,15.778c0.288,0.652-3.816,2.611-18.443,8.922c-20.524,8.869-22.201,9.902-22.201,13.712c0,5.438,10.754,17.409,21.738,24.319c6.822,4.242,9.888,5.658,10.58,4.951c0.405-0.382,9.252-18.119,18.039-35.964l2.139-4.461l2.834,0.871c3.642,1.088,11.332,1.033,14.511-0.058l2.485-0.813l2.486,5.004c15.781,31.992,15.438,31.341,17.518,32.537c2.893,1.687,5.725,1.144,10.755-2.015c5.03-3.102,12.776-10.063,16.592-14.907c2.892-3.699,7.806-11.858,7.401-12.239c-0.116-0.164-9.889-4.464-21.625-9.576c-11.736-5.115-21.391-9.358-21.506-9.414c-0.059-0.106,0.289-1.25,0.809-2.558c1.271-3.318,1.271-9.849,0-13.438c-0.578-1.578-0.925-2.938-0.867-3.048c0.116-0.054,8.557-3.754,18.732-8.161c10.349-4.516,19.195-8.705,20.121-9.521c2.428-2.231,2.658-4.842,0.691-8.054c-4.277-6.854-11.103-14.036-18.387-19.15c-2.717-1.959-11.158-6.583-12.023-6.583C124.871,27.238,121.864,32.951,118.453,39.861z M100.53,72.45c4.511,1.578,7.806,4.136,9.829,7.563c1.561,2.666,1.734,3.481,1.676,7.617c-0.057,7.398-3.295,12.785-9.365,15.615c-2.834,1.305-3.988,1.523-8.209,1.523c-4.162-0.057-5.435-0.273-8.209-1.523c-6.649-3.047-10.176-8.924-9.541-15.941c0.289-3.7,2.256-8.215,4.741-10.99C85.498,71.799,93.824,70.111,100.53,72.45z"/></svg>

其中<style>可以放在html中，或者直接放在<svg>标签下