javascript - 加载时 svg 动画出现问题

Question

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

基本上，我有一个带有循环视频的英雄横幅。我希望在视频加载时有一个加载指示器，然后在横幅中的视频加载完成时让加载器淡出。 到目前为止，淡出效果似乎正常，但 SVG 动画似乎卡住了，而不是循环播放。预期的行为是让 SVG 不断循环直到视频加载，但它似乎只是停留在第一帧。有谁知道为什么会发生这种情况或者修复方法是什么？

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); }  }