SVG TextPath文本显示颠倒

Question

Below is the SVG Code that shows the text on the path upside down. Please help show how to display it correctly upside.

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

Because you're drawing the curve from bottom to top, the text is following the orientation of the drawing curve and is "upside down".

If you want the text the other way, then you need to draw the curve from top to bottom so the direction of the drawing matches the orientation of the text you want.

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