SVG／グラデーション

色の変化の到達点を指定（stop）
線形グラデーション（linearGradient）
放射状グラデーション（radialGradient）
グラデーションの継承

色の変化の到達点を指定  stop 要素

属性
offset グラデーション開始から終了座標の間を0%から100%もしくは0～1とした位置。
少なくとも0%（0）と100%（1）の２つは指定すること。
stop-color offset属性で指定した位置にて、グラデーション変化が到達しているべき色。
stop-opacity offset属性で指定した位置にて、グラデーション変化で到達しているべき不透明度。
0（完全に透明）～1（全く透明でない）
グラデーションを定義するlinearGradient・radialGradient要素の中で、グラデーションが始まる座標から終わる座標の間の任意の位置にて到達しているべき色を指定します。
stop要素は単独で使うのではなく、linearGradient要素、radialGradient要素と共に使用します。
stop要素は最低でもグラデーション開始点と終了点の2点を指定する必要があります。
offset属性に指定する位置で、stop-color属性やstop-opacity属性で色の変化と同様に不透明度の変化を指定できます。

線形グラデーション  linearGradient 要素

属性
id グラデーション名
x1 y1 x2 y2 グラデーションの開始点(x1, y1) 終了点(x2, y2)の座標
塗りつぶしするグラフィックを囲む矩形領域内の座標をパーセンテージで指定。デフォルトは、水平な左から右への方向。
x1="0%", y1="0%", x2="100%", y2="0%"
spreadMethod x1～y2属性の範囲外のグラデーションの適用方法
pad 開始点と終了点の色（または不透明度）を継続させる。
repeat グラデーションが繰り返す。
reflect グラデーションの開始と終了を反転して繰り返す。
線形グラデーションは、直線方向に次第に色が変化します。
stop要素でグラデーションの開始座標から終了座標までの間に色の変化を割り当てます。
グラデーションでグラフィックを塗りつぶすときのfill属性（あるいはstroke属性）には、id属性に定義したグラデーション名を指定します。
fill="url(#グラデーションの名前)"
<svg width="10cm" height="10cm" viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg">
    <linearGradient id="bluered"
        x1="0%" y1="100%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="blue"/>
        <stop offset="100%" stop-color="red"/>
    </linearGradient>
    <rect x="10" y="20" width="80" height="30" stroke="black" fill="url(#bluered)"/>
    <linearGradient id="grwhaq"
        x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stop-color="green"/>
        <stop offset="50%" stop-color="white"/>
        <stop offset="100%" stop-color="aqua"/>
    </linearGradient>
    <rect x="10" y="50" width="80" height="30" stroke="black" fill="url(#grwhaq)"/>
</svg>
Picture
<svg width="10cm" height="10cm" viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg">
    <linearGradient id="gradopacity">
        <stop offset="0%" stop-color="darkgreen" stop-opacity="1.0"/>
        <stop offset="50%" stop-color="darkgreen" stop-opacity="0.3"/>
        <stop offset="100%" stop-color="darkgreen" stop-opacity="0"/>
    </linearGradient>
    <rect x="10" y="30" width="60" height="30" fill="yellow"/>
    <rect x="10" y="30" width="60" height="30" stroke="black"
        fill="url(#gradopacity)"/>
</svg>
Picture
<svg width="10cm" height="10cm" viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg">
    <linearGradient id="gradpad"
        x1="30%" y1="0%" x2="70%" y2="0%" spreadMethod="pad">
        <stop offset="0%" stop-color="gold"/>
        <stop offset="100%" stop-color="white"/>
    </linearGradient>
    <linearGradient id="gradrepeat"
        x1="30%" y1="0%" x2="70%" y2="0%" spreadMethod="repeat">
        <stop offset="0%" stop-color="indigo"/>
        <stop offset="100%" stop-color="white"/>
    </linearGradient>
    <linearGradient id="gradreflect"
        x1="30%" y1="0%" x2="70%" y2="0%" spreadMethod="reflect">
        <stop offset="0%" stop-color="salmon"/>
        <stop offset="100%" stop-color="white"/>
    </linearGradient>
    <rect x="10" y="20" width="60" height="20" stroke="black" fill="url(#gradpad)"/>
    <rect x="10" y="40" width="60" height="20" stroke="black" fill="url(#gradrepeat)"/>
    <rect x="10" y="60" width="60" height="20" stroke="black" fill="url(#gradreflect)"/>
</svg>
Picture

放射状グラデーション  radialGradient 要素

属性
id グラデーション名
cx cy グラデーションの開始する中心座標
デフォルトはcx、cyともに50%（領域の中央）。
r グラデーションの半径
パーセンテージで指定する。デフォルトは50%（範囲全体）。
spreadMethod cx、cy、r属性の範囲外のグラデーションの適用方法
線形グラデーションlinearGradientと同様。
放射状グラデーションは、中心から放射状の外方向に次第に色が変化します。
stop要素でグラデーションの開始から終了までの色の割り当てを指定します。グラデーションでグラフィックを塗りつぶすときのfill属性（あるいはstroke属性）には、id属性に定義したグラデーション名を指定します。
fill="url(#グラデーションの名前)"
<svg width="10cm" height="10cm" viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg">
    <radialGradient id="lightdarkgreen">
        <stop offset="0%" stop-color="lightgreen"/>
        <stop offset="100%" stop-color="darkgreen"/>
    </radialGradient>
    <circle cx="30" cy="30" r="25" fill="url(#lightdarkgreen)"/>
    <radialGradient id="aquablue" cx="30%" cy="30%" r="70%">
        <stop offset="0%" stop-color="aqua"/>
        <stop offset="100%" stop-color="blue"/>
    </radialGradient>
    <circle cx="70" cy="70" r="25" fill="url(#aquablue)"/>
</svg>
Picture

グラデーションの継承

xlink:href属性でIDを参照することで、グラデーション定義を継承することができます。
継承するグラデーション定義のidを、linearGradient要素やradialGradient要素のhref属性で指定して参照します。
また、この場合は名前空間「xmlns:xlink="http://www.w3.org/1999/xlink"」の宣言が必要です。
<svg width="10cm" height="10cm" viewBox="0 0 100 100"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <linearGradient id="bluelime">
        <stop offset="0%" stop-color="blue"/>
        <stop offset="100%" stop-color="lime"/>
    </linearGradient>
    <linearGradient id="leftright" xlink:href="#bluelime" x2="100%" y2="0%"/>
    <linearGradient id="upperlower" xlink:href="#bluelime" x2="0%" y2="100%"/>
    <rect x="10" y="20" width="80" height="30" stroke="black"
        fill="url(#leftright)"/>
    <rect x="10" y="50" width="80" height="30" stroke="black"
        fill="url(#upperlower)"/>
</svg>
Picture