SVG text-anchor Attribute
The text-anchor attribute is used to align a text which is auto-wrapped or pre-formatted. The wrapping area is decided from the inline-size property with respect to a given point. In case of multiple line text, the alignment is made for each line. It has effect only on the following elements <altGlyph>, <text>, <textPath>, <tref>, and <tspan>
Syntax:
text-anchor = start | middle | end
Attribute Values: The text-anchor attribute accepts the values mentioned above and described below:
- start: With this attribute value, characters are aligned such that the start of the text string is at the initial current text position.
- middle: With this attribute value, characters are aligned such that the middle of the text string is at the current text position.
- end: With this attribute value, characters are shifted such that the end of the resulting rendered text is at the initial current text position.
Example 1: Below examples illustrates the use of text-anchor attribute.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
text {
font: 20px sans-serif;
}
</ style >
</ head >
< body >
< svg viewBox = "0 0 420 420"
< path d="M60 15 L60, 50 M30, 40
L90, 40" stroke = "green" />
< text text-anchor = "start" x = "60"
y = "40" stroke = "green" >
GeeksforGeeks
</ text >
< circle cx = "60" cy = "40" r = "3"
fill = "green" />
</ svg >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!DOCTYPE html>
< html >
< head >
< style >
text {
font: 20px sans-serif;
}
</ style >
</ head >
< body >
< svg viewBox = "0 0 420 420"
< path d="M60 15 L60, 50 M30,
40 L90, 40" stroke = "green" />
< text text-anchor = "middle" x = "60"
y = "40" stroke = "green" >
GeeksforGeeks
</ text >
< circle cx = "60" cy = "40" r = "3" fill = "green" />
</ svg >
</ body >
</ html >
|
Output:
Example 3:
HTML
<!DOCTYPE html>
< html >
< head >
< style >
text {
font: 20px sans-serif;
}
</ style >
</ head >
< body >
< svg viewBox = "0 0 420 420"
< path d="M60 15 L60, 50 M30,
40 L90, 40" stroke = "green" />
< text text-anchor = "end" x = "60"
y = "40" stroke = "green" >
GeeksforGeeks
</ text >
< circle cx = "60" cy = "40" r = "3" fill = "green" />
</ svg >
</ body >
</ html >
|
Output:
Last Updated :
31 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...