SVG过渡无效

时间:2017-10-28 11:23:16

标签: javascript svg

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

2 个答案:

答案 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

像这样:

&#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;