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.
Update compatibility data on GitHub
| 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.