Javascript 当SVG动画显示在视口中时开始

当动画出现在视口中时，我在尝试开始动画时花了很多时间。我在这里搜索了以前关于堆栈溢出的问题，但我似乎不知道如何调整JS以满足我的需要。我最近的一次尝试是，当粉红线出现在视口中时，尝试让它开始动画。。。正如我想象的那样，一旦成功了，我就可以应用到其他项目中。如果你还需要什么，请告诉我。有什么想法吗

SVG

JS

var onAppear=[]；
document.addEventListener（“DOMContentLoaded”，function（））{
onAppear=[].map.call（document.queryselectoral（“#animate”），函数（项）{
退货项目；
});
}，假）；
addEventListener（“滚动”，函数（）{
onAppear.forEach（函数（元素）{
var vwTop=window.pageYOffset；
var vwBottom=（window.pageYOffset+window.innerHeight）；
var elemTop=elem.offsetTop；
var elemHeight=离地高度；
if（vwBottom>elemTop&（（vwTop-elemHeight）

我能想出这个。。。我相信有更好的选择，但它是有效的。我使用了下面的脚本并更新了相应的CSS样式以匹配。这里是最新的

JS

---

这可能对你有帮助。谢谢我能够想出如何在滚动时启动它。现在我要做的就是让人吃惊。这是我的最新消息

<svg version="1.1" id="animate" class="animatedSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="792px" height="815px" viewBox="0 0 792 815" xml:space="preserve">

  <path id="purple" class="purple-stroke purpleAnimation" d="M597.645,416.25c0,121.334-98.361,219.695-219.695,219.695"/>

  <path id="green" class="green-stroke" d="M173.096,197.039c-58.343,54.482-94.817,132.087-94.817,218.211 c0,164.857,133.644,298.5,298.5,298.5"/>

  <path id="red" class="red-stroke" d="M636.449,415.25c0,143.318-116.182,259.5-259.5,259.5c-143.318,0-259.5-116.182-259.5-259.5"/>

  <path id="yellow" class="yellow-stroke" d="M585.398,201.588c55.557,54.209,90.051,129.907,90.051,213.662 c0,164.857-133.644,298.5-298.5,298.5"/>

  <path id="pink" class="pink-stroke pinkAnimation" d="M376.949,77.25c26.421,0,52.134,3.031,76.81,8.766c149.667,34.779,261.19,168.983,261.19,329.234"/>

</svg>

.pink-stroke {
  fill:none;
  stroke:#E199C3;
  stroke-width:40;
  stroke-linecap:round;
  stroke-dasharray: 1000;
  stroke-dashoffset:1000;
   -webkit-animation: dash 2s linear forwards;
  animation: dash 2s linear forwards; 
}

.pinkAnimation {
  fill:none;
  stroke:#E199C3;
  stroke-width:40;
  stroke-linecap:round;
  stroke-dasharray: 1000;
  stroke-dashoffset:1000;
-webkit-animation: dash 2s linear forwards;
      animation: dash 2s linear forwards;
}

.purple-stroke{
  fill:none;
  stroke:#9E70B0;
  stroke-width:40;
  stroke-linecap:round;
  stroke-miterlimit:10;
  stroke-dasharray: 1000;
  stroke-dashoffset:1000;
  -webkit-animation: dash 2s linear forwards;
  animation: dash 2s linear forwards;
  -webkit-animation-delay:.85s;
  animation-delay:.85s;
}

.green-stroke{
  fill:none;
  stroke:#21B585;
  stroke-width:40;
  stroke-linecap:round;
  stroke-miterlimit:10;
  stroke-dasharray: 1000;
  stroke-dashoffset: -1000;
  -webkit-animation: dash 2s linear forwards;
  animation: dash 2s linear forwards;
  -webkit-animation-delay:1.25s;
  animation-delay:1.25s;
}

.red-stroke{
  fill:none;stroke:#E9706C;
  stroke-width:40;
  stroke-linecap:round;
  stroke-miterlimit:10;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  -webkit-animation: dash 2s linear forwards;
  animation: dash 2s linear forwards;
  -webkit-animation-delay:.85s;
  animation-delay:.85s;
}

.yellow-stroke {
  fill:none;
  stroke:#EFEF99;
  stroke-width:40;
  stroke-linecap:round;
  stroke-miterlimit:10;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  -webkit-animation: dash 2s linear forwards;
  animation: dash 2s linear forwards;
  -webkit-animation-delay:.45s;
  animation-delay:.45s;
}


@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }

var onAppear = [];

document.addEventListener("DOMContentLoaded", function() {
  onAppear = [].map.call(document.querySelectorAll("#animate"), function(item ) {
    return item;
  });
}, false);

window.addEventListener("scroll", function() {
  onAppear.forEach(function(elem) {
    var vwTop = window.pageYOffset;
    var vwBottom = (window.pageYOffset + window.innerHeight);
    var elemTop = elem.offsetTop;
    var elemHeight = elem.offsetHeight;

    if (vwBottom > elemTop && ((vwTop - elemHeight) < elemTop)) {
     elem.classList.add(".pinkAnimation");
      elem.classList.remove(".pink-stroke")

    } else {
      elem.classList.remove("pinkAnimation");
      elem.classList.add ('.pink-stroke')
    }
  });
}, false);

$(window).scroll(function() {
  var wScroll = $(this).scrollTop();

  if (wScroll > $('#animate').offset().top - ($(window).height() / 1.2)) {
    $("#pink").attr("class", "pink-stroke dash-pink");
    $("#yellow").attr("class", "yellow-stroke dash-yellow");
    $("#red").attr("class", "red-stroke dash-red");
    $("#purple").attr("class", "purple-stroke dash-purple");
    $("#green").attr("class", "green-stroke dash-green");

  } else {
    $("#pink").attr("class", "pink-stroke");
    $("#yellow").attr("class", "yellow-stroke");
    $("#red").attr("class", "red-stroke");
    $("#purple").attr("class", "purple-stroke");
    $("#green").attr("class", "green-stroke");
  }
});