如何在同一起源的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

你想要变换框：填充框;

ID, Text_1, Text_2, Points_1, Points_2
1, "Hello world one", "Hello world two", 33, 90
2, "Goodbye world one", "Goodbye world two", 44, 100

当transform-origin设置为居中时，Chrome错误地默认为此。