<linearGradient>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

* Some parts of this feature may have varying levels of support.

<linearGradient> はSVG の要素で、制作者が他の SVG 要素に適用する線形グラデーションを定義することができます。

例

html,body,svg {  height: 100%;}

html

<svg  viewBox="0 0 10 10"  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink">  <defs>    <linearGradient gradientTransform="rotate(90)">      <stop offset="5%" stop-color="gold" />      <stop offset="95%" stop-color="red" />    </linearGradient>  </defs>  <!-- using my linear gradient -->  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" /></svg>

属性

gradientUnits: この属性は、x1,x2,y1,y2 の各属性の座標系を定義します。値の型:userSpaceOnUse |objectBoundingBox;既定値:objectBoundingBox;アニメーション:可
gradientTransform: この属性は、追加の座標変換をグラデーション座標系へ提供します。値の型:<transform-list>;既定値:等価変換;アニメーション:可
href: この属性は、テンプレートとして使用する別の<linearGradient> 要素への参照を定義します。値の型:<URL>;既定値: none;アニメーション:可
spreadMethod: この属性は、グラデーションがグラデーションを含む図形の境界の内側で始まったり終わったりする場合の振る舞いを示します。値の型:pad |reflect |repeat;既定値:pad;アニメーション:可
x1: この属性は、線形グラデーションが描画されるベクトルグラデーションの開始点の x 座標を定義します。値の型:<length>;既定値:0%;アニメーション:可
x2: この属性は、線形グラデーションが描画されるベクトルグラデーションの終了点の x 座標を定義します。値の型:<length>;既定値:100%;アニメーション:可
xlink:href非推奨;: テンプレートとして使用する別の<linearGradient> 要素への <IRI> 参照です。値の型:<IRI>;既定値: none;アニメーション:可
y1: この属性は、線形グラデーションが描画されるベクトルグラデーションの開始点の y 座標を定義します。値の型:<length>;既定値:0%;アニメーション:可
y2: この属性は、線形グラデーションが描画されるベクトルグラデーションの終了点の y 座標を定義します。値の型:<length>;既定値:0%;アニメーション:可

使用可能な場所

カテゴリー	グラデーション要素
許可されている内容	任意の数、任意の順序の以下の要素。説明的要素 `<animate>`、`<animateTransform>`、`<script>`、`<set>`、`<stop>`、`<style>`