Open In App

SVG text-anchor Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

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" 
        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>


Output:

Example 2:

HTML




<!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>


Output:

Example 3:

HTML




<!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>


Output:



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads