Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

SVG startoffset Attribute

  • Last Updated : 18 Nov, 2020

The startOffset attribute decides the start of the path for the initial text position. This is done after converting the path to the <textPath> element’s coordinate system. Only <textPath> element is using this attribute.

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

startOffset = length-percentage | number

Attribute Values: The startOffset attribute accepts the values mentioned above and described below:

  • length-percentage: It enumerates the percentage length along the entire path of the <textPath> element.
  • number: It is a numeric value referring to the units of the current coordinate system.

Below examples illustrate the use of startOffset attribute.



Example 1:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <svg viewBox="10 0 420 200" 
        xmlns="http://www.w3.org/2000/svg">
  
        <path id="geek1" fill="green" 
            stroke="black" 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="#geek1" startOffset="0">
                It is a Computer Science portal.
            </textPath>
        </text>
    </svg>
</body>
  
</html>

Output:

Example 2:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <svg viewBox="130 0 420 200" 
        xmlns="http://www.w3.org/2000/svg">
          
        <path id="geek2" fill="green" 
            stroke="black" d="M130, 90 Q210,
            90 210, 45 Q210, 10 170, 10 Q130,
            10 130, 40 Q130, 70 165, 70 Q190,
            70 195, 50" />
  
        <text>
            <textPath href="#geek2" startOffset="50">
                It is a Computer Science portal.
            </textPath>
        </text>
    </svg>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!