【问题标题】：how to animate svg path in jquery如何在 jquery 中为 svg 路径设置动画
【发布时间】：2017-04-25 14:58:16
【问题描述】：

此代码适用于 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>

【问题讨论】：

你试过使用@-moz- 吗？
是的，不工作....
d 不是当前 SVG 标准 (1.1) 中可以使用 CSS 设置样式的属性。它在 SVG 2 中是允许的。但是，到目前为止，只有 Chrome 实现了这一点。您现在需要使用<animate> - 根据兰迪的回答..

标签： jquery css svg css-transitions browser-support

【解决方案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>

【讨论】：

在第一个转换周期 svg 突然返回到初始路径后，我需要动画，而 svg 返回到初始路径@RANDY
属性会从初始值变为结束值，想用动画恢复到初始值
查看 svg 动画指南 ---> css-tricks.com/guide-svg-animations-smil