SVG TextPath 文本显示颠倒答案

【问题标题】：SVG TextPath Text shows upside-downSVG TextPath 文本显示颠倒
【发布时间】：2019-02-21 13:30:49
【问题描述】：

下面是 SVG 代码，它显示了路径上的文本倒置。请帮助说明如何正确显示它。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<g>
    <path id="link1" d="M 500,140 C 200,140 200,190 500,190" stroke-width="20" fill="transparent" stroke="red"></path>
    <text class="text_path">
        <textPath xlink:href="#link1" startOffset="10">
            <tspan dy="5">Some Text</tspan><tspan class="dir_arrow">→</tspan>
        </textPath>
    </text>
</g>
</svg>

【问题讨论】：

Upside-down text in SVG textpath的可能重复
文本是否打算出现在同一个地方，即曲线的顶部？如果是这样，那么文本不是颠倒的，而是旋转了 180°。在像 Inkscape 这样的免费程序中编辑图像可以消除这些问题的大部分猜测。 ;)
这是我用 JS 渲染的。副本与其他问题有关。有什么办法可以旋转文本？

标签： javascript svg

【解决方案1】：

因为您是从下到上绘制曲线，所以文本遵循绘制曲线的方向并且是“倒置”的。

如果你想要文本的另一个方向，那么你需要从上到下绘制曲线，使绘制的方向与你想要的文本方向相匹配。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px" height="600px">
    <g>
        <path id="link1" d="M 500,190 C  200,190 200,140 500,140" stroke-width="20" fill="transparent" stroke="red"></path>
        <text class="text_path">
            <textPath xlink:href="#link1" startOffset="370">
                <tspan dy="5" class="dir_arrow">←</tspan><tspan>Some Text</tspan>
            </textPath>
        </text>
    </g>
    </svg>

【讨论】：

如果我在矢量软件中制作路径，如何确保从上到下绘制？
取决于软件包。如果只有一种方法可以绘制弧线，并且内置的默认设置是从下到上，那么您需要使用“垂直翻转”功能（或包中的等效功能）来使曲线正确向上.