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>

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

1 个答案: