Via mouseenter event I'm applying following JS function to an svg path element:
const fadeIn = (event, locale) => {
event.target.style.fill = 'hwb(' + (120 - score[locale] * 1.2) + ' 0% 0% / 1)'
}
This works together with a transition from CSS:
transition: fill .25s;
Problem is that the stroke overlaps between svg paths, and the only way to bring the hovered element's stroke to the front above all others is by adding to the JS function:
event.target.parentElement.appendChild(event.target)
Unfortunately this doesn't work properly with the transition. Applying a class instead is not an option because I need score and locale parameters inside the hwb() color style property.
Is there anything I can do, to ensure the element being at the front AND making the transition work?
One way would be to interpolate the colour yourself using Javascript.
A simpler approach might be to create a class for each possible score. It looks like your scores are between 0 and 100. So you'd only need 101 classes defined. Eg. something like:
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">