Javascript 进入视口时播放SVG-浏览器支持？

我有以下脚本，在SVG滚动到视图时播放它们（我在页面上有几个SVG）。这是完美的，但只适用于Firefox！这是正确的方法还是有更好的代码可以在其他浏览器上使用？理想情况下，如果它不能在IE上工作，并且我也希望如此，那么SVG将看起来像一个图像，而不是动画。但我希望它能在所有其他浏览器中工作

<div id="arrow-2id" class="arrow-2 leftarrows">
            <!--START ARROW 2-->
                <svg id="arrow2svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 265.009 303.044">
                <script type="text/javascript">
    
                var diva2 = document.getElementById("arrow-2id");
                
                window.addEventListener("scroll", function() {
                  if (document.documentElement.scrollTop >= diva2.offsetTop - -500) {
                    diva2.classList.add("play");
                  }
                  
                 }
                );
                </script>
                
                <mask id="arrow2-mask1" maskUnits="userSpaceOnUse">
                <path d="M272.304,11.13c-85-31.5-421.5,178.5-175,268.5"/>
                </mask>
                
                <mask id="arrow2-mask2" maskUnits="userSpaceOnUse">
                <path d="M-3.696,293.63
                    c130.667-12.167,130.667,23.5,58.5-89.5"/>
                </mask>
                
                <path mask="url(#arrow2-mask1)" fill="#42A8FC" d="M74.443,277.599c-22.03-9.911-41.892-24.317-56.394-41.811c-32.086-38.702-16.961-81.441,14.377-119.45
                    c8.258-9.874,27.106-28.748,31.125-32.337C95.94,55.065,133.39,29.76,173.667,13.682c21.596-8.622,49.867-18.374,71.02-11.181
                    c10.227,3.479,20.322,12.379,20.322,14.696c-0.002,2.317-8.945-0.005-10.693-0.368c-5.762-1.199-13.512-0.332-19.262,0.301
                    c-22.932,2.51-47.227,13.269-68.383,23.897c-60.319,27.104-104.662,75.694-105.099,75.646
                    c-12.522,12.951-23.527,26.688-32.052,40.988c-32.137,53.904,3.738,93.021,50.723,109.687
                    C91.345,270.88,88.917,283.693,74.443,277.599z"/>
                    
                    <path mask="url(#arrow2-mask2)" fill="#42A8FC" d="M74.443,277.599c-20.021,1.14-40.042,2.28-60.062,3.422c-16.744,0.952-18.679,22.91-2.629,21.996
                    c30.077-1.713,60.152-3.425,90.23-5.14c8.539-0.484,17.633-7.912,13.074-16.089c-13.158-23.591-26.316-47.181-39.471-70.771
                    c-6.476-11.604-30.8-2.861-23.525,10.185c8.394,15.048,19.787,31.097,28.182,46.146c5.811,8.531,5.436,9.656,5.436,9.656
                    L74.443,277.599z"/>
                
                </svg>
                
                <style>
                
                    
                .play #arrow2-mask1 path {
                    fill: none;
                    stroke: white;
                    stroke-width: 29;
                    stroke-dasharray: 478.362 478.362;
                    stroke-dashoffset: 0;
                    animation: brush2a 2s linear ;
                    animation-fill-mode: forwards;
                }
                .play #arrow2-mask2 path {
                    fill: none;
                    stroke: white;
                    stroke-width: 29;
                    stroke-dasharray: 203.128 203.128;
                    stroke-dashoffset: 0;
                    animation: brush2b 2s linear ;
                    animation-fill-mode: forwards;
                }
                @keyframes brush2a {
                      0% { stroke-dashoffset: 478.362; }
                     25% { stroke-dashoffset: 478.362; }
                     75% { stroke-dashoffset: 0; }
                    100% { stroke-dashoffset: 0; }
                }
                @keyframes brush2b {
                      0% { stroke-dashoffset: 203.128; }
                     80% { stroke-dashoffset: 203.128; }
                    100% { stroke-dashoffset: 0; }
                }
                </style>
                <!--END ARROW 2-->
                </div>

var diva2=document.getElementById（“箭头-2id”）；
addEventListener（“滚动”，函数（）{
if（document.documentElement.scrollTop>=diva2.offsetTop--500）{
第2部分。类列表。添加（“播放”）；
}
}
);
.播放箭头2-mask1路径{
填充：无；
笔画：白色；
笔画宽度：29；
行程：478.362 478.362；
笔划偏移：0；
动画：线性；
动画填充模式：正向；
}
.播放箭头2-mask2路径{
填充：无；
笔画：白色；
笔画宽度：29；
笔划数组：203.128 203.128；
笔划偏移：0；
动画：线性；
动画填充模式：正向；
}
@关键帧笔刷2a{
0%{stroke dashoffset:478.362；}
25%{偏移量：478.362；}
75%{stroke dashoffset:0；}
100%{stroke dashoffset:0；}
}
@关键帧笔刷2b{
0%{stroke dashoffset:203.128；}
80%{stroke dashoffset:203.128；}
100%{stroke dashoffset:0；}
}

我想知道这是否是因为脚本在SVG内部。我尝试将脚本移到SVG外部，但似乎没有任何区别。我没有看到代码问题。动画在chrome和edge中工作，事件处理程序正在绑定。所以这可能与您没有在这里显示的代码有关。