ホームページ

ウェブフロントエンド

CSSチュートリアル

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

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

Barbara Streisand

Oct 27, 2024 pm 08:10 PM

Here are a few question-based titles that fit the content of your article:

* Why Is My SVG Sub-Element Scaling From the Top-Left Corner?
* How to Correct Transform Origin Issues When Scaling SVG Sub-Elements
* Scaling SVG Sub-Elements: Understanding the

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

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

この問題を解決するには、アニメーション化する要素のtransform-boxプロパティを変更します。デフォルトでは、transform-box はボーダーボックスモデルを使用します。このモデルでは、パディングやボーダーを含む要素のボックスに対して変換操作が適用されます。原点の問題を解決するには、transform-box: 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-box を fill-box に設定すると、変換操作は、ボックスではなく要素の実際のコンテンツを基準にして適用されます。これにより、スケーリングアニメーションがサブ要素の中心から開始されるようになります。

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。