同じ起点で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

あなたはボックス変換したい：フィルボックス。

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

変換元が中央に設定されていると、Chromeのデフォルトは正しくありません。