SVG TextPathElement.startOffset Property
Last Updated :
30 Mar, 2022
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...