SVG サブ要素をスケーリングすると「左上から飛んでくる」のはなぜですか?またその修正方法は何ですか?

SVG サブ要素に関する CSS 変換元の問題

問題:

試行時SVG 内のサブ要素をスケールするには、transform-origin が SVG 全体の (0,0) 点に設定され、アニメーション化されたときにサブ要素が「左上から飛んでくる」ように見えます。

解決策:

アニメーション化されている特定のサブ要素を基準にして変換原点を設定するには、次の CSS ルールを追加します。

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

This変換がサブ要素の境界ボックスに相対的であることを保証し、その中心からスケールできるようにします。

更新された例:

<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 id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="
        width: 195px;
    ">
    <defs>
    <style>.cls-1{fill:#7f7777;}.cls-2{fill:#fff;}
</style>
    </defs>
    <rect class="cls-1" x="0.5" y="0.5" width="99" height="99"></rect>
    <path d="M99,1V99H1V1H99m1-1H0V100H100V0Z"></path>
    <rect id="animated-box" class="cls-2" x="10.5" y="8.5" width="22" height="6"></rect>
</svg></code>

説明:

transform-b​​ox プロパティは、要素のどの部分を変換原点の計算に使用するかを決定します。 fill-box に設定すると、親 SVG の座標空間ではなく、サブ要素の境界ボックスを使用して原点が計算されます。

以上がSVG サブ要素をスケーリングすると「左上から飛んでくる」のはなぜですか?またその修正方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。