SVG startoffset Attribute
Last Updated :
31 Mar, 2022
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:
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"
<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"
<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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...