Firefox の SVG グループで「transform-origin」が機能しないのはなぜですか? どうすれば修正できますか?

SVG グループの Transform-Origin: Firefox 固有の解決策

Firefox では、SVG グループの Transform-Origin の設定は永続的です問題が発生し、開発者はなぜ機能しないように見えるのか困惑しています。この問題に対処するために、効果的であることが証明されている解決策を詳しく見てみましょう。

この問題を説明するには、次の SVG コードを考えてみましょう。

<svg>
  <g></g></svg>

Firefox は、transform-origin プロパティを無視します。これは、グループの変換が意図した中心の周りで発生しないことを意味します。

この問題を解決する鍵は、SVG デザインを変更することにあります。グループ内に図形を描画するのではなく、その中心が座標原点(0, 0)に一致するように作成する必要があります。例:

<svg>
  <rect></rect></svg>

このシナリオでは、長方形の中心が座標原点と一致します。その後、CSS を使用して、Firefox がグループの中心の周りで適切に実行するトランジションとアニメーションを作成できます。

たとえば、次の CSS スニペットは、Firefox の中心の周りでグループ (および四角形) を回転します。

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

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

このソリューションは、Firefox の変換元の問題を効果的に解決し、SVG を中心としたシームレスな変換を可能にします。グループ。

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