使用SVG动画制作折线外观的动画

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>