SVG グループ「transform-origin」が Firefox で期待どおりに動作しないのはなぜですか?どうすれば修正できますか?

Firefox での SVG グループの Transform-Origin の問題: 解決策

Firefox ユーザーは、SVG グループでの Transform-Origin の使用で問題が発生する可能性があります。原点を中心にしようとする試みにもかかわらず、望ましい変換は依然として実現できません。この問題は、Firefox の独自の SVG 描画スタイルに起因します。

この問題を解決するには、原点 (0, 0) を中心にして SVG 形状を描画します。

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
    <rect>

次に、シェイプをグループ内で囲み、目的の位置に移動します:

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

これで、CSS トランジションをこれに適用できるようになります。グループ (transform-origin を含む) が含まれており、Firefox で正しく機能するはずです:

#myObject {
    transform: rotate(0deg);
    transition: all 1s linear;
}

.csstransforms.csstransitions.js-rotateObject #myObject {
    transform: rotate(360deg);
}

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