Question

我正在尝试为svg <path>元素设置动画。最初的<path>元素具有L(lineto)个命令，而我尝试为其设置动画的<path>具有C(cubic-bezier curve)个命令。我曾尝试对其进行动画处理，但实际上并没有在两条路径之间过渡。这样可能吗？

<svg>
  <path id="path" d="M0,50 L25,40 L50,60 L75,40 L100,60 L125,40 L150,50" fill="none" stroke-width="2" stroke="#000" />
  <animate xlink:href="#path"
           attributeName="d"
           dur="3s"
           from="M 0 50 L 25 40 L 50 60 L 75 40 L 100 60 L 125 40 L 150 50"
           to="M 0 80 C 25 55 50 55 75 80 C 100 105 125 105 150 80"
           repeatCount="indefinite" />
</svg>

Answer 1

您已经发现，路径数据动画需要列出完全相同的命令序列和工作点。就是说，您可以根据需要将路径划分为多个段，如果三次贝塞尔曲线的控制点位于一条直线上，则它可以描述一条直线。为了使您的示例正常工作，您需要

将每个L段重写为C段
将每个C段划分为三个C段，以使曲线保持不变

最好使用诸如Inkscape这样具有适当工具的通用编辑器来完成这两项任务。

<svg>
  <path id="path" d="M0,50 L25,40 L50,60 L75,40 L100,60 L125,40 L150,50" fill="none" stroke-width="2" stroke="#000" />
  <animate xlink:href="#path"
           attributeName="d"
           dur="3s"
           from="M 0,50 
                 C 12.5,45 12.5,45 25,40
                 37.5,50 37.5,50 50,60
                 62.5,50 62.5,50 75,40
                 87.5,50 87.5,50 100,60
                 112.5,50 112.5,50 125,40
                 137.5,45 137.5,45 150,50"
           to="M 0,80
               C 8.33333,71.6667 16.6667,66.1111 25,63.3333
               33.3333,60.5556 41.6667,60.5556 50,63.3333
               58.3333,66.1111 66.6667,71.6667 75,80
               83.3333,88.3333 91.6667,93.8889 100,96.6667
               108.333,99.4444 116.667,99.4444 125,96.6667
               133.333,93.8889 141.667,88.3333 150,80"
           repeatCount="indefinite" />
</svg>

从lineto到三次贝塞尔曲线的SVG路径动画命令

1 个答案: