SVG サブ要素アニメーションが間違った原点から始まるのはなぜですか?

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

SVG を操作する場合、サブ要素の変換原点を制御するのが難しい場合があります。要素。デフォルトでは、CSS アニメーションと変換では、アニメーション化される特定の要素の中心ではなく、SVG 全体の (0,0) 原点が使用されます。

問題を理解する

提供された例では、サブ要素「animated-box」を中心から拡大縮小することが目的です。ただし、アニメーションは SVG の原点 (0,0) から始まり、ボックスが「左上から飛んでくる」ような錯覚を与えます。

解決策: Transform Box

アニメーション化された要素を基準にして変換の原点を設定するには、「transform-b​​ox」プロパティを使用できます。

<code class="css">transform-box: fill-box;</code>

「fill-box」の値は、サブ要素の使用をブラウザに指示します。境界ボックス (塗りつぶされる領域) を変換の原点として使用します。これにより、アニメーションが意図したとおりに「animated-box」の中心から拡大縮小されるようになります。

更新された例

transform-b​​ox プロパティを例に適用します。

<code class="css">@keyframes scaleBox {
  from {transform: scale(0);}
  to {transform: scale(1);}
}
#animated-box {
  transform-box: fill-box;
  animation: scaleBox 2s infinite;
}</code>

<code class="html"><svg ...>
  ...
  <rect id="animated-box" ...>
  ...
</svg></code>

これで、「アニメーション ボックス」が中心から拡大縮小され、よりスムーズで正確なアニメーションが作成されます。

以上がSVG サブ要素アニメーションが間違った原点から始まるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。