SVG サブ要素が中心ではなく左上から拡大縮小するのはなぜですか?

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

SVG 内のサブ要素をスケールしようとすると、ユーザーは、変換の原点。具体的には、サブ要素の中心ではなく、SVG 全体に基づいて原点が (0,0) に設定されます。この動作により、アニメーションが目的の要素の中心から拡大縮小するのではなく、左上から「飛んでくる」ように見えます。

この問題を解決し、アニメーション化される特定の要素を基準にして変換原点を設定するには、transform- box プロパティを含める必要があります。これを「fill-box」に設定すると、transform-origin がサブ要素の寸法にバインドされます。

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

この変更により、サブ要素 (この場合はアニメーション化されたボックス) が確実にスケールされるようになります。 SVG 全体の原点ではなく、独自の中心から。

以上がSVG サブ要素が中心ではなく左上から拡大縮小するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。