我有一个带有@keyframe动画的SVG文件，这些动画在文件内的<style>块中定义，并使用background-image属性嵌入到页面中。
在Chrome和Safari中，动画可以完美地工作，但在Firefox中却不能。当在Firefox中查看图像本身时，动画按预期工作。
.loader {
height: 3.375rem;
width: 3.375rem;
background: url("http://www.haaretz.co.il/htz/images/htz-spinner.svg");
}<div class="loader"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
<style>
.alef {
fill: #fff
}
.alef-bg {
fill: #09A5D9
}
.commet-wrapper {
-ms-transform: translate(76px, 76px) scale(-1, .57) skewY(50deg);
-webkit-transform: translate(76px, 76px) scale(-1, .57) skewY(50deg);
transform: translate(76px, 76px) scale(-1, .57) skewY(50deg);
}
.commet {
fill: #067194;
-webkit-animation: color-change 2s linear infinite .8s, spin 1s linear infinite;
animation: color-change 2s linear infinite .8s, spin 1s linear infinite;
}
@-webkit-keyframes color-change {
0%, 100% {
fill: #067194;
}
50% {
fill: #79C9E4;
}
}
@-webkit-keyframes spin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes color-change {
0%, 100% {
fill: #067194;
}
50% {
fill: #79C9E4;
}
}
@keyframes spin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
</style>
<g id="lower">
<circle class="alef-bg" cx="80" cy="80" r="50" />
<path class="alef" d="M100.281,68.29l2.867-1.655c0.439,1.038,0.813,1.661,0.813,1.661S102.515,68.293,100.281,68.29z M72.541,93.58c0,0-4.308-0.04-8.036,0c-1.929,0.022-3.277-0.844-4.204-2.207l-4.653,2.686c-0.612,5.78-1.794,10.405-2.4,12.212 c-0.464,0.86,0.084,0.932,0.084,0.932h21.388C70.909,99.456,72.541,93.58,72.541,93.58z M104.421,87.988 c-5.284-3.548-9.372-6.944-16.08-11.5c-0.273-0.185-0.525-0.496-0.742-0.875l-12.45,7.188l31.58,23.203 c-0.072-0.144,0.264-0.152,0.2-0.292c-1.436-2.984-2.436-6-2.944-9.076C103.341,92.728,103.593,91.712,104.421,87.988z"
/>
</g>
<g class="commet-wrapper">
<path class="commet" d="M0,70c35.899,0,48-31.34,48-70c0-19,27-19,27,0C75,38.66,41.421,70,0,70z">
</path>
</g>
<g id="upper">
<path class="alef-bg" d="M123.3,55C109.493,31.086,78.914,22.893,55,36.7S22.893,81.086,36.7,105L123.3,55z" />
<path class="alef" d="M55.785,65.404c-0.544,5.612-1.276,6.4-1.268,11.048c0.004,5.068,1.708,9.352,1.404,14.356 c-0.066,1.117-0.161,2.201-0.272,3.251l2.933-0.382l1.72-2.305c-1.925-2.832-2.004-7.837-1.52-11.661 c0.548-4.304,3.132-6.432,3.328-6.492l13.04,9.581l7.962-2.317l4.488-4.871c-0.509-0.887-0.812-2.186-0.622-3.397 c0.352-2.192,2.24-3.932,4.084-3.932c3.468,0,6.805,0.003,9.22,0.006l2.518-0.469l0.35-1.186c-1.148-2.713-2.76-8.355,0.561-13.831 c-16.072,0-18.04-0.008-18.04-0.008c0,1.228-0.672,2.784-0.528,5.372c0.148,2.664,1.812,4.844,0.756,8.856 c-0.828,3.144-1.864,4.552-2.776,5.152c-8.428-6.264-20.696-15.256-25.836-19.34l-3.508-0.004c0,0-0.312-0.048-0.208,0.164 C55.397,56.592,56.177,61.328,55.785,65.404z"
/>
</g>
</svg>