SVG グラデーション - 線形

SVG グラデーション

グラデーションとは、ある色から別の色へのスムーズな移行です。さらに、複数の色の遷移を同じ要素に適用できます。

SVG グラデーションには主に 2 つのタイプがあります:

Linear
Radial

SVG Linear Gradient - <linearGradient>

<linearGradient> 要素が使用されます。線形グラデーションを定義します。

<linearGradient> タグは <defs> 内にネストする必要があります。 <defs> タグは定義の略称で、グラデーションなどの特別な要素を定義できます。

線形グラデーションは、水平、垂直、角度グラデーションとして定義できます:

水平グラデーションは、y1 と y2 が等しいが、x1 と x2 が異なる場合に作成できます
x1 と x2 が等しいが、y1 が異なる場合と y2 が異なると同時に、垂直方向のグラデーションを作成できます
x1 と x2 が異なり、y1 と y2 が異なる場合、角度のグラデーションを作成できます

例 1

黄色から赤の楕円形への水平線形グラデーション:

以下は SVG コードです:

インスタンス

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

</body>
</html>

インスタンスの実行»

オンラインインスタンスを表示するには、[インスタンスの実行] ボタンをクリックしてください

Opera ユーザーの場合: SVG ファイルを表示します (SVG グラフィックプレビューソースを右クリックします)。

コード分析:

<linearGradient>ラベルの id 属性は、グラデーションの一意の名前を定義できます
<linearGradient>ラベルの X1、X2、Y1、Y2 属性は定義しますグラデーションの開始位置と終了位置
グラデーションの色の範囲は 2 つ以上の色で構成できます。各色は <stop> タグで指定します。 offset プロパティは、グラデーションの開始位置と終了位置を定義するために使用されます。
fill 属性は、楕円要素をこのグラデーションにリンクします

例 2

黄色から赤への垂直線形グラデーションを持つ楕円を定義します:

SVG コードは次のとおりです:

例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

</body>
</html>

インスタンスの実行»

[インスタンスの実行] ボタンをクリックしてオンラインインスタンスを表示します

Opera ユーザーの場合: SVG ファイルを表示します (SVG グラフィックプレビューソースを右クリックします)。

例 3

黄色から赤への水平方向の線形グラデーションで楕円を定義し、楕円の内側にテキストを追加します:

SVG コードは次のとおりです:

例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">SVG</text>
</svg>

</body>
</html>

例の実行 »

クリック「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します

Opera ユーザーの場合: SVG ファイルを表示します (SVG グラフィックプレビューソースを右クリックします)。

コード分析:

<text>テキストを追加するために使用されます

SVG グラデーション - 線形