Firefox の SVG グループで「transform-origin」が機能しないのはなぜですか?

Firefox の SVG グループのtransform-origin設定が機能しません

Firefoxでtransform-originを有効にできません (v. 18 、他のバージョンではテストされていません）は一般的な問題です。 WebKit ブラウザは期待どおりに動作します。原点をグループの中心に設定しようとしましたが、これまでの試みはすべて失敗しました。

関連するコードは次のとおりです:

#test {
  -webkit-transform-origin: 50% 50%;
  transform-origin: center center;
  -webkit-animation: prop 2s infinite;
  animation: prop 2s infinite;
}

@-webkit-keyframes prop {
  0% {
    -webkit-transform: scale(1, 1);
  }
  20% {
    -webkit-transform: scale(1, .8);
  }
  40% {
    -webkit-transform: scale(1, .6);
  }
  50% {
    -webkit-transform: scale(1, .4);
  }
  60% {
    -webkit-transform: scale(1, .2);
  }
  70% {
    -webkit-transform: scale(1, .4);
  }
  80% {
    -webkit-transform: scale(1, .6);
  }
  90% {
    -webkit-transform: scale(1, .8);
  }
  100% {
    -webkit-transform: scale(1, 1);
  }
}

@keyframes prop {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  20% {
    transform: matrix(1, 0, 0, .8, 0, 0);
  }
  40% {
    transform: matrix(1, 0, 0, .6, 0, 0);
  }
  50% {
    transform: matrix(1, 0, 0, .4, 0, 0);
  }
  60% {
    transform: matrix(1, 0, 0, .2, 0, 0);
  }
  70% {
    transform: matrix(1, 0, 0, .4, 0, 0);
  }
  80% {
    transform: matrix(1, 0, 0, .6, 0, 0);
  }
  90% {
    transform: matrix(1, 0, 0, .8, 0, 0);
  }
  100% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="128px" viewbox="0 0 16 16">
    <g></g></svg>

解決策

問題は、SVG 形状の描画方法に原因があります。 Firefox がtransform-origin を正しく適用するには、元の SVG 形状の中心が座標 0, 0 にある必要があります。

1. 元の SVG 形状をその中心が座標 0 になるように描画します。 0:

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

2. 元の形状の周囲にグループを追加し、目的の位置に移動します:

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

これでグループに CSS トランジションを適用できるようになり、これは Firefox で問題なく動作するはずです。

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