如何沿svg路径设置svg对象组的动画

我需要沿一条路径设置字母表的动画，以便它在动画中时弧形以适合路径

我曾尝试使用带有animateMotion标记的弧形路径，希望它能将字母组弯曲到其中，但相反，它沿着路径，同时保持字母组在一条直线上

我有没有办法达到这个效果

编辑以包含必需的cody代码段（更容易从codepen获取完整的svg）：

---

您需要使用相同的动画和使用begin属性声明的延迟来设置每个字母的动画。在下一个示例中，我仅对字母A、B和C设置动画

如果动画使用相同的路径，则可以使用

元素指向要使用的路径，并将原始路径保存在defs中

.st0{
填充：无；
行程：#000000；
笔画宽度：2；
行程限制：10；
}
.st1{
填充：无；
行程：#000000；
笔画宽度：2；
行程限制：10；
行程数组：11.9626，11.9626；
}
.st2{
填充：无；
行程：#000000；
笔画宽度：2；
行程限制：10；
行程数组：11.9189，11.9189；
}
.st3{
填充：无；
行程：#000000；
笔画宽度：2；
行程限制：10；
行程数组：6.0125，6.0125；
}

您需要使用相同的动画和使用begin属性声明的延迟来设置每个字母的动画。在下一个示例中，我仅对字母A、B和C设置动画

如果动画使用相同的路径，则可以使用

元素指向要使用的路径，并将原始路径保存在defs中

.st0{
填充：无；
行程：#000000；
笔画宽度：2；
行程限制：10；
}
.st1{
填充：无；
行程：#000000；
笔画宽度：2；
行程限制：10；
行程数组：11.9626，11.9626；
}
.st2{
填充：无；
行程：#000000；
笔画宽度：2；
行程限制：10；
行程数组：11.9189，11.9189；
}
.st3{
填充：无；
行程：#000000；
笔画宽度：2；
行程限制：10；
行程数组：6.0125，6.0125；
}

对于解决方案，可以使用SVG：

这将大大减少代码，因为只有一条路径和相同的动画用于沿此路径移动字母

• 字母表中的每个字母都用标签包装-

  A

• 字母之间的间距可以使用

  dx

  参数进行调整 或者使用

  字母间距=“0.18em”

  
  我选择了

  字母间距

  ，因为Firefox和Chrome使用

  dx

  和

  dy

  进行不同的间距调整
• 因为最初字母表中的所有字母都不适合 交通路线，必须加长：

下面是完整的代码，单击后将开始字母移动的动画：

.container{
宽度：100vw；
高度：100vh；
}
.st0{
填充：无；
行程：#000000；
笔画宽度：3；
行程限制：10；
}
.st1{
填充：无；
行程：#000000；
笔画宽度：2；
行程限制：10；
行程数组：11.9626，11.9626；
}
.st2{
填充：无；
行程：#000000；
笔画宽度：2；
行程限制：10；
行程数组：11.9189，11.9189；
}
#st3{
填充：无；
冲程：#5656；
笔画宽度：2；
行程限制：10；
行程数组：6.0125，6.0125；
}

A.
B
C
D
E
F
G
H
我
J
K
L
M
N
O
P
Q
R
s
T
U
v
W
X
Y
Z

对于解决方案，可以使用SVG：

这将大大减少代码，因为只有一条路径和相同的动画用于沿此路径移动字母

• 字母表中的每个字母都用标签包装-

  A

• 字母之间的间距可以使用

  dx

  参数进行调整 或者使用

  字母间距=“0.18em”

  
  我选择了

  字母间距

  ，因为Firefox和Chrome使用

  dx

  和

  dy

  进行不同的间距调整
• 因为最初字母表中的所有字母都不适合 交通路线，必须加长：

下面是完整的代码，单击后将开始字母移动的动画：

.container{
宽度：100vw；
高度：100vh；
}
.st0{
填充：无；
行程：#000000；
笔画宽度：3；
行程限制：10；
}
.st1{
填充：无；
行程：#000000；
笔画宽度：2；
行程限制：10；
行程数组：11.9626，11.9626；
}
.st2{
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1359px"
 height="396px" viewBox="0 0 1359 396" style="overflow:visible;enable-background:new 0 0 1359 396;" xml:space="preserve">