Skip to content
Related Articles

Related Articles

SVG text-anchor Attribute
  • Last Updated : 05 Nov, 2020

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        text {
            font: 20px sans-serif;
        }
    </style>
</head>
  
<body>
    <svg viewBox="0 0 420 420" 
        xmlns="http://www.w3.org/2000/svg">
          
        <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>

chevron_right


Output:

Example 2:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        text {
            font: 20px sans-serif;
        }
    </style>
</head>
  
<body>
    <svg viewBox="0 0 420 420" 
        xmlns="http://www.w3.org/2000/svg">
          
        <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>

chevron_right


Output:

Example 3:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        text {
            font: 20px sans-serif;
        }
    </style>
</head>
  
<body>
    <svg viewBox="0 0 420 420" 
        xmlns="http://www.w3.org/2000/svg">
          
        <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>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :