SVG ラインアニメーション
- 前のページ SVG シャドウ
- 次のページ SVG レーザーエフェクト
SVG 拡散
拡散は1つの色から別の色への滑らかな移行です。また、同じ要素に複数の色の移行を適用することもできます。
SVGには主に2種類の拡散があります：
- 線形拡散
- 放射拡散
SVG 線形拡散 - <linearGradient>
<linearGradient> 要素は線形拡散を定義するために使用されます。
<linearGradient> 要素は <defs> タグ内。<defs> 要素は定義（definitions）の省略形で、特殊要素（例えばフィルタ）の定義を含みます。
線形拡散は水平、垂直、または角度拡散として定義できます：
- y1とy2が等しい場合、x1とx2が不相等な場合に水平拡散を作成します
- x1とx2が等しい場合、y1とy2が不相等な場合に垂直拡散を作成します
- x1とx2が異なる場合、y1とy2が不相等な場合に角度拡散を作成します
例 1
黄色から赤への水平線形拡散を定義する円を定義します：
これは SVG コードです：
<svg height="150" width="400">
<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>
コード説明：
- <linearGradient> タグの id 属性でグラデーションのユニークな名前を定義します
- <linearGradient> タグの x1、x2、y1、y2 属性でグラデーションの開始位置と終了位置を定義します
- グラデーションの色範囲は、2色以上の色で構成されます。各色は <stop> タグで指定されます
- offset 属性でグラデーション色の開始位置と終了位置を定義します
- fill 属性で円要素がグラデーションにリンクされます
例 2
以下は、黄色から赤への垂直線形グラデーションを持つ円を定義する方法です：
これは SVG コードです：
<svg height="150" width="400">
<defs>
<linearGradient id="grad2" 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(#grad2)" />
</svg>
例 3
以下は、黄色から赤への水平線形グラデーションを持つ円を定義し、円内にテキストを挿入する方法です：
これは SVG コードです：
<svg height="150" width="400">
<defs>
<linearGradient id="grad3" 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(#grad3)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
SVG</text>
</svg>
コード説明：
- <text>要素はテキストを追加するために使用されます
- 前のページ SVG シャドウ
- 次のページ SVG レーザーエフェクト
