如何在jquery中为svg路径设置动画

Question

此代码适用于chrome，但不适用于safari，firefox。有没有办法用jQuery做到这一点？

＆＃13;

＆＃13;

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

＆＃13;

//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>

＆＃13;

＆＃13;

＆＃13;

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>