所以我有了这个蓝图，我已经重新创建了SVG。
以下是 codepen ！
在Chrome中一切正常，但在Firefox中，一旦门上的旋转动画结束，门本身（旋转的元素）从其原始位置水平向右或垂直向底部移动。换句话说，将旋转应用于具有transition的元素（即rotate(90deg) ...等待... rotate(0)），似乎会导致元素从其正确位置移位。 水平门将垂直移动，垂直门将水平移动。超级离奇。
动画完成后刷新浏览器后，问题最为明显。
Here is an MVCE，根据要求。
MVCE已更新。它尽可能地小，同时仍然产生垂直和水平移动的问题。
var fillElements = document.getElementsByClassName('f');
var fillElement;
var fillElementId;
for (i = 0; i < fillElements.length; i++) {
fillElements[i].addEventListener('mouseenter', emphasizeRoom);
fillElements[i].addEventListener('mouseleave', deEmphasizeRoom);
}
function emphasizeRoom() {
fillElement = this;
fillElementId = fillElement.id;
changeOpacity();
animateDoors();
}
function changeOpacity() {
fillElement.style.opacity = '0.1';
}
function animateDoors() {
var dashedRoomName = fillElement.id.replace(fillElementId.substring(0, 1) + '-f-', '');
var horDoor = 'g-o-construction-shop-stage-one-door-right-top';
var verDoor = 'g-o-construction-shop-paint-shop-door-bottom-right';
var doorElement;
if (horDoor.includes(dashedRoomName)) {
doorElement = document.getElementById(horDoor);
} else if (verDoor.includes(dashedRoomName)) {
doorElement = document.getElementById(verDoor);
}
doorElement.style.transform = 'rotate(90deg)';
setTimeout(function () {
doorElement.style.transform = 'rotate(0)';
}, 750);
}
function deEmphasizeRoom() {
this.style.opacity = 0;
}svg {
position: absolute;
left: 324px;
top: 300px;
transform: scale(3);
}
.o-whole, .door {
stroke: #000;
fill: none;
opacity: 1;
}
.f {
fill: #ff6600;
opacity: 0;
}
.o-door-right-top, .o-door-bottom-right {
transition: transform 0.75s;
}<body>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="320" height="304" viewBox="0 0 320 304" id="svg">
<g id="ground">
<!-- WHOLE OUTLINE -->
<path
id="g-o-whole"
class="o-whole"
d="M 108,266.5 H 98 m 55,-259 h 5 m -49,239 h 7 M 108.5,47 v -2 m 153,31 v 1.5 h 1 V 76 m -1.5,48.5 h 1.5 v 1 H 261 m 0.5,48.5 v -1.5 h 1 v 1.5 m 0,48 v -1.5 h -1 v 1.5 m -102,-31 v 1.5 h 1 V 191 m 0.5,-44.5 h -1.5 v -1 H 161 M 159.5,99 v 1.5 h 1 V 99 M 161,53.5 h -1.5 v 1 H 161 M 74.5,26 v 1.5 h 1 V 26 M 40,26.5 h 1.5 v 1 H 40 M 74.5,47 v 1.5 h 1 V 47 m -35,2 v -1.5 h 1 V 49 M 40,68.5 h 1.5 v 1 H 40 M 75.5,68 v 1.5 h -1 V 68 M 74,89.5 h 1.5 v 1 H 74 m -32,0 h -1.5 v -1 H 42 M 74.5,110 v 1.5 h 1 V 110 M 42,110.5 h -1.5 v 1 H 42 M 40.5,131 v 1.5 h 1 V 131 m 34.5,1.5 h -1.5 v -1 H 76 M 41.5,194 v -1.5 h -1 v 1.5 m 35,21 v 1.5 h -1 V 215 m -34,2 v -1.5 h 1 V 217 M 74,193.5 h 1.5 v -1 H 74 m -32,47 h -1.5 v -1 H 42 M 211.5,220 V 43 m -103,143 v -8 M 260,284.5 h 7 m -7,-2 h 7 m -7,-2 h 7 m -7,-2 h 7 m -7,-2 h 7 m -7,-2 h 7 m -7,-2 h 7 m -7,-2 h 7 m 0.5,10.5 V 269 M 211,247.5 h 18 M 211.5,239 v 28 m 35.5,-8.5 h -17.5 v -11 h 18 v 2.5 m 0,19 v -13 m -2.5,13.5 h 5 m -54,13 h 7 m -7,-2 h 7 m -7,-2 h 6.98438 M 196,276.5 h 7 m 1,-1 h 7 m -7,2 h 7 m -7,2 h 7 m -7,2 h 7 m -7,2 h 7 m -15,1 h 7.5 V 275 m 8,20 v -27.5 h -16 V 287 M 209,238.5 h 2.5 V 232 m -13.5,6.5 h 5 m -41,0 h 20 m -41,0 h 5 m -20,20 h 6.5 v -20 h 2.5 m -6.5,34.5 v -14 m -18,0 v 7 m 2,-7 v 7 m 2,-7 v 7 m 2,-7 v 7 m -8,-7 v 7.5 h 9.5 m -10,-8 H 97.5 V 287 m 11,-31 v 2.5 H 120 M 64.5,262 v -21.5 h 11 v 9.5 m 0,20 v 14 M 86,269.5 H 75.5 V 263 M 86,258.5 H 76 m -14,4 H 75.5 V 256 m -11,20 v -13 m 22,15 v 6.5 h -22 V 282 m 22,-15 v 5 m 0,-16 v 5 m -44,2 v 10.5 H 53 M 31.5,284 v -21 m 22,19 v 2.5 h -22 v 2.5 m 22,-16 v 5 M 53,262.5 H 7 m 46.5,2.5 v -2.5 H 56 m 53,-40 h 7 m -7,2 h 7 m -7,2 h 7 m -7,2 h 7 m -7,2 h 7 m -7,2 h 7 m -7,2 h 7 m -7,2 h 7 m -7,2 h 7 m -7,2 h 7 m -7,2 h 7 m -7,2 h 7 m -7,-33 h 7.5 V 248 m -8,-1 v -45 m -22,48 v -2.5 h 22 v 2.5 m 0,-81 v 8.5 H 104 M 94.5,161 v 16.5 H 98 M 108.5,160 v 3 M 92,151.5 h 2.5 v 9 H 108 m -13,-11 h 13.5 V 147 M 108,138.5 H 94.5 V 151 m 14,-15 v 5 M 73,170.5 H 83.5 V 152 m -11,0 v 18.5 H 62 m 19,-19 h 5 m -16,0 h 5 M 50.5,163 v 7 m -2,-7 v 7 m -2,-7 v 7 m -2,-7 v 7 m -2,-7 v 7 m -2,-7 v 7 m -2,-7 v 7 m -2,-7 v 7 m -2,-7 v 7 m -2,-7 v 7 m -2,-7 v 7 m -2,-7 v 7 m -2,-7 v 7 m -2,-7 v 7 m -2,-7 v 7 m -2,-7 v 7 m -2,-7 v 7 M 15,170.5 H 61.5 V 163 m -11,-9 v -2.5 H 61 M 50.5,160 v 2.5 h 11 v -11 H 64 M 28.5,151 V 140.5 H 26 m -19,11 h 10.5 v 11 H 28 m 12,0 H 50 M 39.5,160 v 2.5 h -11 v -11 h 11 v 2.5 m 69,-34 v 10 m 0,-51 v 25 m 0,-51 v 10 m 92,-55 V 20.5 H 211 m -110,13 h 7 m -7,-2 h 7 m -7,-2 h 7 m -7,-2 h 7 m -7,-2 h 7 m -7,-2 h 7 m -7,-2 h 7 m -7,-2 h 7 m 1,14 h 10.5 V 36 m 0,6 v 2.5 H 109 M 92.5,16 v 2.5 h 8 v 26 h 8 v -26 h 8 V 16 M 6.5,90 V 25 m 0,89 V 96 M 7,140.5 h 7 M 6.5,154 V 130 M 9,170.5 H 6.5 V 160 M 9,295.5 H 6.5 V 202 m 0,-16 v -15 m 25,122 v 2.5 H 15 m 92,-8 h -9.5 v 8 H 95 m -6,0 H 32 M 128.5,285 v 2.5 H 119 m 76,8 H 128.5 V 288 m 74.5,7.5 h -7.5 V 293 m 41,-5 v 7.5 H 209 m 33,-8 h -5.5 v -18 H 239 M 259.5,287 V 269.5 H 256 m 53,-240 h 4.5 v 266 h -25 v -14 h -21 v 14 h -8 v -8 H 254 m 40,-258 h 5 m -20,0 h 5 m -22,0 h 7 m -27,0 h 4 m -23,13 h 10.5 V 30 M 231,29.5 h 5 m -16,0 h 5 m -11,0 h -2.5 v 13 h 11 V 30 M 209,7.5 h 2.5 V 29 M 198,7.5 h 5 m -20,0 h 5 m -20,0 h 5 m -35,0 h 5 m -25.98959,0 H 122 m -15,0 h 9.5 V 10 m -24,0 V 7.5 h 8.5 m -32,0 H 92 M 6.5,19 V 7.5 H 47" />
<!-- FILL -->
<path id="g-f-construction-shop" class="f"
d="M 39,152 H 28 V 141 H 6 V 7 h 87 v 11 h 8 v 26 h 8 v 95 H 95 v 13 H 51 v 11 H 39 c 0,-3.36991 0,-7.34493 0,-11 z" />
<path id="g-f-paint-shop" class="f"
d="M 65,263 H 6 v -93 h 77 v -19 h 12 v 26 h 14 v 71 H 87 v 11 H 75 V 241 H 65 Z" />
<path id="g-f-stage-one" class="f"
d="M 133,259 H 108 V 44 h 11 V 34 H 108 V 18 h 8 V 7 h 85 v 13 h 11 v 219 h -79 z" />
<!-- DOORS -->
<!-- horizontal -->
<path
id="g-o-construction-shop-stage-one-door-right-top"
class="door o-door-right-top"
style="transform-origin:108.5px 130.5px;"
d="m 108,130.5 h 5.99996"
/>
<!-- vertical -->
<path
id="g-o-construction-shop-paint-shop-door-bottom-right"
class="door o-door-bottom-right"
style="transform-origin:91.5px 151.5px;"
d="m 91.5,151 v 5.99996"
/>
</g>
</svg>
</body>
</html>
答案 0 :(得分：2)
看起来像FF中的错误。 I have reported it here
要解决此错误，您不希望在Firefox中使用不同的transform-origin坐标。因为当bug被修复时，它会再次出错。
故障似乎是转换中的舍入误差（门移动0.5个SVG单位）。因此，显而易见的解决方案是将所有坐标向上扩展，以便0.5个单位的移位不再明显。
例如，如果你将坐标乘以10，它似乎起作用（移位变得不那么明显）。如果将来修复错误，您将无需进行任何更改。
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 = 'rotate(90deg)';
setTimeout(function () {
doorElement.style.transform = 'rotate(0)';
}, 750);
});.o-whole, .door {
stroke: #000;
stroke-width: 10;
fill: none;
opacity: 1;
}
.f {
fill: #ff6600;
opacity: 0.1;
}
.o-door-right-top {
transition: transform 0.75s;
} <svg width="500" height="500" viewBox="1050 1250 200 200" id="svg">
<g id="ground">
<!-- ROOM OUTLINE -->
<path class="o-whole" d="M 1085,1200 v 100" />
<!-- ROOM FILL -->
<rect id="g-f-construction-shop" class="f" width="1090" height="2000"/>
<!-- DOOR -->
<path
id="g-o-construction-shop-stage-one-door-right-top"
class="door o-door-right-top"
style="transform-origin:1085px 1305px;"
d="m 1080,1305 h 60"
/>
<circle cx="1085" cy="1305" r="2" fill="limegreen"/>
</g>
</svg>