如何在jQuery中使用SVG路径动画

Question

此代码在Chrome上工作，但在Safari，Firefox中不起作用。有什么可能的方法可以使用jQuery？

svg .cls-1 {
  d: path("M.37,1.32V120.37C207.06,182.09,430.47,238,587.2,247.54c13.49.11,247.13,41.9,432.89-203.6q17.89-21.5,35.11-42.62Z");
  -webkit-animation: 20s top-wave linear infinite alternate;
  -moz-animation: 20s top-wave linear infinite alternate;
  animation: 20s top-wave linear infinite alternate
}
@keyframes top-wave {
  from, to {
    d: path("M.37,1.32V120.37C207.06,182.09,430.47,238,587.2,247.54c13.49.11,247.13,41.9,432.89-203.6q17.89-21.5,35.11-42.62Z")
  }
  50% {
    d: path("M.37,1.32V120.37C207.08,082.09,330.47,238,587.2,47.54c13.49.11,247.13,41.9,432.89-203.6q17.89-21.5,35.11-42.62Z")
  }
}

//svg element
<svg id="Layer_1" data-name="Layer 1" class=" bg-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="Shape_1" data-name="Shape 1">
    <path class="cls-1" d="M.37,1.32V120.37C207.06,182.09,430.47,238,587.2,247.54c13.49.11,247.13,41.9,432.89-203.6q17.89-21.5,35.11-42.62Z" transform="translate(-30.37 -0.32)"></path>
  </g>
</svg>

Answer 1

使用动画标签

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="Layer_1" data-name="Layer 1" class=" bg-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="Shape_1" data-name="Shape 1">
    <path class="cls-1" transform="translate(-30.37 -0.32)"d="M.37,1.32V120.37C207.06,182.09,430.47,238,587.2,247.54c13.49.11,247.13,41.9,432.89-203.6q17.89-21.5,35.11-42.62Z" >
      
      <!-- animate tag -->
      <animate attributeType="XML" attributeName="d" from="M.37,1.32V120.37C207.06,182.09,430.47,238,587.2,247.54c13.49.11,247.13,41.9,432.89-203.6q17.89-21.5,35.11-42.62Z" to="M.37,1.32V120.37C207.08,082.09,330.47,238,587.2,47.54c13.49.11,247.13,41.9,432.89-203.6q17.89-21.5,35.11-42.62Z"
        dur="20s" repeatCount="indefinite"/>
      
       <!-- animate tag  END-->
    </path>
  </g>
</svg>