W3cubDocs

side

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

You can use this attribute with the following SVG elements:

<textPath>

Example

<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
Scalable Vector Graphics (SVG) 2 # TextPathElementSideAttribute

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`side`	No	No	61	No	No	No	No	No	61	No	No	No

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/side