animation - 使用 SVG animate 为折线的外观设置动画

Question

我正在 HTML 中使用 SVG 来使用折线工具定义特定的形状。我希望通过按一下按钮并在几秒钟内将特定形状的外观动画化为不同的形状。

我一直在考虑使用动画工具来更改折线点属性，但到目前为止一直无法找到解决方案或完美运行的东西。

是否有可能做到这一点？如果没有，是否有可行的替代方案？

Answer 1

您可以为补间提供折线(甚至带有贝塞尔曲线的路径等)，只要它们具有相同的点数，因为 SVG 只是独立地移动每个(控制)点。如果形状没有相同数量的控制点，您可以重合一些，但我想图形编辑器会“纠正”这一点。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="5cm"  viewBox="0 0 1000 1000"
  xmlns="http://www.w3.org/2000/svg" version="1.1">
<polyline stroke="red" stroke-width="3" fill="none">
  <animate attributeName="points" dur="5s" repeatCount="indefinite"
    from="100,100 900,100 900,900 100,900 100,100"
      to="200,200 800,500 800,500 200,800 200,200"
  />
</polyline>
</svg>