1 <svg xmlns=
"http://www.w3.org/2000/svg">
3 <path id=
"path1" d=
"M100 100 h 300"/>
4 <!-- path2 is drawn in the same place but the opposite direction to path1
5 so using it should give the same result as side="right" -->
6 <path id=
"path2" d=
"M400 100 h -300"/>
9 <rect fill=
"lime" width=
"100%" height=
"100%"/>
11 <text font-size=
"30" fill=
"red">
12 <textPath side=
"right" href=
"#path1">Text on a path.
</textPath>
15 <text font-size=
"30" fill=
"lime" stroke=
"lime" stroke-width=
"4">
16 <textPath href=
"#path2">Text on a path.
</textPath>
19 <text transform=
"translate(0, 50)" font-size=
"30" fill=
"red">
20 <textPath href=
"#path2">Text on a path.
</textPath>
23 <text transform=
"translate(0, 50)" font-size=
"30" fill=
"lime" stroke=
"lime" stroke-width=
"4">
24 <textPath side=
"right" href=
"#path1">Text on a path.
</textPath>
27 <text transform=
"translate(0, 100)" font-size=
"30" fill=
"red">
28 <textPath href=
"#path2">Text on a path.
</textPath>
31 <text transform=
"translate(0, 100)" font-size=
"30" fill=
"lime" stroke=
"lime" stroke-width=
"4">
32 <textPath href=
"#path1">Text on a path.
33 <set attributeName=
"side" to=
"right"/>
37 <text transform=
"translate(0, 150)" font-size=
"30" fill=
"red">
38 <textPath href=
"#path1">Text on a path.
</textPath>
41 <text transform=
"translate(0, 150)" font-size=
"30" fill=
"lime" stroke=
"lime" stroke-width=
"4">
42 <textPath side=
"left" href=
"#path1">Text on a path.
</textPath>