Tengo un SVG que parece una pista de carreras codificada en forma de elemento <path> . Lo que quiero es animar otro path con un color diferente que comienza desde un extremo de la pista de carreras y se llena hasta el otro extremo (animación).
Aquí está el SVG para la pista de carreras:
<svg viewBox="0 0 1307 772" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M305 19C385.381 71.1047 436 74 538.5 81.5C641 89 716.5 104 755.5 103C794.5 102 1029 81.5 1029 81.5C1052.73 83.3972 1068.89 91.3809 1102.5 117.5C1121.72 137.652 1127.34 151.094 1131.5 177.5C1130.72 202.494 1140.5 224 1129.5 241.5C1118.5 259 1064.62 273.928 1029 274L931.5 298H855.5H798.5L666 317H487L384 298H272.5L74.5 341.5L42 379.5L35 387.685L23.5 416.5L35 447L74.5 469L229 488L451.5 515H487H704L788 526L988.5 542.5L1156.5 558.5L1235 599C1295.85 629.595 1299.04 647.455 1254 680.5L1129.5 745.5" stroke="#403737" stroke-width="36" stroke-linecap="round"/> </svg>La pista de carreras tendría algún tipo de puntos de control y desde javascript quiero animar el color de relleno para llegar solo a ese punto de control.
Cómo puedo conseguir esto ? Gracias por tu ayuda :)
Dele el poder a HTML, cree su propio componente web JavaScript estándar <svg-track>
<svg-track length="50"> <path stroke="green" stroke-width="30" d="M20 20H200"/> </svg-track> <svg-track dur="2" length="70" viewBox="0 0 400 100"> <path stroke="blue" stroke-width="36" stroke-linecap="round" d="M20 30l40 30l40 -30l40 30h200"/> </svg-track> <svg-track dur="3" length="100" viewBox="0 0 800 60"> <path stroke="red" stroke-width="60" stroke-linecap="round" d="M800 30h-800"/> </svg-track> <script> customElements.define("svg-track", class extends HTMLElement { connectedCallback() { setTimeout(() => { // make sure innerHTML is parsed let attr = name => this.getAttribute(name); this.innerHTML = `<svg style="background:lightgrey;height:60px;max-width:100vw" viewBox="${attr("viewBox")||"0 0 200 40"}" fill="none"> ${this.innerHTML}</svg>`; let path = this.querySelector("path"); path.setAttribute("pathLength", 100); path.setAttribute("stroke-dasharray", 100); path.innerHTML =`<animate dur="${attr("dur")||1}s" to="${100-attr("length")}" attributeName="stroke-dashoffset" from="100" fill="freeze" repeatCount="1" begin="0s"/>`; }) } }) </script>svga
Aquí copié la ruta, establecí un pathLength en la ruta y animé el trazo-dasharray de 0 100 a 100 100 .
#p1 { stroke-dasharray: 0 100; animation: stroke 5s linear forwards; } @keyframes stroke { 100% { stroke-dasharray: 100 100; } } <svg viewBox="0 0 1307 772" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M305 19C385.381 71.1047 436 74 538.5 81.5C641 89 716.5 104 755.5 103C794.5 102 1029 81.5 1029 81.5C1052.73 83.3972 1068.89 91.3809 1102.5 117.5C1121.72 137.652 1127.34 151.094 1131.5 177.5C1130.72 202.494 1140.5 224 1129.5 241.5C1118.5 259 1064.62 273.928 1029 274L931.5 298H855.5H798.5L666 317H487L384 298H272.5L74.5 341.5L42 379.5L35 387.685L23.5 416.5L35 447L74.5 469L229 488L451.5 515H487H704L788 526L988.5 542.5L1156.5 558.5L1235 599C1295.85 629.595 1299.04 647.455 1254 680.5L1129.5 745.5" stroke="#403737" stroke-width="36" stroke-linecap="round"/> <path id="p1" d="M305 19C385.381 71.1047 436 74 538.5 81.5C641 89 716.5 104 755.5 103C794.5 102 1029 81.5 1029 81.5C1052.73 83.3972 1068.89 91.3809 1102.5 117.5C1121.72 137.652 1127.34 151.094 1131.5 177.5C1130.72 202.494 1140.5 224 1129.5 241.5C1118.5 259 1064.62 273.928 1029 274L931.5 298H855.5H798.5L666 317H487L384 298H272.5L74.5 341.5L42 379.5L35 387.685L23.5 416.5L35 447L74.5 469L229 488L451.5 515H487H704L788 526L988.5 542.5L1156.5 558.5L1235 599C1295.85 629.595 1299.04 647.455 1254 680.5L1129.5 745.5" pathLength="100" stroke="red" stroke-width="14" stroke-linecap="round" /> </svg>