如何在同一原点缩放SVG中的路径？

Question

我想在SVG中的路径上创建动画。它在同一原点前后缩放。问题是我当前的解决方案适用于Chrome，但不适用于Firefox。

.svg-map-pg-logo {
  animation-name: star;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
}

@keyframes star {
    0%   {
      transform: scale(1, 1);
      transform-origin: center center;
    }
    100% {
      transform: scale(1.2, 1.2);
      transform-origin: center center;
    }
}

在Firefox上，路径会在移向某个方向时缩放。在Chrome上，它只能按其原始尺寸缩放。如何使秤不动？

这是在Firefox上发生的情况：

这就是在Chrome上发生的事情以及我想要的：

https://codepen.io/joshuajazleung/pen/jaaPwW

Answer 1

您需要transform-b​​ox：fill-box;

.svg-map-pg-logo {
  animation-name: star;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  transform-origin: center center;
  transform-box: fill-box;
}

@keyframes star {
    0%   {
      transform: scale(1, 1);
    }
    100% {
      transform: scale(1.2, 1.2);
    }
}

当transform-origin设置为center时，Chrome错误地默认为默认值。