Invert textPath letter from up to down along a path without redraw? - svg

Question

I want to reverse the word compared to the line without having to redraw the line, how to do?
/Ps: when I use transform="scale(-1,1)" it doesn't work because the line path is inverted.

Answer 1

You could use <textPath side="..."> for that. However, it's only supported by Firefox right now.
<svg viewBox="0 0 100 55" xmlns="http://www.w3.org/2000/svg">
<path id="curve" fill="none" stroke="limegreen" stroke-width="1" d="M10,5 c20,60 50,50 80,10"></path>
<text font-size="5" dy="-1">
<textPath href="#curve" startOffset="6" side="left">Dangerous curves ahead</textPath>
</text>
<text font-size="5" dy="-1">
<textPath href="#curve" startOffset="9" side="right">Dangerous curves ahead</textPath>
</text>
</svg>

Answer 2

If this is what you have:
body{background:white;}
<svg width="250" height="200" viewBox="0 0 250 200">
<defs>
<path id="thePath" d="M55,100 a70,40 0 1 0 0,-1 z" stroke="#FF0000" fill="transparent" stroke-width="1" ></path>
</defs>
<use xlink:href="#thePath"></use>
<text stroke="#000000" font-size="20">
<textPath xlink:href="#thePath" startOffset="7%">
Some text here
</textPath>
</text>
</svg>
You can apply a transformation transform="scale(-1,1) translate(-250,0)" to the path like so:
body{background:white;}
<svg width="250" height="200" viewBox="0 0 250 200">
<defs>
<path id="thePath" d="M55,100 a70,40 0 1 0 0,-1 z" stroke="#FF0000" fill="transparent" stroke-width="1" transform="scale(-1,1) translate(-250,0)"></path>
</defs>
<use xlink:href="#thePath"></use>
<text stroke="#000000" font-size="20">
<textPath xlink:href="#thePath" startOffset="7%">
Some text here
</textPath>
</text>
</svg>
I hope this is what you need