Skip to content
Related Articles

Related Articles

Improve Article
SVG <textPath> element
  • Last Updated : 01 Oct, 2020

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.

The <textPath> SVG element is used to render the text along with a certain path.

To render text along with a certain path, enclose the text in an <textPath> element that has a href attribute with a reference to the <path> element.

Syntax:

<textPath href="path" >
    Your Text Here
</textPath>

Attribute:



  • href: The URL to the path or basic shape on which to render the text.
  • lengthAdjust: Where length adjustment should be applied to the text.
  • method: Which method to render individual glyphs along the path.
  • path: The path on which the text should be rendered.
  • side: Which side of the path the text should be rendered.
  • spacing: How the space between glyphs should be handled.
  • startOffSet: How far the beginning of the text should be offset from the beginning of the path.
  • textLength: The width of the space into which the text will render.
  • Global Attributes: some global attributes used like core attributes and styling attributes, etc.

Example:




<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 100 100"
         xmlns="http://www.w3.org/2000/svg">
        <path id="Geek" fill="yellow" stroke="green"
            d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,
               10 10,40 Q10,70 45,70 Q70,70 75,50" />
  
        <text>
            <textPath href="#Geek">
                The Geeky Text Along The Path
            </textPath>
        </text>
    </svg>
</body>
  
</html>

Output:

Browsers Supported: The following browsers are supported by this SVG element:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Apple Safari
  • Opera
My Personal Notes arrow_drop_up
Recommended Articles
Page :