Firefox SVG 变换原点仍未修复？答案

【问题标题】：Firefox SVG transform-origin still not fixed?Firefox SVG 变换原点仍未修复？
【发布时间】：2017-02-19 13:15:48
【问题描述】：

我在 Firefox 文档中读到 SVG 转换原点已在 Firefox 中与 Firefox 41+ 一起修复，但我使用的是 Firefox 49 并且有一些奇怪的效果..

这是我在 Chrome 中的 SVG 动画：

.. 它在 Firefox 中：

我的代码是这样的——

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960.59 674.02">
  ...
  <path class="fillCup" d="M395.56,528.9l6.53,36.05c0,2.42,6.08,4.38,13.57,4.38s13.57-2,13.57-4.38l6.53-36.05s-0.68,4.5-20.11,4.5S395.56,528.9,395.56,528.9Z" transform="translate(-17.93 -12.21)"/>
  <polygon class="sparkle" points="407.41 538.79 407.47 530.6 403.98 528.96 407.82 528.62 410.59 520.9 410.53 529.1 413.81 530.7 410.18 531.08 407.41 538.79"/>
</svg>

和css：

.sparkle {
  fill: #fff;
  transform-origin: 50% 50%;
  animation: pulse 1s linear 0s infinite alternate forwards;
}

.fillCup {
  fill: #4fc3f7;
  transform: scale(0, 0) translate(-17.93px, -12.21px);
  transform-origin: 10% 70%;
}

动画pulse在哪里

@keyframes pulse {
  0% {
    transform: scale(.7, .7);
  }
  100% {
    transform: scale(1, 1);
  }
}

.fillCup 多边形正在使用 javascript 动画到 scale(1, 1)。

(注意：我实际上使用的是 sass mixin，但为了简化代码，我省略了它们。firefox 选择使用 transform 而不是 moz-transform 或 -webkit-transform所以这是我在这里包含的唯一“前缀”。）

我应该以“正确”的方式执行transform-origin，以便它适用于所有浏览器吗？ Chrome 是不是做错了？当我在 Firefox 中切换百分比时，它使用的实际位置似乎完全是任意的。

【问题讨论】：

标签： javascript firefox svg css-transforms

【解决方案1】：

Firefox 实际上是正确遵循规范的。是 Chrome 不正确。它很早就实现了transform-origin，百分比值的行为与规范中最终确定的不同。

最简单的解决方案是不使用百分比值。使用绝对坐标。

【讨论】：

缩放 SVG 时绝对坐标是否有效？另外，绝对坐标相对于什么？整个 SVG 盒子？谢谢！
(1) 是的，它们应该 (2) 它们具有与其所应用的元素相同的坐标空间。