Javascript SVG转换不起作用

只要SVG没有z索引，我就用DOM操作改变矩形的z位置。然而，我有一个新问题。由于某种原因，转换停止工作。我怀疑这是因为DOM重新排序，但我不得不这样使用它

函数redZ（）{
document.getElementById（'svgField'）.appendChild（document.getElementById（'redRect'））；
document.getElementById（'redRect'）.style.transition=“2s-linear”；
document.getElementById（'redRect'）.style.fill=“black”；
}
函数blueZ（）{
document.getElementById（'svgField'）.appendChild（document.getElementById（'blueRect'））；
document.getElementById（'blueRect'）.style.transition=“2s-linear”；
document.getElementById（'blueRect'）.style.fill=“黄色”；
}

---

这似乎是DOM操作导致的重绘问题。下面的内容并不完美，但将超时设置为较低的毫秒值（在某些情况下，您可能需要稍高的值50/100ms）通常可以作为最后手段解决重绘相关问题

此外，您应该避免在每次单击时更改转换值，这根本不需要

document.getElementById（'redRect'）.style.transition=“2s-linear”；
document.getElementById（'blueRect'）.style.transition=“2s-linear”；
函数redZ（）{
document.getElementById（'svgField'）.appendChild（document.getElementById（'redRect'））；
setTimeout（函数（）{
document.getElementById（'redRect'）.style.fill=“black”；
}, 10);
}
函数blueZ（）{
document.getElementById（'svgField'）.appendChild（document.getElementById（'blueRect'））；
setTimeout（函数（）{
document.getElementById（'blueRect'）.style.fill=“黄色”；
}, 10);
}

---

这似乎是DOM操作导致的重绘问题。下面的内容并不完美，但将超时设置为较低的毫秒值（在某些情况下，您可能需要稍高的值50/100ms）通常可以作为最后手段解决重绘相关问题

此外，您应该避免在每次单击时更改转换值，这根本不需要

document.getElementById（'redRect'）.style.transition=“2s-linear”；
document.getElementById（'blueRect'）.style.transition=“2s-linear”；
函数redZ（）{
document.getElementById（'svgField'）.appendChild（document.getElementById（'redRect'））；
setTimeout（函数（）{
document.getElementById（'redRect'）.style.fill=“black”；
}, 10);
}
函数blueZ（）{
document.getElementById（'svgField'）.appendChild（document.getElementById（'blueRect'））；
setTimeout（函数（）{
document.getElementById（'blueRect'）.style.fill=“黄色”；
}, 10);
}

---

不要按DOM顺序将活动的

rect

移动到另一个

rect

上方，而是将另一个

rect

移动到活动的

rect

下方。这允许转换按预期工作

换句话说，单击

redRect

时，不要将

redRect

移动到DOM顺序的底部（因此它在视觉上位于顶部），而是将

blueRect

移动到DOM顺序的顶部（因此它在视觉上位于底部）。与：

document.getElementById（'svgField'）.prepend（document.getElementById（'blueRect'））

像这样：


函数redZ（）{
document.getElementById（'svgField'）.prepend（document.getElementById（'blueRect'））；
document.getElementById（'redRect'）.style.transition=“2s-linear”；
document.getElementById（'redRect'）.style.fill=“black”；
}
函数blueZ（）{
document.getElementById（'svgField'）.prepend（document.getElementById（'redRect'））；
document.getElementById（'blueRect'）.style.transition=“2s-linear”；
document.getElementById（'blueRect'）.style.fill=“黄色”；
}
不要按DOM顺序将活动的
rect
移动到另一个
rect
上方，而是将另一个
rect
移动到活动的
rect
下方。这允许转换按预期工作

换句话说，单击
redRect
时，不要将
redRect
移动到DOM顺序的底部（因此它在视觉上位于顶部），而是将
blueRect
移动到DOM顺序的顶部（因此它在视觉上位于底部）。与：

document.getElementById（'svgField'）.prepend（document.getElementById（'blueRect'））

像这样：


函数redZ（）{
document.getElementById（'svgField'）.prepend（document.getElementById（'blueRect'））；
document.getElementById（'redRect'）.style.transition=“2s-linear”；
document.getElementById（'redRect'）.style.fill=“black”；
}
函数blueZ（）{
document.getElementById（'svgField'）.prepend（document.getElementById（'redRect'））；
document.getElementById（'blueRect'）.style.transition=“2s-linear”；
document.getElementById（'blueRect'）.style.fill=“黄色”；
}

根据实际SVG的总体结构，您可以选择将SVG中的元素拆分为单独的
元素，并对这些元素应用
z-index
。根据实际SVG的总体结构，您可以选择将SVG中的元素拆分为单独的
元素，并对这些对象应用
z-index
。“这似乎是DOM操作导致的重绘问题。”-更确切地说，是“控制”返回到渲染引擎时的问题。所有DOM和样式操作都作为一个不间断的任务执行。元素附加到指定的DOM位置，并设置CSS转换和填充属性。只有到那时，它才被交给渲染引擎，渲染引擎（对于原始的
redZ
函数示例）查看它并运行，好的，您给了我一个黑色填充颜色的元素，