A través del evento mouseenter , estoy aplicando la siguiente función JS a un svg path element :
const fadeIn = (event, locale) => { event.target.style.fill = 'hwb(' + (120 - score[locale] * 1.2) + ' 0% 0% / 1)' } Esto funciona junto con una transition de CSS:
transition: fill .25s; El problema es que el stroke se superpone entre las svg paths , y la única forma de llevar el trazo del elemento flotante al frente sobre todos los demás es agregando a la función JS:
event.target.parentElement.appendChild(event.target) Lamentablemente, esto no funciona correctamente con la transition . Aplicar una clase en su lugar no es una opción porque necesito parámetros de score y locale dentro de la propiedad de estilo de color hwb() .
¿Hay algo que pueda hacer para garantizar que el elemento esté al frente Y que la transición funcione?
Una forma sería interpolar el color usted mismo usando Javascript.
Un enfoque más simple podría ser crear una clase para cada puntuación posible. Parece que sus puntajes están entre 0 y 100. Por lo tanto, solo necesitaría definir 101 clases. P.ej. algo como:
let scoreElem = document.getElementById("score") scoreElem.addEventListener("input", updateFill); function updateFill() { document.getElementById("rect").setAttribute("class", 'score-' + scoreElem.value); } // Initialise fill at startup updateFill(); rect { transition: fill 1s; } /* Sticking to steps of 10 for this demo */ .score-0 { fill: hwb(120 0% 0%); } .score-10 { fill: hwb(108 0% 0%); } .score-20 { fill: hwb(96 0% 0%); } .score-30 { fill: hwb(84 0% 0%); } .score-40 { fill: hwb(72 0% 0%); } .score-50 { fill: hwb(60 0% 0%); } .score-60 { fill: hwb(48 0% 0%); } .score-70 { fill: hwb(36 0% 0%); } .score-80 { fill: hwb(24 0% 0%); } .score-90 { fill: hwb(12 0% 0%); } .score-100 { fill: hwb(0 0% 0%); } <svg> <rect id="rect" width="100%" height="100%"/> </svg> <br> <input type="range" id="score" name="score" min="0" max="100" value="0" step="10">