JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5のタグとは？SVG放射状グラデーションの使い方を解説

HTML5の<radialGradient>タグとは

<radialGradient>タグは、SVG（Scalable Vector Graphics）において放射状グラデーションを定義するための要素です。中心点から外側へ向かって色が滑らかに変化する円形・楕円形のグラデーションを作成でき、Chrome、Firefox、Safari、Edgeなどのモダンブラウザすべてでサポートされています。

このタグ自体は単独では表示されず、<defs>要素内で定義したうえで、図形のfill属性などから参照して使用します。

基本的な使い方とサンプルコード

以下は、HTML5でSVGを利用したサンプルです。<ellipse>タグで楕円形を描画し、<radialGradient>タグで定義した放射状グラデーションを塗りつぶしとして適用しています。

なお、直線方向に色が変化するグラデーションを作成したい場合は、同じ要領で<linearGradient>タグを使用します。

<!DOCTYPE html>
<html>
  <head>
    <style>
      #svgelem{
        position: relative;
        left: 50%;
        -webkit-transform: translateX(-40%);
        -ms-transform: translateX(-40%);
        transform: translateX(-40%);
      }
    </style>
    <title>SVG</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h2 align="center">HTML5 SVG Gradient Ellipse</h2>
    <svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">
    <defs>
      <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/>
        <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>
      </radialGradient>
    </defs>
    <ellipse cx="100" cy="50" rx="100" ry="50" style="fill:url(#gradient)" />
    </svg>
  </body>
</html>

コードのポイント解説

  • <defs>要素： グラデーションなどの再利用可能な定義は<defs>内に記述します。ここに置かれた要素は直接画面には表示されません。
  • cx / cy / r属性： グラデーションの中心座標（cx、cy）と半径（r）を指定します。上の例ではいずれも50%に設定しています。
  • fx / fy属性： グラデーションの焦点位置を指定します。中心からずらすことで、光の当たり方のような立体感のある表現も可能です。
  • <stop>要素： offset属性でグラデーションの位置（0%＝中心、100%＝外周）を指定し、stop-colorで色、stop-opacityで不透明度を定義します。この例では中央が透明、外周が青になるグラデーションになっています。
  • fill属性： style="fill:url(#gradient)" のように、定義したグラデーションのIDをURL参照で指定することで、楕円にグラデーションが適用されます。

まとめ

<radialGradient>タグを使えば、HTML5のSVGだけで画像ファイルに頼らず美しい放射状グラデーションを実現できます。ボタンやアイコン、背景装飾など、軽量で拡張性の高いビジュアル表現にぜひ活用してみてください。

  1. HTML5でSVGロゴを描く方法をわかりやすく解説

    SVGとは？SVG（Scalable Vector Graphics：スケーラブル・ベクター・グラフィックス）は、XMLを使って2Dグラフィックスや図形アプリケーションを記述するための言語です。記述されたXMLコードは、SVGビューアによって描画（レンダリング）されます。現在、主要なWebブラウザのほとんどが、PNGやGIF、JPGといった画像形式と同じようにSVGを表示できます。HTML5でのSVGの基本HTML5では、SVGタグを使うことで、円・長方形・直線などの基本図形を手軽に描くことができます。ここでは、実際にSVGでロゴを描くサンプルを紹介します。ロゴに美しい色合いを持たせるため、l

  2. HTML5でSVG画像を使用する方法｜img・object・embedタグの使い分けを解説

    HTML5でSVG画像を表示する基本 HTML5でSVG（Scalable Vector Graphics）画像を利用するには、<img>要素または<svg>要素を使用します。SVGファイルをWebページに組み込む方法は主に3つあり、それぞれ特徴が異なるため、用途に応じて適切なものを選択することが重要です。 SVGを読み込む3つの方法 <img>タグ：最もシンプルな方法。JPEGやPNGなどの通常の画像と同じ感覚で扱えます。 <object>タグ：外部リソースとしてSVGを読み込みます。フォールバックコンテンツを指定できるのが特徴です。 &l