CSS と SVG の実際の応用例は何ですか?

開発者は CSS を使用して Web コンテンツのスタイルを設定し、それを正しく表現します。あらゆるコンテンツを魅力的にするために使用できます。

SVG の完全な形式は、Scalable Vector Image です。 SVG は jpg や png のような画像タイプです。 jpg または png は、ピクセルのグリッドを使用して作成されたラスター イメージです。ラスター イメージを拡大すると、ぼやけ始めます。

ベクトル イメージは、ベクトルを描画し、それらを接続して形状を形成する数学関数を使用して作成されます。ピクセルグリッドではないので、100倍以上に拡大してもぼやけることはありません。

ベクター画像で CSS を使用すると、画像がより魅力的になり、Web ページ上に強力な画像を作成できます。このチュートリアルでは、実際に CSS と SVG を学習します。

例 1 (SVG 画像への基本スタイルの追加)

以下の例では、SVG 形式で円を作成します。 SVG 画像を作成するには、「svg」HTML タグを使用します。さらに、ビュー ボックスのサイズを設定します。さらに、ビュー フレーム内の円の x 位置と y 位置を設定します。

「circle」タグを使用して、CSS で svg 画像にアクセスし、スタイルを設定します。ユーザーは CSS を通じて塗りつぶしの色、ストロークの色、ストロークの幅を制御できることがわかります。ただし、さまざまな CSS プロパティを使用して追加のスタイルを追加することもできます。

リーリー

例 2 (SVG 画像にホバー効果を追加)

以下の例では、SVG ベクトル形式で 2 つの正方形を作成しました。さらに、各シェイプにクラス名を割り当てました。 CSS のクラス名を使用して HTML 要素にアクセスし、塗りつぶしの色を設定します。さらに、シェイプにホバー効果を設定します。出力内で、図形の上にマウスを置くと、色がどのように変化するかを観察できます。

リーリー

例 3 (SVG 画像にアニメーションを追加)

以下の例では、SVG 画像にアニメーションを追加します。ここではSVGを使用して円を作成しました。 CSS では、ID を使用して円にアクセスし、移動キーフレームをアニメーションとして追加します。

Move キーフレームでは、円の垂直位置を変更します。これにより、弾む円が表示されます。

リーリー

SVG 画像で CSS を使用する方法を学びました。この最初の例では、CSS と SVG の基本的な使用法を学びました。 2 番目の例では、SVG 画像にホバー効果を追加しました。前の例では、SVG 画像にアニメーションを追加しました。

実際の開発では、ユーザーは SVG で CSS を使用してアニメーションを追加したり、GIF を作成したりできます。

以上がCSS と SVG の実際の応用例は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。