Html 在Firefox中使用transform origin时，SVG元素会移动

所以我有了这个蓝图，我已经将其重新创建为SVG

这是

在Chrome中一切都很好，但在Firefox中，一旦门上的旋转动画完成，门本身（旋转的元素）就会从其原始位置水平向右或垂直向下移动。换句话说，将旋转应用于具有

过渡的图元（即
旋转（90度）
…等待…
旋转（0）
）似乎会导致图元从其正确位置移动水平门将垂直移动，垂直门将水平移动。超级奇异

动画完成后刷新浏览器后，此问题最为明显

，根据要求

MVCE已更新。它尽可能小，同时仍然会产生垂直和水平移动的问题。


var-fillElements=document.getElementsByClassName（'f'）；
var-fillElement；
变量fillElementId；
对于（i=0；i

svg{
位置：绝对位置；
左：324px；
顶部：300px；
变换：尺度（3）；
}
.整扇门{
行程：#000；
填充：无；
不透明度：1；
}
f{
填充：#ff6600；
不透明度：0；
}
.o-door-右上，.o-door-右下{
转换：转换0.75s；
}

看起来像是FF中的一个bug

为了解决这个bug，您不希望在Firefox中使用不同的
变换原点
坐标。因为当错误被修复后，它又会出错

故障似乎是转换中的舍入错误（门移动了0.5个SVG单位）。因此，显而易见的解决方案是将所有坐标向上缩放，这样0.5个单位的偏移将不再明显

例如，如果您将坐标乘以10，它似乎有效（偏移变得不那么明显）。如果这个bug在将来被修复，你就不需要做任何改变


var-room=document.getElementById（'g-f-construction-shop'）；
room.addEventListener（'mouseenter'，function animateDoors（）{
var doorElement=document.getElementById（'g-o-construction-shop-stage-one-door-right-top'）；
doorElement.style.transform='旋转（90度）'；
setTimeout（函数（）{
doorElement.style.transform='rotate（0）'；
}, 750);
});
.o整体，.door{
行程：#000；
笔画宽度：10；
填充：无；
不透明度：1；
}
f{
填充：#ff6600；
不透明度：0.1；
}
.o-门-右-顶{
转换：转换0.75s；
}

Chrome坏了，Firefox坏了。这就是我的意思。您正在演示的只是一个错误Chrome@RobertLongson所发生的一切与chrome毫无关系。。。在我的大部分代码中，有些东西在firefox上产生了一种非常奇怪的行为。在门元素旋转到90度然后返回到0度后，由于某些原因，它们的位置与初始位置不同，门会垂直或水平移动，垂直于它们的延伸方向。如果MCVE没有显示问题，则不是@RobertLongson是的，我知道。在清理了大部分代码之后，它仍然显示问题。然后我继续说。当我再次检查时。没问题了。我不知道是什么引起的。我打算把它留到明天。什么东西可能会导致这样的行为，虽然元素在旋转后，稍微移动它的位置，比如说，360度？“安东尼，这是我认为是一个好的MCVE：但是无论如何，它看起来像FF中的一个bug。我已经向Mozilla报告了。把坐标放大10？什么意思？它不会将门元素移动一个单位，而是移动半个单位。我设计蓝图的方式是，让每一条线都精确地落在特定的坐标上，这样，如果你把它缩小到原来的尺寸（
scale（1）
），最小的尺寸，线仍然会显得清晰。因此，如果它将门移动一整单位，线条将保持清晰，但事实并非如此。因此，元素的偏移量为
0.5
。一旦您做出响应，我将立即删除此线程，因为您将另一个线程取消标记为重复。请看我回答中的代码片段。我把所有坐标乘以10。现在在FF中，这种转变几乎不明显。当您对原始文件执行相同操作，并以正常大小渲染它（而不是此处的缩放版本）时，偏移应该根本不可见。嗯。。。然后，我需要放大
视图框
，以缩小SVG，以便按照预期在移动设备上清晰地显示它？这不可能重现最初的情况吗？我被这个虫子弄糊涂了。我不确定