SVG startoffset Attribute
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:
Please Login to comment...