Firefox SVG转换起源还没有修复?

时间:2016-10-11 02:44:24

标签: javascript firefox svg css-transforms

我在Firefox文档中读到SVG转换源已经在Firefox 41+中修复了Firefox,但是我使用的是Firefox 49并且有一些奇怪的效果..

这是我在Chrome中的SVG动画:

correct animation

..这里是Firefox:

wtf 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);
  }
}

并使用javascript将.fillCup多边形动画为scale(1, 1)

注意:我实际上正在使用sass mixin,但是为了简化代码,我已经省略了它们.firefox选择transform使用moz-transform {1}}或-webkit-transform以便这是唯一的&#34;前缀&#34;我已包含在此处。)

是否有适当的&#34;我应该做transform-origin这样的方式,以便适用于所有浏览器吗? Chrome是不正确的?当我在Firefox中切换百分比时,它使用的实际位置似乎完全是任意的。

1 个答案:

答案 0 :(得分:2)

Firefox实际上是正确遵循规范的那个。这是Chrome不正确的。它提前实现了transform-origin,百分比值的行为与规范中最终确定的行为不同。

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