javascript - Firefox 中的旋转元素会导致其移动

标签 javascript html xml firefox svg

我为 friend 的公司重新创建了蓝图作为内联 SVG。

Chrome 中一切都很好，但在 Firefox 中，门的位置在完成动画后发生了变化。事情变得更奇怪了。 水平门将向下移动，而垂直门将向右移动。

<强> Here is an MVCE.

下面是门元素的 XML。

<!-- horizontal door which shifts vertically -->
<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 door which shifts horizontally -->
<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"
/>

动画仅涉及:

  1. transition属性在CSS中的应用
  2. 将 JS 中的 transform 属性设置为 rotate(90deg)
  3. 超时后在JS中设置transform:rotate(0)

当有门的房间悬停时会触发动画。为了查看错误，您必须首先将鼠标悬停在有门的房间上，然后等到动画完成后再刷新页面。如果您注意的话，您应该能够注意到门移回原位。

这是一种非常不寻常的行为，尤其是考虑到门根据其方向仅向一个方向移动，我完全感到困惑。任何见解将不胜感激。

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>

最佳答案

事实证明这是 Firefox 中的一个错误: https://bugzilla.mozilla.org/show_bug.cgi?id=1340438

关于javascript - Firefox 中的旋转元素会导致其移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42284510/

上一篇：javascript - (JS) 迭代后从 csv 中删除行

下一篇：javascript - 如何更改 Angular Bootstrap-ui 单选按钮的 ng-model 属性？

相关文章：

javascript - 如何使用 meteor 在客户端对象上绑定(bind)服务器端事件，反之亦然

javascript - 我如何在 JavaScript 依赖框架之间进行选择？

javascript - 如何在不中断撤消的情况下在 contentEditable 范围内粘贴纯文本？

php - 如何在 PHP 中清理/验证 XML 文件？ PC数据错误

javascript - 禁用输入法在 Firefox 中工作不正常

html - 为什么不使用 div？

javascript - 线性渐变不适用于 javascript

html - 样式未在 Firefox 中加载

javascript - 在 javascript 中使用应用模板

xml - Xpath 1.0 表达式获取任何请求的值

©2024 IT工具网  联系我们