我正在使用HTML中的SVG使用折线工具定义特定形状。我希望通过触摸按钮并在几秒钟内将特定形状的外观动画化为不同的形状。
我一直在寻找使用动画工具来更改折线的点属性,但到目前为止,仍找不到解决方案或完美的方法。
是否有可能做到这一点?如果没有,是否有可行的选择?
最佳答案
您可以为补间提供折线(甚至具有贝塞尔曲线的路径等),只要它们具有相同数量的点,这是因为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>