SVG TextPathElement.startOffset Property
The SVG TextPathElement.startOffset property returns an SVGAnimatedLength object corresponding to the attribute of the given textpath element.
Syntax:
TextPathElement.startOffset
Return value: This property returns SVGAnimatedLength object that can be used to get the startOffset of the TextPath element.
Example 1:
HTML
<!DOCTYPE html> <html> <body> <svg viewBox="0 0 200 500" <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" id="gfg" startoffset="10" > The Geeky Text Along The Path </textPath> </text> <script type="text/javascript"> var gfg = document.getElementById('gfg'); console.log(gfg.startOffset); </script> </svg> </body> </html> |
Output:
- Console Output:
Example 2:
HTML
<!DOCTYPE html> <html> <body> <svg viewBox="0 0 200 500" <path id="Geek" fill="red" 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" id="gfg" startoffset="10" > gfg a computer science platform </textPath> </text> <script type="text/javascript"> var gfg = document.getElementById('gfg'); console.log(gfg.startOffset); </script> </svg> </body> </html> |
Output:
- Console Output:
Please Login to comment...