SVG animateTransform 不适用于 FF 和 IE

Question

我在我的 svg 图像上使用 animateTransform 和 keyframes 创建了一个自定义 PreLoader 屏幕。

当我处理图像时，它们在所有浏览器上都运行良好。但是一旦我在我的 PreLoader 中使用它们，它们就会突然开始工作。

您可以在下面的代码段中查看它们的行为，它可以在 Chrome 中完美运行，但在 Firefox 和 IE 上它们甚至可以在全部。

代码片段

//PreloadMe
$(window).on('load', function() { // makes sure the whole site is loaded
  $('.la-anim-9').addClass('la-animate'); //to run the preloader lines animation
  setTimeout(function() {
    $('.preloader-logo img')
      .fadeOut(400, function() {
        $('.preloader-logo img').attr('src', 'http://gdurl.com/wzWh');
        //to create the red logo effect
      }).fadeIn(400);
  }, 4500);
  setTimeout(function() {
    $('#preloader').fadeOut('slow'); // will fade out the white DIV that covers the website. 
  }, 6000);
  setTimeout(function() {
    $('body').css({
      'overflow': 'visible'
    });
    //to revert back the normal scrolling
  }, 6100);
});

/* Preloader */

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  /* change if the mask should have another color then white */
  z-index: 99;
  /* makes sure it stays on top */
}
.la-anim-9 {
  position: fixed;
  z-index: -1;
  width: calc(100% - 100px);
  height: calc(100% - 100px);
  border: 0px solid rgba(0, 0, 0, 0.1);
  pointer-events: none;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  margin: 0 auto;
  right: 0;
}
.preloader-logo {
  opacity: 0;
  position: absolute;
  left: 0;
  right: 0;
  width: 366px;
  height: 133px;
  top: 50%;
  margin: 0 auto;
  display: block;
  transform: translateY(-50%);
  z-index: 10;
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  -ms-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}
.preloader-logo img {
  max-width: 300px;
}
.la-anim-9.la-animate .preloader-logo {
  opacity: 1;
}
.la-anim-9 .preloadline {
  position: fixed;
  background: #373737;
}
.la-anim-9 .preloadline-top,
.la-anim-9 .preloadline-bottom {
  width: 0;
  height: 2px;
}
.la-anim-9 .preloadline-left,
.la-anim-9 .preloadline-right {
  width: 2px;
  height: 0;
}
.la-anim-9 .preloadline-top {
  top: 0;
  left: 0;
}
.la-anim-9 .preloadline-right {
  top: 0;
  right: 0;
}
.la-anim-9 .preloadline-bottom {
  right: 0;
  bottom: 0;
}
.la-anim-9 .preloadline-left {
  bottom: 0;
  left: 0;
}
.la-anim-9.la-animate .preloadline-right {
  height: 100%;
  -webkit-transition: height 1.35s linear 0.3s;
  transition: height 1.35s linear 0.3s;
}
.la-anim-9.la-animate .preloadline-bottom {
  width: 100%;
  -webkit-transition: width 1.35s linear 1.65s;
  transition: width 1.35s linear 1.65s;
}
.la-anim-9.la-animate .preloadline-left {
  height: 100%;
  -webkit-transition: height 1.35s linear 3s;
  transition: height 1.35s linear 3s;
}
.la-anim-9.la-animate .preloadline-top {
  width: 100%;
  -webkit-transition: width 1.35s linear 4.35s;
  transition: width 1.35s linear 4.35s;
}
.la-anim-9.la-animate {
  z-index: 100;
  opacity: 0;
  -webkit-transition: border 0.3s, opacity 0.3s 5.7s;
  transition: border 0.3s, opacity 0.3s 5.7s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Preloader -->
<div id="preloader">
  <div class="la-anim-9">
    <div class="preloadline preloadline-top"></div>
    <div class="preloadline preloadline-right"></div>
    <div class="preloader-logo">
      <img src="http://gdurl.com/5HVo" alt="Alt Text" />
    </div>
    <div class="preloadline preloadline-bottom"></div>
    <div class="preloadline preloadline-left"></div>
  </div>
</div>

我已经尝试了几乎所有方法，并为此挖掘了 SO 以及 Google，但还没有找到适用于 Firefox 和 IE。

Answer 1

你面临的两个问题不一样。

对于 Firefox，这似乎是 this bug 的复兴，它已被标记为“已解决”。当我在没有 CSS 声明的情况下尝试您的文件时，我可以在 <img> 标记中看到它。
不过，我并没有深入研究您的标记以查看是否有其他原因导致它。

这里的解决方法是使用 <img> 以外的其他元素：<object>、<iframe> 或 <embed> 应该可以。

对于 IE，只是这个浏览器不支持 SMIL 动画。然后，您必须使用 javascript 后备库（例如 FakeSmile），并将其包含在您的 SVG 文档中。
但是在这里，您必须再次留下<img> 标签，因为我们无法从该元素执行脚本。以上 3 个中的任何一个都可以。

所以这会让您将 HTML 标记更改为

<div class="preloader-logo">
  <object data="http://gdurl.com/5HVo"></object>
</div>

并添加一个

<script xlink:href="pathTo/FakeSmile.js"></script>  

在您的 svg 文档中，您将获得对 IE 和 FF 的支持。