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:
Example
html
<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
BCD tables only load in the browser