SVG路径曲线以相反方向动画化

Question

我在Adobe Illustrator中创建了一个SVG，并使用由其生成的代码。我正在尝试对SVG图形进行动画处理。我的SVG元素：

<svg width="100px" height="100px">
    <path fill="none" d="M5,60c0-24.873,20.127-45,45-45" />
    <path fill="none" d="M95,60c0-24.873-20.127-45-45-45" />
</svg>

第一条曲线按顺时针方向动画，我想让第二条曲线也按顺时针方向动画。你可以在问题末尾看到演示代码。

请解释如何使第二条路径按顺时针方向动画。如果可能的话，请提供两条路径的曲线数据。谢谢！

svg {
  width: 300px;
}
svg path {
  fill-opacity: 0;
  stroke: #50514F;
  stroke-width: 5;
  stroke-dasharray: 870;
  stroke-dashoffset: 870;
  animation: draw 10s infinite linear;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

<svg width="100px" height="100px">
  <path fill="none" d="M5,60c0-24.873,20.127-45,45-45" />
  <path fill="none" d="M95,60c0-24.873-20.127-45-45-45" />
</svg>

- Waqas Ibrahim

---

要改变动画的方向，需要改变曲线点的指定方向。目前，您移动到3点钟并向12点钟绘制曲线。如果我们使用我们选择的SVG编辑器反转路径，而不是路径命令：M95,60c0-24.873-20.127-45-45-45，我们最终得到这些命令：m 50,15 c 24.873,0 45,20.127 45,45。然后，如果我们从9点钟到3点钟绘制一个逆时针1/2圆，我们会得到类似以下的东西：M 4.6428572,100.21932 C 4.6428572,80.243545 26.088068,60.94722 50,60.576463 79.088033,60.805598 95.357143,81.911631 95.357143,100.21932。 - enhzflep

@enhzflep 谢谢你，我用illustrator从12点到3点画了一条弧线，结果是这个：<path fill="none" d="M50,15c24.873,0,45,19.009,45,42.5" />能否请您解释一下曲线数据，每个值代表什么意思？谢谢。 - Waqas Ibrahim

放心吧，伙计。当然，你可以在文档中看到SVG格式的所有语法：https://www.w3.org/TR/SVG2/paths.html#PathDataCubicBezierCommands（它们解释得比我能希望的更好）。 - enhzflep

@enhzflep 再次感谢 :-) 此外，我从Illustrator得到的值有点偏差，我使用了你的值，现在看起来完美。 - Waqas Ibrahim

Answer 1

第二条路径以逆时针的方式开始，因为起点被定义在终点的右侧。如果你只需要圆弧，为什么要使用复杂的三次贝塞尔曲线呢？你可以使用椭圆曲线，它们非常简单易用。将你定义的两条路径改为这两个路径定义，你就能达到你想要的效果：

<path fill="none" d="M5,60 A50,50 0 0,1 55,10" />
<path fill="none" d="M55,10 A50,50 0 0,1 105,60"/>

M 旁边的坐标是您的起点。 A 旁边的值分别表示您的椭圆曲线的水平和垂直半径（如果要绘制圆形曲线，则两者将相同）。之后的0表示您要旋转椭圆的角度。然后，您需要提供由逗号分隔的两个标志。第一个标志表示您想要在起点和终点之间采取最短路径（0）还是最长路径（1）。第二个标志表示您想要在起点和终点之间采取逆时针路径（0）还是顺时针路径（1）（您可以更改两个标志以查看更改效果）。最后一个坐标是终点坐标，第一条路径的终点为55,10，第二条路径的终点为105,60。

- Rahul Das