html - Firefox 不会播放嵌入为背景图像的 SVG 中定义的关键帧动画

Question

我在文件中的 SVG block 内定义了一个带有 @keyframe 动画的 <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>

如有任何帮助，我们将不胜感激，在此先致谢。

Answer 1

这是 Firefox 中的一个错误

查看错误: bugzilla.mozilla.org/show_bug.cgi?id=908634和 bugzilla.mozilla.org/show_bug.cgi?id=1121478

只有嵌入式 SVG 有效。