我无法使文本方向正确。我按照SVG TextPath Text shows upside-down上的建议进行了尝试，但是它使动画从相反的一侧开始。我需要动画从初始节点开始。
我正在使用stroke-dashoffset和stroke-dasharray制作动画。 在下面的代码中，我显示了可能的各种线条，并且方向用箭头显示。
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes dash {
to { stroke-dashoffset: 0; }
}
path {
animation: dash 2s linear forwards;
stroke-dasharray: 1500;
stroke-dashoffset: 1500;
}
</style>
</head>
<body>
<svg width="1580" height="390" viewbox="0 0 1580 790" preserveaspectratio="none">
<g>
<g transform="translate(0,80)">
<g>
<path d="M 280 120 300 120 C 702 120, 780 120, 780 120 S 858 120, 1300 120" id="link1" stroke-width="20" fill="none" stroke="#bcb8b8"></path>
<text>
<textpath xlink:href="#link1" startoffset="10">
<tspan dy="5" dx="0">
Some Text ->
</tspan>
</textpath>
</text>
</g>
<g>
<path d="M 1300 170 858 170 C 780 170, 780 170, 702 170 S 300 170, 280 170" id="link2" stroke-width="20" fill="none" stroke="#bcb8b8"></path>
<text>
<textpath xlink:href="#link2" startoffset="10">
<tspan dy="5" dx="0">
<- Some Text
</tspan>
</textpath>
</text>
</g>
<g>
<path d="M 440,330 C 748,330 748,460 440,460" id="link3" stroke-width="20" fill="none" stroke="#bcb8b8"></path>
<text>
<textPath xlink:href="#link3" startOffset="10">
<tspan dy="5" dx="0">
Some Text ->
</tspan>
</textPath>
</text>
</g>
<g>
<path d="M 740,460 C 1048,460 1048,330 740,330" id="link4" stroke-width="20" fill="none" stroke="#bcb8b8"></path>
<text>
<textPath xlink:href="#link4" startOffset="10">
<tspan dy="5" dx="0">
Some Text ->
</tspan>
</textPath>
</text>
</g>
<g>
<path d="M 640,660 C 340,660 340,530 640,530" id="link5" stroke-width="20" fill="none" stroke="#bcb8b8"></path>
<text>
<textpath xlink:href="#link5" startoffset="10">
<tspan dy="5" dx="0">
Some Text ->
</tspan>
</textpath>
</text>
</g>
<g>
<path d="M 950,530 C 650,530 650,660 950,660" id="link6" stroke-width="20" fill="none" stroke="#bcb8b8"></path>
<text>
<textpath xlink:href="#link6" startoffset="10">
<tspan dy="5" dx="0">
Some Text ->
</tspan>
</textpath>
</text>
</g>
</g>
</svg>
</body>
</html>
答案 0 :(得分：1)
我的解决方案是使用文本的反向路径。我已将反向路径放入<defs>中。我使用的是金色笔触，而我使用的是反向路径。我希望这就是您所需要的。
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
path {
animation: dash 2s linear forwards;
stroke-dasharray: 1500;
stroke-dashoffset: 1500;
}
svg{border:1px solid}<svg viewbox="0 0 1580 790">
<defs>
<path d="M280,170C300,170 624,170 702,170C780,170 780,170 1300,170" id="reversed2" ></path>
<path d="M640,530C340,530 340,660 640,660" id="reversed5" />
<path d="M950,660C650,660 650,530 950,530" id="reversed6" />
</defs>
<g>
<g transform="translate(0,80)">
<g>
<path d="M 280 120 300 120 C 702 120, 780 120, 780 120 S 858 120, 1300 120" id="link1" stroke-width="20" fill="none" stroke="#bcb8b8"></path>
<text>
<textpath xlink:href="#link1" startoffset="10">
<tspan dy="5" dx="0">
Some Text ->
</tspan>
</textpath>
</text>
</g>
<g>
<path d="M 1300 170 C 780 170, 780 170, 702 170 S 300 170, 280 170" id="link2" stroke-width="20" fill="none" stroke="gold"></path>
<text>
<textpath xlink:href="#reversed2" startoffset="100%" text-anchor="end">
<tspan dy="5" dx="0">
<- Some Text
</tspan>
</textpath>
</text>
</g>
<g>
<path d="M 440,330 C 748,330 748,460 440,460" id="link3" stroke-width="20" fill="none" stroke="#bcb8b8"></path>
<text>
<textPath xlink:href="#link3" startOffset="10">
<tspan dy="5" dx="0">
Some Text ->
</tspan>
</textPath>
</text>
</g>
<g>
<path d="M 740,460 C 1048,460 1048,330 740,330" id="link4" stroke-width="20" fill="none" stroke="#bcb8b8"></path>
<text>
<textPath xlink:href="#link4" startOffset="10">
<tspan dy="5" dx="0">
Some Text ->
</tspan>
</textPath>
</text>
</g>
<g>
<path d="M 640,660 C 340,660 340,530 640,530" id="link5" stroke-width="20" fill="none" stroke="gold"></path>
<text>
<textpath xlink:href="#reversed5" startoffset="100%" text-anchor="end">
<tspan dy="5" dx="0">
Some Text ->
</tspan>
</textpath>
</text>
</g>
<g>
<path d="M 950,530 C 650,530 650,660 950,660" id="link6" stroke-width="20" fill="none" stroke="gold"></path>
<text>
<textpath xlink:href="#reversed6" startoffset="100%" text-anchor="end">
<tspan dy="5" dx="0">
Some Text ->
</tspan>
</textpath>
</text>
</g>
</g>
</svg>