`transform-b​​ox: fill-box;` を使用して SVG サブ要素の予期しないアニメーション動作を修正する方法

SVG サブ要素の CSS 変換原点の問題

SVG 内のサブ要素をアニメーション化しようとすると、要素の変換原点多くの場合、アニメーション化される特定のサブ要素ではなく、SVG 全体を基準にして設定されます。これにより、要素が SVG の中心ではなく左上隅から拡大縮小するように見えるなど、予期しないアニメーション動作が発生する可能性があります。

この問題に対処するために、CSS は、次のことができるtransform-b​​ox プロパティを提供します。変換の影響を受けるボックスを定義するために使用されます。変換ボックスを塗りつぶしボックスに設定すると、変換は要素のコンテンツ ボックス (つまり、要素の表示コンテンツが占める領域) にのみ適用されます。

以下の例を考えてみましょう。 SVG 内の (id="animated-box") は CSS アニメーションを使用してスケーリングされます:

@keyframes scaleBox {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

#animated-box {
  animation: scaleBox 2s infinite;
}

transform-b​​ox プロパティを設定しないと、長方形は次のように SVG の左上隅からスケーリングされます。その変換原点は、SVG 全体を基準にして (0,0) に設定されます。

この動作を修正し、長方形を独自の中心からスケールさせるには、transform-b​​ox: fill-box; を追加します。 #animated-box セレクターへ:

@keyframes scaleBox {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

#animated-box {
  transform-box: fill-box;
  animation: scaleBox 2s infinite;
}

これで、transform-b​​ox プロパティにより、要素のコンテンツ ボックスにのみ変換が適用されることが保証されるため、四角形はその中心から拡大縮小されます。これにより、アニメーションの制御が強化され、より正確で視覚的に魅力的な結果が得られます。

以上が`transform-b​​ox: fill-box;` を使用して SVG サブ要素の予期しないアニメーション動作を修正する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。