グラデーションとパターン

グラデーションには線形グラデーションと円形グラデーションがあります。

パターンは模様を作るのに使います。

線形グラデーション（linearGradient）

<defs> <linearGradient id="gr1"> <stop offset="0%" style="stop-color: #ff00cc;" /> <stop offset="100%" style="stop-color: #0099cc;" /> </linearGradient> </defs> <rect x="0" y="0" width="400" height="50" style="fill:url(#gr1);" />

グラデーションの定義は linearGradient タグで名前を指定し、stop 要素で色を指定します。 上の例では０％の位置を赤紫、１００％の位置を水色にしています。 両端の色のほかに２０％、５０％など途中の色を含めて指定してもよい。

利用するには fill:url(#名前) です。 図形の左端が０％で指定した色、右端が１００％で指定した色になります。

グラデーションの方向

<defs> <linearGradient id="gr1"> ... ... </linearGradient> <linearGradient id="gr2" xlink:href="#gr1" x1="100%" x2="0%" y1="0%" y2="0%" /> </defs>

向きのちがうグラデーションを作るには、上記の方法でグラデーションを作成した後に、それを利用して向きだけを指定します。

名前がgr2のグラデーションはgr1とグラデーションの向きを左右逆にしたものになります。

上から下へのグラデーションにするには

<linearGradient id="gr3" xlink:href="#gr1" x1="0%" x2="0%" y1="0%" y2="100%" />

のようにします。

斜め方向のグラデーションも可能です。

繰り返しなど

spreadMethod に次のどれかを指定することができます。

spreadMethod="pad"

オブジェクトにあわせてグラデーションの幅を広げます

spreadMethod="repeat"

同じ向きで繰り返します

spreadMethod="reflect"

反転して繰り返します

例

<linearGradient id="gr4" xlink:href="#gr1" spreadMethod="pad" />

円形グラデーション（radialGradient）

<defs> <radialGradient id="gr1"> <stop offset="0%" style="stop-color: #ff00cc;" /> <stop offset="100%" style="stop-color: #0099cc;" /> </linearGradient> </defs> <rect x="0" y="0" width="400" height="50" style="fill:url(#gr1);" />

グラデーションの定義は radialGradient タグで名前を指定し、stop 要素で色を指定します。 上の例では０％の位置を赤紫、１００％の位置を水色にしています。 両端の色のほかに２０％、５０％など途中の色を含めて指定してもよい。

利用するには fill:url(#名前) です。 図形の左端が０％で指定した色、右端が１００％で指定した色になります。

グラデーションの中心

<defs> <radialGradient id="gr1" cx="0" cy="0" r="100%"> <stop offset="0%" style="stop-color: #ff00cc;" /> <stop offset="100%" style="stop-color: #0099cc;" /> </linearGradient> </defs>

cx

中心位置、初期値は５０％（バウンディングボックスの中心）

cy

中心位置、初期値は５０％（バウンディングボックスの中心）

r

fx

fy

パターン

図形をまとめてpatternとして定義することで、模様をfillの属性として使うことができます。

<defs> <pattern id="pat1" x="0" y="0" width="20%" height="20%" patternUnits=""objectBoundingBox"> <path d="M 0 0 Q 5 20 10 10 T 20 20" style="stroke:black; fill:none;" /> <path d="M 0 0 h 20 v 20 h -20 z" style="stroke;gray; fill:none;" /> </pattern> </defs> <rect x="20" y="20" width="100" height="100" style="fill:url(#pat1); stroke:black;" />