El atributo pathLength define la longitud total de la ruta, en unidades de usuario. Los elementos que utilizan este atributo son: <circle>, <elipse>, <line>, <path>, <polygon>, <polyline>, and <rect>
Sintaxis:
pathLength = number
Valores de atributo: el atributo pathLength acepta los valores mencionados anteriormente y descritos a continuación
- número: Es un número con un componente fraccionario o un número entero.
Los siguientes ejemplos ilustran el uso del atributo pathLength .
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
path {
stroke: green;
stroke-width: 5;
stroke-dasharray: 12;
}
</style>
</head>
<body>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<svg viewBox=" 0 0 400 60"
xmlns="http://www.w3.org/2000/svg">
<path d="M 0,10 h100" />
<path d="M 0,20 h100" pathLength="80" />
</svg>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
path {
stroke: green;
stroke-width: 5;
stroke-dasharray: 12;
}
</style>
</head>
<body>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<svg viewBox="0 20 400 60"
xmlns="http://www.w3.org/2000/svg">
<path d="M 0,30 h100" pathLength="60" />
<path d="M 0,40 h100" pathLength="30" />
<path d="M 0,50 h100" pathLength="10" />
</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