Firefox の SVG グループで「transform-origin」が正しく動作しないのはなぜですか?

Firefox の SVG グループでの変換元の問題の解決

問題の説明

SVG グループでの変換元の設定Firefox では効果がないようです。これは Webkit ブラウザでは意図したとおりに機能しますが、Firefox で使用すると、変換元の位置が正しく調整されません。

コード例

#test {
  -webkit-transform-origin: 50% 50%;
  transform-origin: center center;
 ...
}

解決策

この問題に対処するには、元の SVG 形状をその形状で描画することをお勧めします。中心は座標 (0, 0) です。これには、予想される変換原点と正しく位置合わせするために形状の原点をシフトすることが含まれます。

改訂版 SVG

<svg x="0px" y="0px" width="400px" height="400px" viewbox="0 0 400 400">
    <g transform="translate(150, 100)">
        <rect></rect></g></svg>

形状の中心を ( 0, 0)、transform-origin を正しく適用できるようになり、Firefox 内で望ましい変換動作が得られます。

以上がFirefox の SVG グループで「transform-origin」が正しく動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。