SVG TextPath Текст отображается в обратном порядке

Question

Ниже приведен код 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>

Answer 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>