SVG过渡无效

Question

只要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>

Answer 1

这似乎是由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>

Answer 2

不要将活动rect移到DOM订单中的其他rect之上，而是将其他 rect移到活动 rect。这允许转换按预期工作。

换句话说，当点击redRect时，不是将redRect移动到DOM订单的底部（因此它在视觉上位于顶部），而是移动{{1}到DOM命令的顶部（所以它在底部是可视的）。用：

blueRect

像这样：

＆＃13;

＆＃13;

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;

＆＃13;

＆＃13;