記事の内容に適した質問ベースのタイトルをいくつか示します。 * SVG サブ要素が左上隅から拡大縮小するのはなぜですか? * SVG サブスケールをスケーリングする際の変換原点の問題を修正する方法

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

SVG 内のサブ要素をスケーリングするとき、デフォルトの変換原点は次のように設定されます。 SVG 全体の (0,0) ポイント、つまり左上隅です。これにより、目的の原点がスケーリングされる要素の中心である場合、予期しないスケーリング動作が発生する可能性があります。

この問題を解決するには、アニメーション化する要素のtransform-b​​oxプロパティを変更します。デフォルトでは、transform-b​​ox はボーダー ボックス モデルを使用します。このモデルでは、パディングやボーダーを含む要素のボックスに対して変換操作が適用されます。原点の問題を解決するには、transform-b​​ox: fill-box; を設定します。

例:

<code class="css">@keyframes scaleBox {
  from {transform: scale(0);}
  to {transform: scale(1);}
}

#animated-box {
  transform-box: fill-box;
  animation: scaleBox 2s infinite;
}</code>

transform-b​​ox を fill-box に設定すると、変換操作は、ボックスではなく要素の実際のコンテンツを基準にして適用されます。これにより、スケーリング アニメーションがサブ要素の中心から開始されるようになります。

以上が記事の内容に適した質問ベースのタイトルをいくつか示します。 * SVG サブ要素が左上隅から拡大縮小するのはなぜですか? * SVG サブスケールをスケーリングする際の変換原点の問題を修正する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。