如果在页面中嵌入svg图片，在刷新时都会被重新加载，动画进度会被重置。

下面是一张嵌入到页面中svg动画。

而这张是通过 background-image 属性设置的图片，当页面刷新时，动画的进度不会被重置。

刷新本页面就可以看到效果了

注意：以上效果只在 chrome 浏览器中测试过。

图片源码：

<svg style="width:100px;height:100px; version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" xml:space="preserve">
    <style>
        rect {transform-origin:50% 50%;animation: anime 60s infinite linear;}
        @keyframes anime {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}
    </style>
    <rect x="47.5" y="0" width="5" height="100"/>
</svg>