Question

我使用SVG动画，效果很好。但我的Chome（版本51.0.2704.103 m）告诉我们：

SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.

那么请你帮我把代码转换成CSS动画来满足浏览器：

<svg viewBox="0 0 194.6 185.1">
  <polygon fill="#FFD41D" points="97.3,0 127.4,60.9 194.6,70.7 145.9,118.1 157.4,185.1 97.3,153.5 37.2,185.1 48.6,118.1 0,70.7 67.2,60.9">
    <animate id="animation-to-check" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="110,58.2 147.3,0 192.1,29 141.7,105.1 118.7,139.8 88.8,185.1 46.1,156.5 0,125 23.5,86.6 71.1,116.7"/>
  </polygon>
</svg>

这是我启动代码的方式：

document.getElementById("animation-to-check").beginElement();

JS fiddle playground

谢谢。

Answer 1

这可以通过SVG-Morpheus library的帮助来实现。下面的代码段显示了它如何用于动画从一个SVG多边形到另一个SVG多边形的变形过渡。如果您想自己编辑代码段，我还提了codepen sandbox for it。

＆＃13;

const icons = new SVGMorpheus('#icons');
icons.to('check', {
  duration: 500,
  easing: 'quad-in-out',
  rotation: 'none'
});

＆＃13;

body {
  width: 300px;
}
g {
  fill: #FFD41D;
}

＆＃13;

<body>
  <script src="//cdnjs.cloudflare.com/ajax/libs/SVG-Morpheus/0.3.2/svg-morpheus.js"></script>
  <svg id="icons" viewBox="0 0 194.6 185.1">
    <g id="check">
      <polygon points="110,58.2 147.3,0 192.1,29 141.7,105.1 118.7,139.8 88.8,185.1 46.1,156.5 0,125 23.5,86.6 71.1,116.7"/>
    </g>
    <g id="star">
      <polygon points="97.3,0 127.4,60.9 194.6,70.7 145.9,118.1 157.4,185.1 97.3,153.5 37.2,185.1 48.6,118.1 0,70.7 67.2,60.9"/>
    </g>
  </svg>
</body>

＆＃13;

Conver SVG Animate（指向）CSS

1 个答案: