Question

我在我的网站上遇到了SVG动画预加载器问题。（我正在使用w3schools的SVG加载动画。）

基本上，我有一个带有循环视频的英雄横幅。我希望在视频加载时有一个加载指示器，然后在横幅广告中的视频加载完成后让加载器淡出。到目前为止，淡出似乎有效，但是SVG动画似乎卡住了，而不是循环播放。预期的行为是使SVG不断循环播放，直到加载视频为止，但它似乎只是停留在第1帧上。有人知道为什么会发生这种情况或可能会解决此问题吗？

var vid = document.getElementById("header-video");

if(vid){
    vid.onloadeddata = function() {
        $(".loading-wrapper").fadeOut("slow");
    };
}

.loader{
  margin: 0 0 2em;
  height: 100px;
  width: 20%;
  text-align: center;
  padding: 1em;
  margin: 0 auto 1em;
  display: inline-block;
  vertical-align: top;
}

svg path,
svg rect{
  fill: #7AC013;
}

.loading-wrapper{
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgb(41, 45, 46);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
}

.video_header{
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
  
.video_header .wrapper__video{
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: -1;
}

<div class="video_header">
                <div class="loading-wrapper">
                    <!-- 2 -->
                    <div class="loader loader--style2" title="1">
                        <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                        width="64px" height="64px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
                        <path fill="#000" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
                        <animateTransform attributeType="xml"
                            attributeName="transform"
                            type="rotate"
                            from="0 25 25"
                            to="360 25 25"
                            dur="0.6s"
                            repeatCount="indefinite"/>
                        </path>
                        </svg>
                    </div>
                </div>
                <div class="gradient-overlay"></div>
                <video autoplay loop muted playsinline class="wrapper__video" id="header-video">
                    <source src="i/Website_Video_Header_1.mp4">
                </video>
            </div>

Answer 1

使用这种标记的

SVG动画已被浏览器淘汰。相反，您应该使用CSS对其进行动画处理。

删除<animateTransform>标签。并添加一些CSS：

.loading-wrapper svg path {
   animation: .6s linear infinite rotate;
}
@keyframes rotate { from { transform: rotate(0); } to { transform: rotate(360deg); }  }

加载时svg动画出现问题

1 个答案: