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>
html, body, svg { height: 100%; } text { font: 25px Arial, Helvelica, sans-serif; }
<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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
side | Chrome No support No | Edge No support No | Firefox Full support 61 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 61 | Opera Android No support No | Safari iOS No support No | Samsung 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.