如何使 CSS 转换与 JS.appendChild function 一起工作？

Question

通过mouseenter事件，我将以下 JS function 应用于svg path element ：

const fadeIn = (event, locale) => {
    event.target.style.fill = 'hwb(' + (120 - score[locale] * 1.2) + ' 0% 0% / 1)'
}

这与 CSS 的transition一起工作：

transition: fill .25s;

问题是stroke在svg paths之间重叠，将悬停元素的笔划置于最前面的唯一方法是添加到 JS function：

event.target.parentElement.appendChild(event.target)

不幸的是，这不适用于transition 。 应用 class 不是一个选项，因为我需要hwb()颜色样式属性中的score和locale参数。

有什么我可以做的，以确保元素在前面并使转换工作？

Answer 1

一种方法是使用 Javascript 自行插入颜色。

一种更简单的方法可能是为每个可能的分数创建一个 class。 看起来你的分数在 0 到 100 之间。所以你只需要定义 101 个类。 例如。 就像是：

 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">