== グラデーションとパターン ==
. グラデーションには線形グラデーションと円形グラデーションがあります。
. パターンは模様を作るのに使います。
----
=== 線形グラデーション（linearGradient） ===
{{{
}}}
グラデーションの定義は linearGradient タグで名前を指定し、stop 要素で色を指定します。
上の例では０％の位置を赤紫、１００％の位置を水色にしています。
両端の色のほかに２０％、５０％など途中の色を含めて指定してもよい。
利用するには fill:url(#名前) です。
図形の左端が０％で指定した色、右端が１００％で指定した色になります。
'''グラデーションの方向'''
{{{
... ...
}}}
向きのちがうグラデーションを作るには、上記の方法でグラデーションを作成した後に、それを利用して向きだけを指定します。
名前がgr2のグラデーションはgr1とグラデーションの向きを左右逆にしたものになります。
上から下へのグラデーションにするには
{{{
}}}
のようにします。
斜め方向のグラデーションも可能です。
'''繰り返しなど'''
spreadMethod に次のどれかを指定することができます。
* spreadMethod="pad"
オブジェクトにあわせてグラデーションの幅を広げます
* spreadMethod="repeat"
同じ向きで繰り返します
* spreadMethod="reflect"
反転して繰り返します
例
{{{
}}}
----
=== 円形グラデーション（radialGradient） ===
{{{
}}}
グラデーションの定義は radialGradient タグで名前を指定し、stop 要素で色を指定します。
上の例では０％の位置を赤紫、１００％の位置を水色にしています。
両端の色のほかに２０％、５０％など途中の色を含めて指定してもよい。
利用するには fill:url(#名前) です。
図形の左端が０％で指定した色、右端が１００％で指定した色になります。
'''グラデーションの中心'''
{{{
}}}
. cx
中心位置、初期値は５０％（バウンディングボックスの中心）
. cy
中心位置、初期値は５０％（バウンディングボックスの中心）
. r
. fx
. fy
----
=== パターン ===
図形をまとめてpatternとして定義することで、模様をfillの属性として使うことができます。
{{{
}}}