side

The side attribute determines the side of a path the text is placed on (relative to the path direction).

Only one element is using this attribute: <textPath>

<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <text>
    <textPath href="#circle1" side="left">Text left from the path</textPath>
  </text>
  <text>
    <textPath href="#circle2" side="right">Text right from the path</textPath>
  </text>

  <circle id="circle1" cx="100" cy="100" r="70" fill="transparent" stroke="silver"/>
  <circle id="circle2" cx="320" cy="100" r="70" fill="transparent" stroke="silver"/>
</svg>

Usage notes

Value left | right
Default value left
Animatable Yes
left
This value places the text on the left side of the path (relative to the path direction).
right
This value places the text on the right side of the path (relative to the path direction). This effectively reverses the path direction.

Specifications

Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of 'side' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
side
Experimental
Chrome No support NoEdge No support NoFirefox Full support 61IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 61Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.