jquery - SVG animateTransform 不适用于 FF 和 IE

Question

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

当我处理图像时，它们在所有浏览器上都运行良好。但是一旦我在我的 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< 的合适解决方案/strong> 和 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 的支持。