Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SVG TextPath Text shows upside-down

Tags:

javascript

svg

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

enter image description here

<?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>
like image 439
PH. Avatar asked Feb 21 '19 02:02

PH.


1 Answers

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>
like image 71
Michael Mullany Avatar answered Nov 15 '22 04:11

Michael Mullany