Firefox SVG transform-origin fix破坏了我动画的另一部分

Question

我的动画在Firefox中被破坏了，让它运行的答案是：

svg * { transform-box: fill-box; }

但是，修复程序也破坏了CSS动画的工作部分。我尝试删除样式，这样做不起作用：

#eye * { transform-box: none; }

SVG部分正在破坏：

<g id="eye">
  <path ...>
  <ellipse ...>
</g>

如何覆盖特定元素的转换框修复？

Answer 1

在SVG中给出需要修复类的元素，然后在CSS中指定，而不是将transform-box: fill-box应用为整个SVG的全局

<svg>
  <g id="eye">
      <path ...>
      <ellipse ...>
  </g>
  <g class="brokenElement">
      <path ...>
      <ellipse ...>
  </g>
</svg>

然后在CSS中

.brokenElement { transform-box: fill-box; }

Answer 2

杰克有一个工作的答案是不全局应用修复，而是针对需要修复类的SVG形状。我坚持全局修复，因为它修复了6个形状的动画，并且只搞乱了一个。然后我用“transform-b​​ox：view-box”恢复了。

svg * { transform-box: fill-box; }
svg #pig-eye * {transform-box: view-box;}

我在这里找到了信息： https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box