只要SVG没有z-index,我就用DOM操作使矩形改变z位置。但是,我有一个新问题。由于某种原因,过渡停止工作。我怀疑是因为DOM重新排序,但我必须这样使用它。
function redZ() {
document.getElementById('svgField').appendChild(document.getElementById('redRect'));
document.getElementById('redRect').style.transition = "2s linear";
document.getElementById('redRect').style.fill = "black";
}
function blueZ() {
document.getElementById('svgField').appendChild(document.getElementById('blueRect'));
document.getElementById('blueRect').style.transition = "2s linear";
document.getElementById('blueRect').style.fill = "yellow";
}
<svg width="180" height="150" id="svgField">
<rect onclick="redZ()" id="redRect" x="0" y="0" width="100" height="100" fill="red" />
<rect onclick="blueZ()" id="blueRect" x="60" y="40" width="100" height="100" fill="blue" />
</svg>
答案 0 :(得分:0)
这似乎是由DOM操作引起的重绘问题。以下不是很优雅,但设置一个低毫秒值的超时(在某些情况下,您可能会略微提高50 / 100ms的值)通常可以解决重绘相关问题作为最后的手段。
此外,您应该避免在每次点击时更改过渡值,这根本不需要。
document.getElementById('redRect').style.transition = "2s linear";
document.getElementById('blueRect').style.transition = "2s linear";
function redZ() {
document.getElementById('svgField').appendChild(document.getElementById('redRect'));
window.setTimeout(function() {
document.getElementById('redRect').style.fill = "black";
}, 10);
}
function blueZ() {
document.getElementById('svgField').appendChild(document.getElementById('blueRect'));
window.setTimeout(function() {
document.getElementById('blueRect').style.fill = "yellow";
}, 10);
}
<svg width="180" height="150" id="svgField">
<rect onclick="redZ()" id="redRect" x="0" y="0" width="100" height="100" fill="red" />
<rect onclick="blueZ()" id="blueRect" x="60" y="40" width="100" height="100" fill="blue" />
</svg>
答案 1 :(得分:0)
不要将活动rect
移到DOM订单中的其他rect
之上,而是将其他 rect
移到活动 rect
。这允许转换按预期工作。
换句话说,当点击redRect
时,不是将redRect
移动到DOM订单的底部(因此它在视觉上位于顶部),而是移动{{1}到DOM命令的顶部(所以它在底部是可视的)。用:
blueRect
像这样:
document.getElementById('svgField').prepend(document.getElementById('blueRect'));
&#13;
function redZ() {
document.getElementById('svgField').prepend(document.getElementById('blueRect'));
document.getElementById('redRect').style.transition = "2s linear";
document.getElementById('redRect').style.fill = "black";
}
function blueZ() {
document.getElementById('svgField').prepend(document.getElementById('redRect'));
document.getElementById('blueRect').style.transition = "2s linear";
document.getElementById('blueRect').style.fill = "yellow";
}
&#13;