side
SVG Elements
- A
- B-C
- D
- E
- F
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feDistantLight>
<feFlood>
<feFuncA>
<feFuncB>
<feFuncG>
<feFuncR>
<feGaussianBlur>
<feImage>
<feMerge>
<feMergeNode>
<feMorphology>
<feOffset>
<fePointLight>
<feSpecularLighting>
<feSpotLight>
<feTile>
<feTurbulence>
<filter>
<font>
<font-face>
<font-face-format>
<font-face-name>
<font-face-src>
<font-face-uri>
<foreignObject>
- G
- H
- I
- J-L
- M
- N-P
- Q-R
- S
- T
- U
- V-Z
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
<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
BCD tables only load in the browser