css - 如何在同一原点缩放 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 错误地默认为这个。