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 < / strong>和 IE 。

Answer 1

你面临的两个问题并不相同。

对于Firefox ，这似乎是this bug的复活，已标记为＆＃34;已解决＆＃34;。当我在没有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的支持。