El atributo startOffset decide el inicio de la ruta para la posición inicial del texto. Esto se hace después de convertir la ruta al sistema de coordenadas del elemento <textPath> . Solo el elemento <textPath> está usando este atributo.
Sintaxis:
startOffset = length-percentage | number
Valores de atributo: el atributo startOffset acepta los valores mencionados anteriormente y descritos a continuación:
- length-percentage: Enumera el porcentaje de longitud a lo largo de toda la ruta del elemento <textPath>.
- número: Es un valor numérico que se refiere a las unidades del sistema de coordenadas actual.
Los siguientes ejemplos ilustran el uso del atributo startOffset .
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <svg viewBox="10 0 420 200" xmlns="http://www.w3.org/2000/svg"> <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>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <svg viewBox="130 0 420 200" xmlns="http://www.w3.org/2000/svg"> <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>
Producción:
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA