La propiedad SVG TextPathElement.startOffset devuelve un objeto SVGAnimatedLength correspondiente al atributo del elemento de ruta de texto dado.
Sintaxis:
TextPathElement.startOffset
Valor devuelto: esta propiedad devuelve el objeto SVGAnimatedLength que se puede usar para obtener el startOffset del elemento TextPath.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 200 500"
xmlns="http://www.w3.org/2000/svg">
<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>
Producción:
- Salida de la consola:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 200 500"
xmlns="http://www.w3.org/2000/svg">
<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>
Producción:
- Salida de la consola:
