尝试支持动画时 SVG 文本上下颠倒答案

【问题标题】：SVG text upside down when trying to support animation尝试支持动画时 SVG 文本上下颠倒
【发布时间】：2019-08-27 18:25:32
【问题描述】：

我无法正确调整文本方向。我按照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>

【问题讨论】：

我认为你的路径#link1 和#link2 可能有错字：#link1:M 280 120 300 120 C 702 120, 780 120, 780 120 S 858 120, 1300 120 就好像你在路径的开头有两个M 命令。跨度>
在 Firefox 上你可以设置 side="right"。不确定其他浏览器是否支持。
@enxaneta，你对这两个 M 命令是正确的。我现在已经删除了它们。谢谢一百万！

标签： javascript html svg

【解决方案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>

【讨论】：

这太棒了。我喜欢你是怎么做到的。谢谢 enxaneta！
如何创建反向路径？
@bytrangle 我用过这个：codepen.io/enxaneta/pen/WWPYqQ 虽然不是一个很好的工具。有时有效，有时无效