¿Cómo dibujar mientras se desplaza?

Dibujo en desplazamiento

Dibuje triángulos con SVG y JavaScript mientras se desplaza - tenga en cuenta que debe ser <path> Elemento:}}

Ejemplo

<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z"/>
</svg>
<script>
// Obtener el elemento <path> con ID "triangle"
var triangle = document.getElementById("triangle");
// Obtener la longitud del elemento <path>
var length = triangle.getTotalLength();
// Posición de inicio del dibujo (establecer el modo de línea discontinua. Aquí se establece un valor igual a la longitud del camino, lo que hace que toda la longitud del camino sea considerada como una "línea discontinua grande".).
triangle.style.strokeDasharray = length;
/* Establecer el desplazamiento de la línea discontinua. Inicialmente se establece como la longitud del camino, lo que hace que toda la longitud del camino se desplace fuera de la vista, ocultando el triángulo.
Con el desplazamiento, esta cantidad de desplazamiento se reducirá gradualmente, mostrando gradualmente el triángulo.
Eliminar esta línea de código puede mostrar el triángulo antes de dibujar el desplazamiento.
triangle.style.strokeDashoffset = length;
// Escuchar el evento de desplazamiento de la ventana y llamar a la función myFunction cuando se desplace.
window.addEventListener("scroll", myFunction);
function myFunction() {
  // Calcular el porcentaje de desplazamiento = (altura de desplazamiento actual) / (altura total desplazable)
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  // Calcular la longitud que debe dibujarse = longitud total * porcentaje de desplazamiento
  var draw = length * scrollpercent;
  // Al scroll hacia arriba, se dibuja en sentido inverso (desde completo a incompleto), por lo que aquí se restan la longitud total y la longitud que debe dibujarse.
  triangle.style.strokeDashoffset = length - draw;
}
</script>

Pruebe usted mismo

Páginas relacionadas

Tutoriales:Tutoriales de SVG