.refresh-wrap {
width: 200px;
height: 200px;
border: 3px dotted red;
}
.refresh-wrap .svg-icon {
animation: rotatefresh 1s infinite linear;
transform-origin: 50% 50%;
}
@keyframes rotatefresh {
100% {
transform: rotate(360deg) translateZ(0);
}
}<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
style="position: absolute; width: 0; height: 0" id="__SVG_SPRITE_NODE__">
<symbol viewBox="0 0 24 24" id="icon-refresh">
<!-- Generator: Sketch 49 (51002) - http://www.bohemiancoding.com/sketch -->
<title>刷新</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="icon-refresh_Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="icon-refresh_拍品详情-出价" transform="translate(-339.000000, -867.000000)" fill="#FF9A00"
fill-rule="nonzero">
<g id="icon-refresh_提交" transform="translate(0.000000, 701.000000)">
<g id="icon-refresh_刷新" transform="translate(339.000000, 166.000000)">
<path d="M12.2016807,24 C11.700628,24 11.2941176,23.5855666 11.2941176,23.0740726 C11.2941176,22.5625785 11.700628,22.1481451 12.2016807,22.1481451 C17.706141,22.1481451 22.184847,17.5790883 22.184847,11.9629708 C22.184847,8.33764134 20.2716461,4.95675165 17.1914975,3.13925865 C16.7578056,2.88337408 16.6094934,2.31702211 16.8600332,1.87425184 C17.1111393,1.43178418 17.6671484,1.28016825 18.1002471,1.53638297 C21.739344,3.68332633 24,7.67876817 24,11.9629983 C23.999973,18.6002881 18.7070599,24 12.2016807,24 Z"
id="icon-refresh_Shape"></path>
<path d="M6.81501566,22.5882353 C6.67498165,22.5882353 6.53257464,22.5554577 6.39963265,22.486312 C2.45209185,20.4339192 0,16.3780143 0,11.9013052 C0,5.33882725 5.29295139,0 11.7983174,0 C12.2993711,0 12.7058824,0.409760463 12.7058824,0.915487094 C12.7058824,1.42121373 12.2993711,1.83097419 11.7983174,1.83097419 C6.29384538,1.83097419 1.81512991,6.34851245 1.81512991,11.9013051 C1.81512991,15.6896036 3.89023824,19.1217826 7.23155824,20.8585859 C7.67706218,21.0904498 7.85196313,21.6423643 7.62210564,22.0917571 C7.4614157,22.4070474 7.14354146,22.5882353 6.81501566,22.5882353 Z"
id="icon-refresh_Shape"></path>
<path d="M17.1246966,7.05882353 C16.6329542,7.05882353 16.2352941,6.66118273 16.2352941,6.17041419 L16.2352941,2.32065794 C16.2352941,1.82988938 16.640232,1.41176471 17.1319744,1.41176471 L20.9916537,1.41176471 C21.4833961,1.41176471 21.8823529,1.82922947 21.8823529,2.31999801 C21.8823529,2.81076655 21.4833961,3.22823132 20.9916537,3.22823132 L18.0140991,3.22823132 L18.0140991,6.17044058 C18.0140991,6.66118275 17.6164391,7.05882353 17.1246966,7.05882353 Z"
id="icon-refresh_Shape"></path>
<path d="M6.86796299,22.5882353 L3.00832963,22.5882353 C2.51659643,22.5882353 2.11764706,22.1898582 2.11764706,21.6965763 C2.11764706,21.2032944 2.51659643,20.8049173 3.00832963,20.8049173 L5.98593424,20.8049173 L5.98593424,17.8341355 C5.98593424,17.3408537 6.38358686,16.9411765 6.87532006,16.9411765 C7.36705326,16.9411765 7.76470588,17.3408537 7.76470588,17.8341355 L7.76470588,21.7036072 C7.76473236,22.1968891 7.35969619,22.5882353 6.86796299,22.5882353 Z"
id="icon-refresh_Shape"></path>
</g>
</g>
</g>
</g>
</symbol>
</svg>
<div class="refresh-wrap">
<svg class="svg-icon" width="200" height="200">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-refresh"></use>
</svg>
</div>
我使用SVG加载。但我发现如果你使用动画，SVG会动摇。
环境： PC和Mobile都是